Vue插件开发初体验——（懒加载）
前言
闲来无事，想自己开发一个简单的Vue懒加载插件，能力的提升我觉得是可以通过编写插件实现，研究了一下官网的Vue插件编写。马上自己独立开始编写懒加载插件。
一、写在前面
由于我在网上看了很多关于vue插件的实例，发现几乎都没有什么详细的教程，自己琢磨了半天也没有什么进步。都是写的比较精简。终于狠下心来，我们来自己憋一个插件出来吧w(ﾟДﾟ)w！这次我们通过一个常用插件——懒加载，来体验一下vue的插件开发。
萌新小白，前端开发入门一年不到，欢迎交流，给我提出批评意见谢谢！！
（原创来源我的博客 欢迎交流，GitHub项目地址：vue-simple-lazyload上面是所有源码，喜欢就点个star吧）
二、前期准备
2.1 选择合适的打包工具
合适的打包工具可以达到事半功倍的效果。一开始我的首选有两个，一个是webpack，一个是rollup。下面简单介绍一下我为什么选择了rollup。
众所周知，webpack是一个几乎囊括了所有静态资源，可以动态按需加载的一个包工具。而rollup也是一个模块打包器，可以把一个大块复杂的代码拆分成各个小模块。
深思熟虑后，我觉得webpack也可以打包，但是首先，有点“杀鸡焉用牛刀”的感觉。而我的这个懒加载插件则需要提供给别人使用，同时又要保证整个插件的“轻量性”（打包完大概6KB，而webpack则比较大），不喜欢像webpack那样在这插件上臃肿的表现。
对于非应用级的程序，我比较倾向于使用rollup.js。
2.2 确认项目结构
|——package.json |——config | |——rollup.config.js |——dist | |——bundle.js |——src | |——index.js | |——directive.js | |——mixin.js | |——imagebox.js | |——lazyload.js | |——utils | | |——utils.js | |——cores | |——eventlistener.js
config文件夹下放置rollup的配置文件。src为源文件夹，cores下面的文件夹为主要的模块，utils为工具类，主要是一些可以通用的模块方法。大概的结构就是这样。
2.3 设计思路
好的设计思路是一个插件的灵魂，我以自己不在道上的设计能力，借鉴了许多大神的思想！很不自信地设计了懒加载的插件项目结构，见下：
index.js：这个文件是入口总文件，主要为了暴露vue插件的install方法，供外部调用。
directive.js：这个文件是vue指令的文件，懒加载主要使用到的就是指令，我们这里定义v-simple-lazy指令逻辑写到这个文件内。
mixin.js：我们的核心骨来了，这个混合（mixin）定义在vue中解释得有点不清楚，可能是我理解能力有问题吧(ಥ_ಥ)。我们这里简单点说，混合就是vue的一些性质（比如双绑）按照它给的规则，跟你自己的定义，可以把你定义的一些变量，混入到vue实例中，也就是说，当做vue的$vm实例的变量来用，同时拥有了实例的一些特性。
上述都是关于vue插件的一些文件，下面我们来说我们自己定义的一些：
imagebox.js（类）：顾名思义，这个就是一个图像的盒子（box），用来存储你定义懒加载的图片的一些预加载的地址和一些方法。我们这里设计5个数组用来存放，分别是：item，itemAlready，itemPending，itemFailed，itemAll，分别作用是：用来存放当前需要加载的图片地址和元素，已经加载完的图片地址和元素，正在加载中的图片地址和元素，加载失败的图片地址和元素，所有绑定了指令的图片地址和元素。原理我们下面会说。
core的eventlistener.js（类）：这个文件很重要，主要存放当我们监听滚动条的时候，需要处理的一些逻辑。
lazyload.js：这个主要用来存放一些不变的量，比如加载图片的默认地址等等。
2.4 编写思路和原理
原理如下：
通过监听滚动条滚动，来不停地遍历上述imagebox里面的item数组（这个数组存放着需要懒加载的图片预加载地址），如果item里面有值，那么就进行图片的请求。进行请求的同时，我们把这个元素加入到itemPending里面去，如果加载完了就放到itemAlready里面，失败的放到failed里面，这就是基本的实现思路。
懒加载的实现过程，我们这里先精简化。具体思路如下：
=》把所有用指令绑定的元素添加数组初始化
=》监听滚动条滚动
=》判断元素是否进入可视范围
=》如果进入可视范围，进行src预加载（存入缓存数组）
=》对于pending的图片，进行正在加载赋值，对于finsh完的图片，加载预加载src里面的值，对于error的图片，进行错误图片src赋值
三、主要代码的编写
3.1 确认入口文件
Vue插件里面介绍是这样的
MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性
Vue.myGlobalMethod = function () { // 逻辑...
} // 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) { // 逻辑...
}
...
}) // 3. 注入组件
Vue.mixin({ created: function () { // 逻辑...
}
...
}) // 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) { // 逻辑...
}
}在外面暴露的方法就是install,使用的时候直接Vue.use("插件名称")直接可以使用。我们在install方法里面填写关于指令（directive）和混合（mixin），然后对外公开这个方法，option没填写的话就是默认空对象。
混合主要是为了混入vue内部属性，是除了以上全局方法后又可以在全局使用的一种方式。
3.2 先编写配置文件
工欲善其事必先利其器，我们先编写rollup的配置代码（这里做了精简，复杂的可以参照我的github程序）。
rollup.config.js
import buble from 'rollup-plugin-buble';import babel from 'rollup-plugin-babel';import resolve from 'rollup-plugin-node-resolve';import commonjs from 'rollup-plugin-commonjs';export default { input: 'src/index.js',//入口
output: { file: 'dist/bundle.js',//输出的出口
format: 'umd',//格式：相似的还有cjs，amd，iife等
}, moduleName: 'LazyLoad',//打包的模块名称，可以再Vue.use()方法使用
plugins:[
resolve(),
commonjs(),//支持commonJS
buble(),
babel({//关于ES6
exclude: 'node_modules/**' // 只编译我们的源代码
})
]
};package.json
{ "name": "lazyload", "version": "1.0.0", "description": "vue懒加载插件", "main": "index.js", "scripts": { "main": "rollup -c config/rollup.config.js", "test": "echo \"Error: no test specified\" && exit 1"
}, "author": "TangHy", "license": "MIT", "dependencies": { "path": "^0.12.7", "rollup": "^0.57.1"
}, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.4", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "rollup-plugin-babel": "^3.0.3", "rollup-plugin-buble": "^0.19.2", "rollup-plugin-commonjs": "^9.1.0", "rollup-plugin-node-resolve": "^3.3.0"
}
}注意其中的命令：
rollup -c config/rollup.config.js
后面的config/...是路径，这里注意一下，我们只需要运行
npm run main
就可以进行打包了。
3.3 编写主程序代码
3.3.1 directive.js
首先我们要先画好雏形，如何将eventlistener文件和directive联系在一起？
第一步首先肯定是引用eventlistener，同时因为它是一个类，我们这里只要指令每次inserted的时候，我们都新new一个对象进行初始化，把能传的值都传过去。可以看到下面的操作
import eventlistener from './cores/eventlistener'var listener = null;export default { inserted: function (el,binding, vnode, oldVnode) { var EventListener = new eventlistener(el,binding, vnode);//这里我们new一个新对象，把el(元素)，binding(绑定的值)，vnode(虚拟node)都传过去
listener = EventListener;
EventListener.init();//假设有一个init初始化函数
EventListener.startListen();//这里初始化完进行监听
}, update: function(el,{name,value,oldValue,expression}, vnode, oldVnode){
}, unbind: function(){
}
}其次我们要考虑在update钩子中，我们需要干什么？
有这样一种业务：当你一次性绑定完所有数据的时候，如果这个图片已经预加载完了，那么你再怎么改变这个指令绑定的值，都不能够实现刷新图片了，所以我们在update更新新的图片地址是有必要的。同时解绑的时候，取消绑定也是有必要的，那么继续往下写：
import eventlistener from './cores/eventlistener'var listener = null;export default { inserted: function (el,binding, vnode, oldVnode) { var EventListener = new eventlistener(el,binding, vnode);//这里我们new一个新对象，把el(元素)，binding(绑定的值)，vnode(虚拟node)都传过去
listener = EventListener;
EventListener.init();//假设有一个init初始化函数
EventListener.startListen();//这里初始化完进行监听
}, update: function(el,{name,value,oldValue,expression}, vnode, oldVnode){ if(value === oldValue){//没有变化就返回
return;
}
listener.update(el,value);//有变化就进行更新(假设有update这个方法)
}, unbind: function(){
listener.removeListen();//解绑移除监听
}
}先写生命周期中inserted的时候绑定监听。加入的时候new一个监听对象保存所有包括所有dom的。我们继续往下看。
3.4 核心代码
3.4.1 imagebox.js类
首先先把之前说到的几个数组都初始化了。那么作为图像盒子（imagebox）的对象实例，我们需要哪些方法或属性呢？
首先初始化的时候的add方法肯定要，需要判断一下是否有这个元素，没有的话就加入到item里面去。同时类似的还有addFailed，addPending等方法。
如果item中的元素加载完了,那么随之而来的就需要删除item中的元素,那么对应的remove方法也是必须要的,同时类似的还有removePending等方法。
export default class ImageBox { constructor() { this.eleAll = []; this.item = []; this.itemAlready = []; this.itemPending = []; this.itemFailed = [];
}
add(ele,src) {//insert插入的时候把所有的dom加入到数组中去初始化
const index = this.itemAlready.findIndex((_item)=>{ return _item.ele === ele;
}) if(index === -1){ this.item.push({ ele:ele, src:src
})
}
}
addPending(ele,src){ this._addPending(ele,src); this._remove(ele);
}
}上述是一个图片的box，用于存取页面加载时候，image图片对象的box存取。主要思路是分了三个数组，一个存储所有的图片，一个存储正在加载的图片，一个存储加载失败的图片，然后最重要的是！！！
把这个imagebox要混入到全局，使其可以当做全局变量在全局使用。
mixin.js
import imagebox from './imagebox'const mixin = {
data () { return { imagebox: new imagebox()//这里声明一个new对象，存在全局的变量中，混入vue内部，可以全局使用
}
}
}export default mixin;根据上述思路，完成下列代码：
（补充：这里有个update方法，思路是更新了后，进行所有的数组遍历，找到相对应的元素，然后进行src就是其值的更新）
export default class ImageBox { constructor() { this.eleAll = []; this.item = []; this.itemAlready = []; this.itemPending = []; this.itemFailed = [];
}
add(ele,src) { const index = this.itemAlready.findIndex((_item)=>{ return _item.ele === ele;
}) if(index === -1){ this.item.push({ ele:ele, src:src
})
}
}
update(ele,src){ let index = this.itemAlready.findIndex(item=>{ return item.ele === ele;
}); if(index != -1){ this.itemAlready.splice(index,1); this.add(ele,src); return;
}; let _index = this.itemFailed.findIndex(item=>{ return item.ele === ele;
}); if(_index !=-1){ this.itemFailed.splice(_index,1); this.add(ele,src); return;
};
}
addFailed(ele,src){ this._addFailed(ele,src); this._removeFromPending(ele);
}
addPending(ele,src){ this._addPending(ele,src); this._remove(ele);
}
addAlready(ele,src){ this._addAlready(ele,src); this._removeFromPending(ele);
}
_addAlready(ele,src) { const index = this.itemAlready.findIndex((_item)=>{ return _item.ele === ele;
}) if(index === -1){ this.itemAlready.push({ ele:ele, src:src
})
}
}
_addPending(ele,src) { const index = this.itemPending.findIndex((_item)=>{ return _item.ele === ele;
}) if(index === -1){ this.itemPending.push({ ele:ele, src:src
})
}
}
_addFailed(ele,src) { const index = this.itemFailed.findIndex((_item)=>{ return _item.ele === ele;
}) if(index === -1){ this.itemFailed.push({ ele:ele, src:src
})
}
}
_remove(ele) { const index = this.item.findIndex((_item)=>{ return _item.ele === ele;
}); if(index!=-1){ this.item.splice(index,1);
}
}
_removeFromPending(ele) { const index = this.itemPending.findIndex((_item)=>{ return _item.ele === ele;
}); if(index!=-1){ this.itemPending.splice(index,1);
}
}
}3.4.2 utils.js
const isSeen = function(item,imagebox){ var ele = item.ele; var src = item.src; //图片距离页面顶部的距离
var top = ele.getBoundingClientRect().top; //页面可视区域的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //top + 10 已经进入了可视区域10像素
if(top + 10 < windowHeight){ return true;
}else{ return false;
}
}export {
isSeen
};3.4.3 eventlistener.js
这个文件主要是监听的一些逻辑，那么肯定需要一些对象实例的属性。首先el元素肯定需要，binding，vnode，$vm肯定都先写进来。
其次imagebox肯定也需要，是图片的对象实例。
init的方法这里和imagebox中的add方法联系起来，init一个就加入imagebox中的item一个新的元素。
startListen方法是用于在监听后进行逻辑操作。
import {isSeen} from '../utils/utils'//引入工具类的里面的是否看得见元素这个方法判断export default class EventListener { constructor(el,binding,vnode) { this.el = el;//初始化各种需要的属性
this.binding = binding; this.vnode = vnode; this.imagebox = null; this.$vm = vnode.context; this.$lazyload = vnode.context.$lazyload//混合mixin进去的选项
}
init(){ if(!typeof this.binding.value === 'string'){ throw new Error("您的图片源不是String类型，请重试"); return;
} this.imagebox = this.vnode.context.imagebox; this.imagebox.add(this.el,this.binding.value);//每有一个item，就往box中增加一个新的元素
this.listenProcess();
}
startListen(){ const _self = this; document.addEventListener('scroll',(e)=>{
_self.listenProcess(e);//这里开始操作
})
}
}上面主要初始化了很多属性，包括vue的虚拟dom和各种包括el元素dom，binding指令传过来的值等等初始化。
此文件主要为了处理监听页面滚动的，监听是否图片进入到可视范围内，然后进行一系列下方的各种操作。
根据image.，image.方法进行图片预加载的逻辑操作,如果看得见这个图片,那么就进行图片的加载（同时加入到pending里面去），加载完进行判断。
下列是process的函数listenProcess：
const _self = this;if(this.imagebox.item.length == 0){ return;
};this.imagebox.item.forEach((item)=>{ if(isSeen(item)){//这里判断元素是否看得见
var image = new Image();//这里在赋值src前new一个image对象进行缓存，缓冲一下，可以做后续的加载或失败的函数处理
image.src = item.src;
_self._imageStyle(item);//改变item的样式
_self.imagebox.addPending(item.ele,item.src);//在对象imagebox中加入了正在pending请求的item(后续会介绍imagebox类)
image. = function(){//加载成功的处理
if(image.complete){
_self.imageOnload(item);
}
}
image. = function(){//加载失败的处理
_self.imageOnerror(item);
}
}
})还有其余的一些方法：
imageOnload(item){//图片加载完的操作
this._removeImageStyle(item.ele); this.imagebox.addAlready(item.ele,item.src);//添加到已经加载完的item数组里面
this._imageSet(item.ele,item.src)
}
imageOnerror(item){//出现错误的时候
this._removeImageStyle(item.ele); this.imagebox.addFailed(item.ele,item.src);//添加到出现错误item数组里面
this._imageSet(item.ele,this.$lazyload.options.errorUrl)//把配置中的错误图片url填入
}
_imageStyle(item){
item.ele.style.background = `url(${this.$lazyload.options.loadUrl}) no-repeat center`;
}
_removeImageStyle(ele){
ele.style.background = '';
}
_imageSet(ele,value){//关于图片赋值src的操作
ele.src = value;
}补充一个update方法：
update(ele,src){ console.log("更新了"); console.log(this.imagebox); this.imagebox.update(ele,src);//调用imagebox中的update方法
this.listenProcess();//再进行是否看得见的process操作}下面是所有的eventlistener.js代码：
import {isSeen} from '../utils/utils'export default class EventListener { constructor(el,binding,vnode) { this.el = el; this.binding = binding; this.vnode = vnode; this.imagebox = null; this.$vm = vnode.context; this.$lazyload = vnode.context.$lazyload
}
init(){ if(!typeof this.binding.value === 'string'){ throw new Error("您的图片源不是String类型，请重试"); return;
} this.imagebox = this.vnode.context.imagebox; this.imagebox.add(this.el,this.binding.value); this.listenProcess();
}
startListen(){ var listenProcess = this.listenProcess; document.addEventListener('scroll',listenProcess.bind(this),false);
}
removeListen(){ var listenProcess = this.listenProcess; document.removeEventListener('scroll',listenProcess.bind(this),false);
}
listenProcess(){ const _self = this; if(this.imagebox.item.length == 0){ return;
}; this.imagebox.item.forEach((item)=>{ if(isSeen(item)){ var image = new Image();
image.src = item.src;
_self._imageStyle(item);
_self.imagebox.addPending(item.ele,item.src);
image. = function(){ if(image.complete){
_self.imageOnload(item);
}
}
image. = function(){
_self.imageOnerror(item);
}
}
})
}
update(ele,src){ console.log("更新了"); console.log(this.imagebox); this.imagebox.update(ele,src); this.listenProcess();
}
imageOnload(item){ this._removeImageStyle(item.ele); this.imagebox.addAlready(item.ele,item.src); this._imageSet(item.ele,item.src)
}
imageOnerror(item){ this._removeImageStyle(item.ele); this.imagebox.addFailed(item.ele,item.src); this._imageSet(item.ele,this.$lazyload.options.errorUrl)
}
_imageStyle(item){
item.ele.style.background = `url(${this.$lazyload.options.loadUrl}) no-repeat center`;
}
_removeImageStyle(ele){
ele.style.background = '';
}
_imageSet(ele,value){
ele.src = value;
}
}所有的解释都已经写在上面的代码块里面了。
3.4.4 lazyload.js
最后把一些加载的图片默认配置或者失败图片地址完成下列代码：
const DEFAULT_ERROR_URL = './404.svg';const DEFAULT_LOAD_URL = './loading-spin.svg';export default class LazyLoad { constructor() { this.options = { loadUrl: DEFAULT_LOAD_URL, errorUrl: DEFAULT_ERROR_URL
};
}
register(options){ Object.assign(this.options, options);
}
}此类暂时用来存储各种配置和lazy的预定默认值，options里面存加载的时候的图片地址和错误加载的时候的图片地址。
默认值是最上面两个值，是不传数据默认的配置。
3.4.5 index.js
import directive from './directive';import mixin from './mixin';import lazyload from './lazyload';const install = ( Vue,options = {} )=>{ const lazy = new lazyload();
lazy.register(options);
Vue.prototype.$lazyload = lazy
Vue.mixin(mixin);
Vue.directive('simple-lazy',directive);
}export default {
install
};把上述所有的进行一个综合，放在这个入口文件进行向外暴露。
index就是整个项目的入口文件，至此我们完成了懒加载插件的基本代码编写。
四、打包成.js可以外部直接引用
打包后的代码：
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) :
(global.LazyLoad = factory());
}(this, (function () { 'use strict'; var isSeen = function isSeen(item, imagebox) { var ele = item.ele; var src = item.src; //图片距离页面顶部的距离
var top = ele.getBoundingClientRect().top; //页面可视区域的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //top + 10 已经进入了可视区域10像素
if (top + 10 < windowHeight) { return true;
} else { return false;
}
}; var EventListener = function EventListener(el, binding, vnode) { this.el = el; this.binding = binding; this.vnode = vnode; this.imagebox = null; this.$vm = vnode.context; this.$lazyload = vnode.context.$lazyload;
};
EventListener.prototype.init = function init() { this.imagebox = this.vnode.context.imagebox; this.imagebox.add(this.el, this.binding.value); this.listenProcess();
};
EventListener.prototype.startListen = function startListen() { var listenProcess = this.listenProcess; window.addEventListener('scroll', listenProcess.bind(this), false);
};
EventListener.prototype.removeListen = function removeListen() { var listenProcess = this.listenProcess; window.removeEventListener('scroll', listenProcess.bind(this), false);
};
EventListener.prototype.listenProcess = function listenProcess() { var _self = this; if (this.imagebox.item.length == 0) { return;
} this.imagebox.item.forEach(function (item) { if (isSeen(item)) { var image = new Image();
image.src = item.src;
_self._imageStyle(item);
_self.imagebox.addPending(item.ele, item.src);
image. = function () { if (image.complete) {
_self.imageOnload(item);
}
};
image. = function () {
_self.imageOnerror(item);
};
}
});
};
EventListener.prototype.update = function update(ele, src) { console.log("更新了"); console.log(this.imagebox); this.imagebox.update(ele, src); this.listenProcess();
};
EventListener.prototype.imageOnload = function imageOnload(item) { this._removeImageStyle(item.ele); this.imagebox.addAlready(item.ele, item.src); this._imageSet(item.ele, item.src);
};
EventListener.prototype.imageOnerror = function imageOnerror(item) { this._removeImageStyle(item.ele); this.imagebox.addFailed(item.ele, item.src); this._imageSet(item.ele, this.$lazyload.options.errorUrl);
};
EventListener.prototype._imageStyle = function _imageStyle(item) {
item.ele.style.background = "url(" + this.$lazyload.options.loadUrl + ") no-repeat center";
};
EventListener.prototype._removeImageStyle = function _removeImageStyle(ele) {
ele.style.background = '';
};
EventListener.prototype._imageSet = function _imageSet(ele, value) {
ele.src = value;
}; var listener = null; var directive = { inserted: function inserted(el, binding, vnode, oldVnode) { var EventListener$$1 = new EventListener(el, binding, vnode);
listener = EventListener$$1;
EventListener$$1.init();
EventListener$$1.startListen();
}, update: function update(el, ref, vnode, oldVnode) { var name = ref.name; var value = ref.value; var oldValue = ref.oldValue; var expression = ref.expression; if (value === oldValue) { return;
}
listener.update(el, value);
}, unbind: function unbind() {
listener.removeListen();
}
}; var ImageBox = function ImageBox() { this.eleAll = []; this.item = []; this.itemAlready = []; this.itemPending = []; this.itemFailed = [];
};
ImageBox.prototype.add = function add(ele, src) { var index = this.itemAlready.findIndex(function (_item) { return _item.ele === ele;
}); if (index === -1) { this.item.push({ ele: ele, src: src
});
}
};
ImageBox.prototype.update = function update(ele, src) { var index = this.itemAlready.findIndex(function (item) { return item.ele === ele;
}); if (index != -1) { this.itemAlready.splice(index, 1); this.add(ele, src); return;
} var _index = this.itemFailed.findIndex(function (item) { return item.ele === ele;
}); if (_index != -1) { this.itemFailed.splice(_index, 1); this.add(ele, src); return;
}};
ImageBox.prototype.addFailed = function addFailed(ele, src) { this._addFailed(ele, src); this._removeFromPending(ele);
};
ImageBox.prototype.addPending = function addPending(ele, src) { this._addPending(ele, src); this._remove(ele);
};
ImageBox.prototype.addAlready = function addAlready(ele, src) { this._addAlready(ele, src); this._removeFromPending(ele);
};
ImageBox.prototype._addAlready = function _addAlready(ele, src) { var index = this.itemAlready.findIndex(function (_item) { return _item.ele === ele;
}); if (index === -1) { this.itemAlready.push({ ele: ele, src: src
});
}
};
ImageBox.prototype._addPending = function _addPending(ele, src) { var index = this.itemPending.findIndex(function (_item) { return _item.ele === ele;
}); if (index === -1) { this.itemPending.push({ ele: ele, src: src
});
}
};
ImageBox.prototype._addFailed = function _addFailed(ele, src) { var index = this.itemFailed.findIndex(function (_item) { return _item.ele === ele;
}); if (index === -1) { this.itemFailed.push({ ele: ele, src: src
});
}
};
ImageBox.prototype._remove = function _remove(ele) { var index = this.item.findIndex(function (_item) { return _item.ele === ele;
}); if (index != -1) { this.item.splice(index, 1);
}
};
ImageBox.prototype._removeFromPending = function _removeFromPending(ele) { var index = this.itemPending.findIndex(function (_item) { return _item.ele === ele;
}); if (index != -1) { this.itemPending.splice(index, 1);
}
}; var mixin = { data: function data() { return { imagebox: new ImageBox()
};
}
}; var DEFAULT_ERROR_URL = './404.svg'; var DEFAULT_LOAD_URL = './loading-spin.svg'; var LazyLoad = function LazyLoad() { this.options = { loadUrl: DEFAULT_LOAD_URL, errorUrl: DEFAULT_ERROR_URL
};
};
LazyLoad.prototype.register = function register(options) { Object.assign(this.options, options);
}; var install = function install(Vue, options) { if (options === void 0) options = {}; var lazy = new LazyLoad();
lazy.register(options);
Vue.prototype.$lazyload = lazy;
Vue.mixin(mixin);
Vue.directive('simple-lazy', directive);
}; var index = { install: install
}; return index;
})));使用方法
Vue.use(LazyLoad,{ loadUrl:'./loading-spin.svg',//这里写你的加载时候的图片配置
errorUrl:'./404.svg'//错误加载的图片配置});元素中使用指令
<img v-simple-lazy="item" v-for="(item,$key) in imageArr">
imageArr测试数据
imageArr:[ 'http://covteam.u.qiniudn.com/test16.jpg?imageView2/2/format/webp', 'http://covteam.u.qiniudn.com/test14.jpg?imageView2/2/format/webp', 'http://covteam.u.qiniudn.com/test15.jpg?imageView2/2/format/webp', 'http://covteam.u.qiniudn.com/test17.jpg?imageView2/2/format/webp', 'http://hilongjw.github.io/vue-lazyload/dist/test9.jpg', 'http://hilongjw.github.io/vue-lazyload/dist/test10.jpg', 'http://hilongjw.github.io/vue-lazyload/dist/test14.jpg']
测试地址：戳我戳我
五、后记
其实这些代码的编写还是比较简单的，写完过后进行总结，你会发现，其中最难的是：
整个项目的结构，和代码模块之间的逻辑关系。
这个才是最难掌握的，如果涉及到大一点的项目，好一点的项目结构能让整个项目进度等等因素发生巨大的变化，提升巨大的效率。而写插件最难的就是在这。
如何有效地拆分代码？如何有效地进行项目结构的构造? 这才是整个插件编写的核心。
之前写过一个vue关于表单验证的插件，也是被项目结构搞得焦头烂额，这里把简单的懒加载基本代码做一个总结。写这个纯粹是个人兴趣。
所以我深知写插件的时候，它结构和模块化的重要性。而结构和模块化的优秀，会让你事半功倍
作者：唐益达
链接：https://www.jianshu.com/p/6f845f4c61e0
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