用Class写一个记住用户离开位置的js插件

摘要：咱们为即将写的库起个名字为，开始就是如下的样子啦处理传进来的参数我们需要在类的构造函数中接收参数，并覆盖默认参数。

常见的js插件都很少使用ES6的class，一般都是通过构造函数，而且常常是手写CMD、AMD规范来封装一个库，比如这样：

// 引用自：https://www.jianshu.com/p/e65c246beac1
;(function(undefined) {
    "use strict"
    var _global;
    var plugin = {
      // ...
    }
    _global = (function(){ return this || (0, eval)("this"); }());
    if (typeof module !== "undefined" && module.exports) {
        module.exports = plugin;
    } else if (typeof define === "function" && define.amd) {
        define(function(){return plugin;});
    } else {
        !("plugin" in _global) && (_global.plugin = plugin);
    }
}());

但现在都9102年了，是时候祭出我们的ES6大法了，可以用更优雅的的写法来实现一个库，比如这样：

class RememberScroll {
    constructor(options) {
        ...
    }
}
export default RememberScroll

在这篇文章，博主主要通过分享最近自己写的一个记住页面滚动位置小插件，讲一下如何用class语法配合webpack 4.x和babel 7.x封装一个可用的库。

项目地址：Github， 在线Demo：Demo

喜欢的朋友希望能点个Star收藏一下，非常感谢。

相信很多同学都会遇到这样一个需求：用户浏览一个页面并离开后，再次打开时需要重新定位到上一次离开的位置。

这个需求很常见，我们平时在手机上阅读微信公众号的文章页面就有这个功能。想要做到这个需求，也比较好实现，但博主有点懒，心想有没有现成的库可以直接用呢？于是去GitHub上搜了一波，发现并没有很好的且符合我需求的，于是得自己实现一下。

为了灵活使用（只是部分页面需要这个功能），博主在项目中多带带封装了这个库，本来是在公司项目中用的，后来想想何不开源出来呢？于是有了这个分享，这也是对自己工作的一个总结。

博主喜欢在做一件事情前先yy一下预期的效果。博主希望这个库用起来尽量简单，最好是插入一句代码就可以了，比如这样：

在想要加上记住用户浏览位置的页面上引入一下库，然后new RememberScroll()初始化一下即可。

下面就带着这个目标，一步一步去实现啦。

用户浏览页面的位置，主要需要存两个字段：哪个页面和离开时的位置，通过这两个字段，我们才可以在用户第二次打开网站的页面时，命中该页面，并自动跳转到上一次离开的位置。

记住浏览位置，需要将用户离开前的浏览位置记录在客户端的浏览器中。这些信息可以主要存放在：cookie、sessionStorage、localStorage中。

存放在cookie，大小4K，空间虽有限但也勉强可以。但cookie是每次请求服务器时都会携带上的，无形中增加了带宽和服务器压力，所以总体来说是不太合适的。

存放在sessionStorage中，由于仅在当前会话下有效，用户离开页面sessionStorage就会被清除，所以不能满足我们的需求。

存放在localStorage,浏览器可永久保存，大小一般限制5M，满足我们需求。

综上，最后我们应该选择localStorage。

一个站点可能有很多页面，如何标识是哪个页面呢？

一般来说可以用页面的url作为页面的唯一标识，比如：www.xx.com/article/${id},不同的id对应不同的页面。

但博主考虑到现在很多站点都是用spa了，而且常见在url后面会带有#xxx的哈希值，如www.xx.com/article/${id}#tag1和www.xx.com/article/${id}#tag2这种情况，这可能表示的是同一个页面的不同锚点，所以用url作为页面的唯一标识不太可靠。

因此，博主决定将这个页面唯一标识作为一个参数来让使用者来决定，姑且命名为pageKey，让使用者保证是全站唯一的即可。

如果用户访问我们的站点中很多很多的页面，由于localStorage是永久保存的，如何避免localStorage不断累积占用过大？

我们的需求可能仅仅是想近期记住即可，即只需要记住用户的浏览位置几天，可能会更希望我们存的数据能够自动过期。

但localStorage自身是没有自动过期机制的，一般只能在存数据的时候同时存一下时间戳，然后在使用时判断是否过期。如果只能是在使用时才判断是否清除，而新访问页面时又会生成新的记录，localStorage中始终都会存在至少一条记录的，也就是说无法真正实现自动过期。这里不禁就觉得有点多余了，既然都是会一直保留记录在localStorage中，那干脆就不判断了，咱换一个思路：只记录有限的最新页面数量。

