vue muit-ui infinite-scroll源码解析

infinite scroll基本使用

vue的mint-ui的infinite scroll的基本使用地址：infinite-scroll接入指南.
简单解释一下：
1、指令接受的method：处理loadmore回调
2、自定义属性infinite-scroll-disabled：为false时:不会进行是否到达底部的判断,因此就触发不了loadmore回调
3、自定义属性infinite-scroll-distance：doCheck通过此distance来判断是否到达底部
4、自定义属性infinite-scroll-immediate-check: 是否在绑定到Vue上面就立刻执行 check函数
5、自定义属性infinite-scroll-listen-for-event: 通过Vue.$on()来注册此事件,此事件的回调函数是 当前指令定义回调函数(也就是loadmore)

源码解析

找到mint-ui源码的infinite-scroll目录，找到它的入口文件index.js,其代码如下：

import 'mint-ui/src/style/empty.css'; // 需要的css文件
export { default } from './src/infinite-scroll.js'; // 核心代码

infinite-scroll.js的代码如下：

import InfiniteScroll from './directive';
import 'mint-ui/src/style/empty.css';
import Vue from 'vue';
//当前 infinite-scroll的 install方法，用于Vue开发插件使用，在Vue.use()里面调用此对象的install函数，在安装此插件的时候，注册当前指令
const install = function(Vue) {
   
  Vue.directive('InfiniteScroll', InfiniteScroll);//注册指令
};
//已经在初始化的时候，帮我们调动了Vue.use()
if (!Vue.prototype.$isServer && window.Vue) {
  window.infiniteScroll = InfiniteScroll;
  Vue.use(install); // eslint-disable-line
}
InfiniteScroll.install = install;
export default InfiniteScroll;

通过上面得知InfiniteScroll代码在./directive.js里面，查看它的入口函数如下：

export default {
  // 指令绑定的钩子函数
  bind(el, binding, vnode) {
    // 为当前el添加我们需要使用的属性，它的value就是我们后面操作所需的对象
    el[ctx] = {
      el, // 当前指令绑定的dom节点
      vm: vnode.context, // 当前vNode所在的Vue实例
      expression: binding.value
    };
    const args = arguments;
    // 当前Vue实例挂载到到dom上之后执行的回调函数
    var cb = function() {
   
      //在此次事件循环完成dom相关更新之后,执行当前指令相关业务
      el[ctx].vm.$nextTick(function() {
    
        if (isAttached(el)) {
  // 当前dom在html标签里面  当前dom不在 documentFragment里面
          doBind.call(el[ctx], args);
        }

        el[ctx].bindTryCount = 0;

        var tryBind = function() {
   
          if (el[ctx].bindTryCount > 10) return; //eslint-disable-line
          el[ctx].bindTryCount++;
          if (isAttached(el)) {
            doBind.call(el[ctx], args);
          } else {
            setTimeout(tryBind, 50);
          }
        };

        tryBind();
      });
    };
    if (el[ctx].vm._isMounted) {
      cb();
      return;
    }
    el[ctx].vm.$on('hook:mounted', cb);// 如果阅读过vue源码, Vue通过callHook()调用其相关生命周期方法,此时也会调用通过hook注册的回调钩子函数
  },
  //当前指令解绑定的回调钩子函数
  unbind(el) {
    //将当前scroll view的 scroll事件remove掉
    if (el[ctx] && el[ctx].scrollEventTarget) {
      el[ctx].scrollEventTarget.removeEventListener(<