插件_js插件_jquery插件_插件写法_插件原理_插件封装-通过js原型封装插件
2017-01-01 20:23

  js插件,jquery插件是一个web前端经常用到的,大部分都是从网上找能用的插件,但是总是差强人意,也有一些朋友想要自己实现插件,封装一定功能的插件,来达到实现某种效果的目的,这个方法是很好的,但是对于插件怎么封装,怎么写,可能会有些迷糊。本文就为大家介绍一种典型易扩展的插件写法,网上的有名插件,以及大型的js库都是采用这种写法实现的-原型法实现。

   插件的好处:

   封装js插件可以把页面功能或效果,以及js功能实现模块化,可以方便调用,最大程度的增加了前端代码的复用性。web前端行业的浏览器版本众多,很多时候需要处理浏览器兼容性的问题。插件可以把浏览器差异性封装在内部处理,对外提供统一调用入口。这里jquery就是这一类功能的佼佼者。插件可以使我们的页面实现更简单,如果你攒齐了一套完善的常用效果插件集合,那么你在实现页面时就可以很快速的处理弹窗,日历,轮播,提示,加载,瀑布流,地区选择,菜单,页签,权限目录,消息滚动,进度条,拖动,上传文件,局部放大,延迟加载,编辑器,抽奖,输入验证,图表,滚动条,单页,下拉框等功能(这里列了不少,你可以依依收集,或自己实现),从而把主要精力集中在页面布局,css样式实现上。

   下面我们开始插件写法的介绍:

@1:闭包
(function(_){
@2:参数
 var defaults={
         width:"90%",
         height:"auto",
         head:true,
         shadow:true,
         init:function(){},
         close:function(){}
         shadowclose:true
     };
 @3:定义对象
 var mwin=function(option){
     return new mwin.fn.init(option);
 };
 @4:原型
 mwin.fn=mwin.prototype={
 @5:init定义
     init:function(option){
     this.config=this.extend(defaults,option);
     ...
     ...
     return this;
     },
     extend:function(){
     
     ....
     ...
     },
     show:function(){
     ...
     },
     close:function(){
     ...
     }
     
 } 
 @6:原型绑定
 mwin.fn.init.prototype=mwin.fn;
 
 @7:绑定到window对象上。
 _.mwin=mwin;   
 }(window));

  上面的代码就是插件写法的结构的最简化展示。我们1步步来分析,帮你明白和掌握js插件应该怎么写。

 @1:

   第一步定义一个自执行闭包:形式如下:

(function(){}(window));
 (function(){})(window);

这两种方式都可以实现自执行闭包,小括号扩起来的是闭包,里面或后面的小括号是自执行的功能,可以传参数。

@2:

   定义插件的接受的参数,这个参数的设置,有哪些参数决定了插件的适应性以及灵活性。

  就拿上面的弹窗插件,参数可以有,width-宽度设置,height-高度设置,shadow-是否有遮罩,shadowclose-点击遮罩是否可以关闭弹窗,init-弹窗打开时的初始化回调函数,close-弹窗关闭时的回调函数。

 你可以根据你的认识和掌握的知识,设置你认为能使插件适应性更强,更灵活的参数。如果一个插件接收设置的参数越合理,灵活,那么他就跟一个变形金刚似的,可以变成不同的形状。如果参数很烂的,那么他肯能就没有插件的优势了,可能为了能用这个插件,我需要调整页面的demo布局,那是一种多么苦恼的事情啊。参数的不同功能的插件有很大不同,但是其中回调参数是必须的。

   有完善的回调函数接口,那么用户就能很好的跟插件进行交互,也就能使插件满足更多的需求。有兴趣的可以下载swiper的源码看看他里面的参数设置,直接看API也行,非常灵活,回调函数接口也很完善,能适应很多场景。

@3:

  定义插件对象,对象就是一个方法,js中函数的调用中this指针指向的是调用者,除了new返回的是函数本身外。所以入口方法定义内部,我们采用new的方式返回其原型上的init方法的调用结果,也就是init方法本身。

@4:

在插件对象的prototype定义各种方法,以实现插件具有的功能。原型上定义方法的好处就是返回的对象可以调用,而入口对象不能直接调用,起到了方法保护的最用,有点private的意味。对象想可以通过原型链调用到原型上定义的方法。

@5:

 init方法的定义,插件对象通过new关键字调用的init方法,在init对象中要调用一个extend方法用来对参数进行替换。因为new返回的就是对象本身,所以其return this其实是不必要的。init调用后得到的对象,是不能访问插件对象原型上的方法的。

@6:

原型绑定,将插件对象的原型绑定到init函数的原型上,这样返回的init对象就可以通过原型链调用插件对象原型上的一系列方法了,包括其extend方法。所以可以通过this.extend来调用extend方法进行参数替换。

@7:

 将插件对象绑定到全局的window对象上。插件的定义和执行都在闭包中,所以他们的作用域也就是这个闭包函数,只有绑定到window对象上,作为window对象的一个属性,我们才可以通过window来调用次插件。


通过以上7步,我们就完成了插件结构的搭建,然后我们就可以给这个骨架添加血肉来实现插件的功能。这些个血肉绝大多数都是添加在插件对象的prototype原想上的。这样返回的插件对象可以调用原型上的方法作为API来使用,

比方上面的弹窗插件:

var dialog=mwin({....});
dialog.show();
dialog.close();

调用mwin插件返回一个dialog对象,我们可以调用其中的show方法让弹窗显示,还可以调用close来关闭弹窗。

总结:

插件结构就这么简单,看完文章相信你已经掌握了插件的写法了,快去写两个插件去试试其威力吧。终于也能自己写插件了,你已经是一个会写插件的前端了,成为了高级前端人才了。前面还写过一个单页效果的文章,里面使用的是jquery插件的基础写法,没有任何讲究的写法,但主要介绍的是单页实现的逻辑原理。有兴趣的话你可以点击这里过去看看,对比一下

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2869)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1