举个例子：

咱们网站有个文章页：www.xx.com/articles/${id}，每个的id表示不同的文章，咱们只记录用户最新访问的5篇文章，即维护一个长度为5的队列。
比如当前网站有id从1到100篇文章，用户分别访问第1,2,3,4,5篇文章时，这5篇文章都会记录离开的位置，而当用户打开第六篇文章时，第六条记录入队的同时第一条记录出队，此时localStorage中记录的是2,3,4,5,6这几篇文章的位置，这就保证了localStorage永远不会累积存储数据且旧记录会随着不断访问新页面自动“过期”。

为了更灵活一点，博主决定给这个插件添加一个maxLength的参数，表示当前站点下记录的最新的页面最大数量，默认值设为5，如果有小伙伴的需求是记录更多的页面，可以通过这个参数来设置。

我们需要时刻监听用户浏览页面时的滚动条的位置，可以通过window.onscroll事件，获得当前的滚动条位置：scrollTop 。

将scrollTop和页面唯一标识pageKey存进localStorage中。

用户再次打开之前访问过的页面，在页面初始化时，读取localStorage中的数据，判断页面的pageKey是否一致，若一致则将页面的滚动条位置自动滚动到相应的scrollTop值。

是不是很简单？不过实现的过程中需要注意一下细节，比如做一下防抖处理。

逼逼了这么久，是时候开始撸代码了。

工欲善其事，必先利其器。为更好服务接下来的工作，咱们先简单封装一下调用localStorage的几个方法,主要是get,set,remove：

// storage.js
const Storage = {
  isSupport () {
    if (window.localStorage) {
      return true
    } else {
      console.error("Your browser cannot support localStorage!")
      return false
    }
  },
  get (key) {
    if (!this.isSupport) {
      return
    }
    const data = window.localStorage.getItem(key)
    return data ? JSON.parse(data) : undefined
  },
  remove (key) {
    if (!this.isSupport) {
      return
    }
    window.localStorage.removeItem(key)
  },
  set (key, data) {
    if (!this.isSupport) {
      return
    }
    const newData = JSON.stringify(data)
    window.localStorage.setItem(key, newData)
  }
}

export default Storage

class即类，本质上虽然是一个function,但使用class定义一个类会更直观。咱们为即将写的库起个名字为RememberScroll，开始就是如下的样子啦：

import Storage from "./storage"
class RememberScroll {
    constructor() {
        
    }
}

1.处理传进来的参数

我们需要在类的构造函数constructor中接收参数，并覆盖默认参数。

还记得上面咱们预期的用法吗？即new RememberScroll({pageKey: "myPage", maxLength: 10})。

  constructor (options) {
    let defaultOptions = {
      pageKey: "_page1", // 当前页面的唯一标识
      maxLength: 5
    }
    this.options = Object.assign({}, defaultOptions, options)
}

如果没有传参数，就会使用默认的参数，如果传了参数，就使用传进来的参数。this.options就是最终处理后的参数啦。

2.页面初始化

当页面初始化时，咱们需要做三件事情：

从loaclStorage取出缓存列表

将滚动条滚动到记录的位置（若有记录的话）；

注册window.onscroll事件监听用户滚动行为；

因此，需要在构造函数中就执行initScroll和addScrollEvent这两个方法:

import Storage from "./utils/storage"
class RememberScroll {
  constructor (options) {
    // ...
    this.storageKey = "_rememberScroll"
    this.list = Storage.get(this.storageKey) || []
    this.initScroll()
    this.addScrollEvent()
  }
  initScroll () {
    // ...
  }
  addScrollEvent () {
    // ...
  }
}

这里咱们将localStorage中的键名命名为_rememberScroll，应该能够尽量避免和平常站点使用localStorage的键名冲突。

3.监听滚动事件：addScrollEvent()的实现

  addScrollEvent () {
    window.onscroll = () => {
      // 获取最新的位置，只记录垂直方向的位置
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 构造当前页面的数据对象
      const data = {
        pageKey: this.options.pageKey,
        y: scrollTop
      }
      let index = this.list.findIndex(item => item.pageKey === data.pageKey)
      if (index >= 0) {
        // 之前缓存过该页面，则替换掉之前的记录
        this.list.splice(index, 1, data)
      } else {
        // 如果已经超出长度了，则清除一条最早的记录
        if (this.list.length >= this.options.maxLength) {
          this.list.shift()
        }
        this.list.push(data)
      }
      // 更新localStorage里面的记录
      Storage.set(this.storageKey, this.list)
    }
  }

