(function(){
// 自定义 Vue, isVueLoaded
var Vue;
var isVueLoaded = true;
// 判断是否有 require 方法,如果有则通过 require 方式引入 Vue,否则直接从 window 获取
if(typeof require === 'undefined'){
Vue = window.Vue;
}else{
Vue = require('vue');
}
// 如果没有 Vue, 则 isVueLoaded 赋值为 false, 并且 warn 提示用户去下载 Vue
if(!Vue) {
isVueLoaded = false;
console.warn('Vue is not loaded yet. Please make sure it is loaded before installing vue-scroll.');
}
// 定义 scrollPlugin 对象，以下是自定义 vue 插件的方式
var scrollPlugin = {
// 对象的 install 属性, 属性值是一个 function, 参数是 Vue 和 options
install: function(Vue, options){
// 定义常量
var EVENT_SCROLL = 'scroll';
// 定义一个 Q 构造函数
function Q(){
// 定义数组
var elements = [];
var listeners = [];
var addListener = function(element, eventType, funcs){
// 再次定义局部变量 EVENT_SCROLL
var EVENT_SCROLL = 'scroll';
var scrollData = {};
// https://github.com/wangpin34/vue-scroll/issues/1
// 如果 element 是 document.body 或者 window 等大视图的话
if((element === document.body || element === document || element === window) && eventType === EVENT_SCROLL){
// 直接给 document 定义 onscroll 方法,原本为空,现在直接内部定义,滚动时触发
document.onscroll = function(e) {
// 自定义对象的属性
// 此处的 scrollTop 取值直接是 document.body 的值
scrollData.scrollTop = document.body.scrollTop;
scrollData.scrollLeft = document.body.scrollLeft;
// 将传入的方法一个一个执行掉
funcs.forEach(function(func){
func && func(e, scrollData);
})
}
}else {
// element 应该是具体元素,如果不存在,则直接当做是 window.event
// 滚动时自动调用此方法, 此时 scroll 方法已经添加到 funcs 里了
// 如果绑定的是具体元素，具体元素滚动会触发下面方法的执行
var listener = function(e) {
e = e || window.event;
e.target = e.target || e.srcElement;
if(eventType === EVENT_SCROLL){
scrollData.scrollTop = element.scrollTop;
scrollData.scrollLeft = element.scrollLeft;
}
funcs.forEach(function(func){
// 执行所有的 func
// 从外部获取 function,并且将元素和 scrollData 传递给外部的方法
(typeof func !== 'undefined') && func(e, scrollData);
})
}
// 如果是新版浏览器,则支持 addEventListener ,通过该方法添加监听事件
if(element.addEventListener){
// 参数分别是事件名和触发事件时需要执行的函数
element.addEventListener(eventType, listener);
}else{
// 老版本浏览器(IE8及以下)只支持 attachEvent, 则通过改该方法添加监听事件
element.attachEvent('on' + eventType, listener);
}
}
}
// _initialized 是标记位,用来标记 Q 对象是否初始化了(给原型赋予了任何方法)
// 如果这个值未定义，构造函数将用原型方式继续定义对象的方法
// 如果未初始化,则进行一系列操作,然后设置 _initialized 为 true,表示此时已经被初始化了
// 此方法是动态原型模式,下方代码只有初次调用构造函数的时候才会执行
if(typeof Q._initialized == 'undefined'){
// element 为外部传入元素, eventType 这里为 scroll, func 为外部传入方法
Q.prototype.bind = (function(element, eventType, func){
var funcs;
// 查看元素是否在 elements 里,没有则添加进去
if(elements.indexOf(element) < 0){
elements.push(element);
// 给 listeners 添加一个空对象
listeners.push({});
// listeners 的数组最后一个元素内容赋值给 funcs
funcs = listeners[listeners.length - 1];
}else{
// 将 element 对应的 listener 赋值给 funcs
funcs = listeners[elements.indexOf(element)];
}
var eventFuncs;
// funcs 对应的事件类型的事件不存在
if(!funcs[eventType]){
//Initialize event listeners
funcs[eventType] = [];
//Bind to the element once
addListener(element, eventType, funcs[eventType]);
}
eventFuncs = funcs[eventType];
// func 为外部传入的方法
eventFuncs.push(func);
}).bind(this);
Q.prototype.unbind = (function(element, eventType, func){
var funcs;
if(elements.indexOf(element) < 0){
console.warn('There are no listener could be removed.');
return 1;
}else{
funcs = listeners[elements.indexOf(element)];
}
var eventFuncs;
if(!funcs[eventType] || (eventFuncs = funcs[eventType]).indexOf(func) < 0){
console.warn('There are no listener could be removed.');
return;
}
eventFuncs.splice(eventFuncs.indexOf(func), 1);
console.log('A event listener is removed successfully');
}).bind(this);
Q._initialized = true;
}
}
// 生成实例
var q = new Q();
// 定义 Vue 指令
Vue.directive('scroll', {
bind: function(el, binding, vnode){
// 如果 binding.value 不是一个函数,则进行错误提示
if(!binding.value || typeof binding.value !== 'function'){
throw new Error('The scroll listener is not a function');
}
// 三个参数分别表示元素,事件,以及需要执行的方法
q.bind(el, EVENT_SCROLL, binding.value);
},
inserted: function(el, binding){
//To do, check whether element is scrollable and give warn message when not
},
update: function(el, binding){
// 如果绑定的函数和绑定之前的函数一致,则直接返回
if(binding.value === binding.oldValue){
return;
}
// 如果绑定的不是函数,则报错
if(!binding.value || typeof binding.value !== 'function'){
throw new Error('The scroll listener is not a function');
}
// 绑定新函数,解绑旧函数
q.bind(el, EVENT_SCROLL, binding.value);
q.unbind(el, EVENT_SCROLL, binding.oldValue);
},
unbind: function(el, binding){
// 如果绑定的是函数,则解绑,否则报错
if(binding.value && typeof binding.value === 'function'){
q.unbind(el, EVENT_SCROLL, binding.oldValue);
}else{
throw new Error('The scroll listener is not a function');
}
}
})
}
}
export default scrollPlugin;
// 输出
if(typeof module !== 'undefined' && typeof module.exports !== 'undefined'){
module.exports = scrollPlugin;
}else{
window.vScroll = scrollPlugin;
}
})()
该插件地址：https://github.com/wangpin34/vue-scroll
执行顺序：
- 通过 vue 指令，执行指令中的 bind，指令首次绑定元素时执行，只执行一次
- 该 bind 方法中有一个 q 实例执行自己（构造函数中定义）的 bind 方法，并传递了三个参数
- 构造函数的 bind 方法，给 listeners 和 funcs 分别添加对应的需要监听的元素和对应的方法，结构如下：
funcs = { scroll: [] }
listeners = [ { scroll: [] } ] - 查看 funcs 是否有对应事件的方法，如果没有，则执行 addListener
- 查看 element 是全局的元素如 document 之类的还是具体元素
- 获取元素的 scrollTop 和 scrollLeft
- 执行所有外部传入的方法，由于此时 funcs 的 scroll 属性还是空，所以这时候并没有执行任何方法
- 给元素新增监听事件，监听到事件的时候执行外部传入的方法。
- 将 funcs 的 scroll 赋值给 eventFuncs 并将外部方法传递到 eventFuncs 中。这样eventFuncs 就有对应的事件类型和事件触发时需要执行的方法。
- 触发事件，如 scroll 则会执行对应方法。
实测直接在元素上添加指令和对应的方法无效，原因是滚动时无法触发 scroll 事件。因为视图中只有 window 和 document 是固定不变的，其它元素相对于 window 是滚动的，换句话的意思就是滚动 window 内部元素时触发了 window 的 scroll 事件（表现为 window 出现了滚动条），但是其它元素相对于彼此之间是固定不变的，所以监听某一个元素的滚动是监听不到的。
解决方式很简单，只需要控制元素的高度不变，内部子元素超出父元素的高度，设置父元素 overflow: auto 或者 scroll 即可。