JavaScript插件化开发教程（一）

2019-11-20 13:18:58

字体：大中小

来源：转载

供稿：网友

一，开篇分析

Hi，大家！今天这系列文章主要是说说如何开发基于“JavaScript”的插件式开发，我想很多人对”插件“这个词并不陌生，

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

“jQuery插件的方式”有一定的了解，我们结合这个话题一起讨论一下，最终给出相关的实现方案，来不断提高自己的谁能力。

二，进入插件正题

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

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

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

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

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

复制代码代码如下:

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

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

复制代码代码如下:

$.extend({
    hello : function(name){
        // put your code here
    } ,
    world : function(){
        // put your code here
    }
}) ;

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

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

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

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

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

复制代码代码如下:

(function($){   
    $.fn.extend({   
        pluginName : function(opts){   
            // put your code here
        }   
    }) ;   
})(jQuery) ;   

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

复制代码代码如下:

 (function($) {     
     $.fn.pluginName = function(){   
         // put your code here  
     } ;   
 })(jQuery) ;  

　　说明一下：二者是等价的，对于一个jQuery插件，一个基本的函数就可以很好地工作，但是对于复杂一点的插件就需要提供各种各样的方法和私有函数。

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

所以我们通过自执行函数与闭包的结合实现模拟的私有插件单元，就像我们上面的实例中一样。

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

　　（1），“html”片段代码，如下：

复制代码代码如下:

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

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

复制代码代码如下:

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

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

复制代码代码如下:

$(function(){
    $("#bb").bigbear() ;
}) ;
(function($){
    $.fn.bigbear = function(opts){
        opts = $.extend({},$.fn.bigbear.defaults,opts) ;
        return this.each(function(){
            var elem = $(this) ;
            elem.find("span").text(opts["title"]) ;
            $.get(opts["url"],function(data){
                elem.find("div").text(data["text"]) ;
            }) ;
        }) ;
    } ;
    $.fn.bigbear.defaults = {
        title : "这是一个简单的测试" ,
        url : "data.json"
    } ;
})(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的情况），如何做重构那？

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

上一篇：js获取域名的方法

下一篇：js的toLowerCase方法用法实例