ps：这里最好需要做一下防抖处理

4.初始化滚动条位置： initScroll()的实现

initScroll () {
    // 先判断是否有记录
    if (this.list.length) {
      // 当前页面pageKey是否一致
      let currentPage = this.list.find(item => item.pageKey === this.options.pageKey)
      if (currentPage) {
        setTimeout(() => {
          // 一致，则滚动到对应的y值
          window.scrollTo(0, currentPage.y)
        }, 0)
    }
}

细心的同学可能会发现，这里用了setTimeout,而不是直接调用window.scrollTo。这是因为博主在这里遇到坑了，这里涉及到页面加载执行顺序的问题。

在执行window.scrollTo前，页面必须是已经加载完成了的，滚动条要已存在才可以滚动对吧。如果页面加载时直接执行，当时的scroll高度可能为0，window.scrollTo执行就会无效。如果页面的数据是异步获取的，也会导致window.scrollTo无效。因此用setTimeout会是比较稳的一个办法。

5.将模块export出去

最后我们需要将模块export出去，整体代码大概是这个样子：

import Storage from "./utils/storage"

class RememberScroll {
  constructor (options) {
    let defaultOptions = {
      pageKey: "_page1", // 当前页面的唯一标识
      maxLength: 5
    }
    this.storageKey = "_rememberScroll"
    // 参数
    this.options = Object.assign({}, defaultOptions, options)

    // 缓存列表
    this.list = Storage.get(this.storageKey) || []
    this.initScroll()
    this.addScrollEvent()
  }
  initScroll () {
    // ...
  }
  addScrollEvent () {
    // ...
  }
}

export default RememberScroll

这样就基本完成整个插件的功能啦，是不是很简单哈哈。篇幅原因就不贴具体代码了，可以直接到GitHub上看：remember-scroll

接下来应该是本文的重点了，首先要清楚为什么要打包？

将项目中所用到的js文件合并，只对外输出一个js文件。

使项目同时支持AMD,CMD、浏览器

这里有个坑需要注意一下，如果没有加上libraryExport: "default",由于我们代码中是export default RememberScroll,打包出来的代码会类似：

{
    "default": {
        initScroll () {}
    }
}

{
    initScroll () {}
}

PS: webpack英文文档看得有点懵逼，这个坑让博主折腾了很久才爬起来，所以特别讲下。刚兴趣的同学可以看下文档：output.libraryExport。

PS: 虽然很多人说不考虑兼容IE了，但作为一个通用性的库，古董级的IE7,8,9可以不兼容，但较新版本的IE10,11还是需要兼容一下的。

PS：以前博主一直以为（相信很多刚接触Babel的同学也是这样），只要使用了Babel，就可以放心无痛使用ES6的语法了，然而事情并不是这样。Babel编译并不会做polyfill，Babel为了保证正确的语义，只能转换语法而不会增加或修改原有的属性和方法。要想无痛使用ES6，还需要配合polyfill。不太理解的同学，在这里推荐大家看下这篇文章：21 分钟精通前端 Polyfill 方案，写得非常通俗易懂。

npm install -D babel-loader @babel/core @babel/preset-env core-js

core-js是JavaScript模块化标准库，在@babel/preset-env按需打包时会使用core-js中的函数，因此这里也是要安装的，不然打包的时候会报错。

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "remember-scroll.js",
    library: "RememberScroll",
    libraryTarget: "umd",
    libraryExport: "default"
  },
  module: {
    rules: [
        {
          test: /.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: "babel-loader"
          }
        }
      ]
  }
};

const presets = [
  [
    "@babel/env",
    {
      targets: {
        browsers: [
            "last 1 version",
            "> 1%",
            "maintained node versions",
            "not dead"
          ]
      },
      useBuiltIns: "usage",
    },
  ],
];

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --mode=production -o dist/remember-scroll.min.js --colors",
    "dev": "webpack --mode=development --colors"
  },

{
    "main": "dist/remember-scroll.min.js",
}