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>
<span></span>
<div
>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) ;
运行效果：
小结一下：