大熊君JavaScript插件化开发------（第一季）

一，开篇分析

Hi，你们！大熊君又来了，今天这系列文章主要是说说如何开发基于“JavaScript”的插件式开发，我想不少人对”插件“这个词并不陌生，

有的人可能叫“组件”或“部件”，这不重要，关键是看如何设计，如何作一个全方位的考量，这是本文的重点阐述的概念。我想你们对

“jQuery插件的方式”有必定的了解，咱们结合这个话题一块儿讨论一下，最终给出相关的实现方案，来不断提升本身的谁能力。

　   　　　　　　　

二，进入插件正题

通常来讲，jQuery插件的开发分为两种：一种是挂在jQuery命名空间下的全局函数，也可称为静态方法。

另外一种是jQuery对象级别的方法，即挂在jQuery原型下的方法，这样经过选择器获取的jQuery对象实例也能共享该方法。

 

（1），类级别的插件开发

类级别的插件开发最直接的理解就是给"jQuery"类添加类方法，能够理解为添加静态方法。典型的例子就是"$.ajax()"这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发能够采用以下几种形式进行扩展：

1.1添加一个全局函数，咱们只需以下定义，看代码:　

$.hello = function(){
    alert("Hello,大熊君！") ;
} ;

 

1.2添加多个全局函数，可采用以下定义：

1 $.extend({
2     hello : function(name){
3         // put your code here
4     } ,
5     world : function(){
6         // put your code here
7     }
8 }) ;

说明：”$.extend(target, [object1], [objectN])“（该方法主要用于合并两个或更多对象的内容(属性)到第一个对象，并返回合并后的第一对象。

若是该方法只有一个参数target，则该参数将扩展jQuery的命名空间，即做为静态方法挂在jQuery全局对象下）。

 

（2），对象级别的插件开发

　对象级别的插件开发须要以下的两种形式：

　2.1经过“$.fn.extend()”为原型动态挂载相关的属性。

1 (function($){   
2     $.fn.extend({   
3         pluginName : function(opts){   
4             // put your code here
5         }   
6     }) ;   
7 })(jQuery) ;   

 

　2.2直接添加动态属性到原型链上。

1 (function($) {     
2     $.fn.pluginName = function(){   
3         // put your code here  
4     } ;   
5 })(jQuery) ;    

　　说明一下：两者是等价的，对于一个jQuery插件，一个基本的函数就能够很好地工做，可是对于复杂一点的插件就须要提供各类各样的方法和私有函数。

你可能会使用不一样的命名空间去为你的插件提供各类方法，可是添加过多的命名空间反而会使代码变得混乱，健壮性降低。因此最好的解决办法是适当地定义私有函数和方法。

因此咱们经过自执行函数与闭包的结合实现模拟的私有插件单元，就像咱们上面的实例中同样。

 

（三），下面给一个简单的例子看看实现的过程：

　　（1），“html”片断代码，以下：

　　

1 <div id="bb" style="width:220px;border:1px solid #ccc;">
2     <span></span>
3     <div 
4         style="margin-top:10px;
5         margin-bottom:30px;"
6     >8     </div>
9 </div>            

 

　　（2），“data.json”定义以下：

　　{

　　　　"text" : "你好，大熊君{{bb}} ！" ;
　　}

　　

　　（3），"bb.js"代码以下：

　　

 1 $(function(){
 2     $("#bb").bigbear() ;
 3 }) ;
 4 (function($){
 5     $.fn.bigbear = function(opts){
 6         opts = $.extend({},$.fn.bigbear.defaults,opts) ;
 7         return this.each(function(){
 8             var elem = $(this) ;
 9             elem.find("span").text(opts["title"]) ;
10             $.get(opts["url"],function(data){
11                 elem.find("div").text(data["text"]) ;
12             }) ;
13         }) ;
14     } ;
15     $.fn.bigbear.defaults = {
16         title : "这是一个简单的测试" ,
17         url : "data.json"
18     } ;
19 })(jQuery) ;

　　运行效果：

　　

　　小结一下：

　　（1）“$.fn.bigbear.defaults”提供插件的默认参数选项一个扩展性良好的插件应该是可让使用者根据需求自定义参数选项，并控制插件的行为，因此提供恢复默认选项是颇有必要的。你能够经过jQuery的extend方法来设置这些选项。

　　（2），“return this.each(){...}”遍历多个元素并返回jQuery使用Sizzle选择器引擎，Sizzle能够为你的函数提供多元素操做（例如对全部类名相同的元素）。这是jQuery几个优秀的特性之一，在开发插件过程当中即便你不许备为你的插件提供多元素支持，但为这作准备仍然是一个很好的方式。另外，jQuery有一个很好的特色就是能够进行方法级联，也可称为链式调用，因此咱们不该该破坏这个特性，始终在方法中返回一个元素。

 

（四），最后总结

　　（1），jQuery为开发插件提拱了两个方法，分别是：jQuery.fn.extend(object);  给jQuery对象添加方法。
jQuery.extend(object);  为扩展jQuery类自己.为类添加新的方法。

 

　　（2），把所有代码放在闭包(一个即时执行函数)里此时闭包至关于一个私有做用域，外部没法访问到内部的信息，而且不会存在全局变量的污染状况。官方建立开发规范的解释是：a) 避免全局依赖；b) 避免第三方破坏；c) 兼容jQuery操做符'$'和'jQuery '。

 

　　（3），提供插件的默认参数选项一个扩展性良好的插件应该是可让使用者根据需求自定义参数选项，并控制插件的行为，因此提供恢复默认选项是颇有必要的。你能够经过jQuery的extend方法来设置这些选项

 

　　（4），遍历多个元素并返回jQuery使用Sizzle选择器引擎，Sizzle能够为你的函数提供多元素操做（例如对全部类名相同的元素）。这是jQuery几个优秀的特性之一，在开发插件过程当中即便你不许备为你的插件提供多元素支持，但为这作准备仍然是一个很好的实践。另外，jQuery有一个很好的特色就是能够进行方法级联，也可称为链式调用，因此咱们不该该破坏这个特性，始终在方法中返回一个元素。

 

　　（5），一次性代码放在主循环之外这一条很重要，可是经常被忽略。简单的讲，若是你有一段代码是一堆默认值，只须要被实例化一次，而不是每次调用你插件功能的时候都须要实例化，你应该把这段代码放在插件方法的外面。

 

　　（6），你们学习完思考一下，若是项目技术选型换了这些插件又是强依赖“jQuery”机制，咱们之前写的插件将会不能用（假设不用jQuery的状况），如何作重构那？

明天的文章就会说一下这个问题，而且将会重构插件的关键逻辑，敬请期待。。。

 

　　　　　　　　　　　　

 

　　　　　　　　　　　　　　　　 哈哈哈，本篇结束，未完待续，但愿和你们多多交流够沟通，共同进步。。。。。。呼呼呼……(*^__^*)