JavaScript插件化开发教程 （一）_javascript技巧

一，开篇分析

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”片段代码，如下：

style="margin-top:10px;
margin-bottom:30px;"
>8