比如我现在有一个需求，给定一个字符串，给方法传递一个参数为数字类型来确定当前字符串重复次数，例如：

 

　　'abc'.repeatStringNumTimes（3）？//?abcabcabc

 

　　如果按照一般的思维就是我们把这个方法绑定到String的原型上，如下代码：

 

　　String.prototype.repeatStringNumTimes?=?String.prototype.repeatStringNumTimes?||?function（times）？{var?str?=?'';for（var?i?=?0;?i?<?times;?i++）？{

 

　　str?+=?this;

 

　　}return?str;

 

　　}

 

　　根据《jQuery高级编程》的描述，jQuery插件开发方式主要有三种：

 

　　通过$.extend（）来扩展jQuery

 

　　通过$.fn 向jQuery添加新的方法

 

　　通过$.widget（）应用jQuery UI的部件工厂方式创建

 

　　通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等，非常贴心，这里不细说。

 

　　而第一种方式又太简单，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。所以我们调用通过。extend（）添加的函数时直接通过。extend（）添加的函数时直接通过符号调用（$.myfunction（））而不需要选中DOM元素（$（'#example'）。myfunction（））。请看下面的例子。

 

　　$.extend（{

 

　　sayHello:?function（name）？{

 

　　console.log（'Hello,'?+?（name?name?:?'Dude'）？+?'!'）;

 

　　}

 

　　}）

 

　　$.sayHello（）;?//调用$.sayHello（'Wayou'）;?//带参调用

 

　　看一个jquery封装的面向对象的插件开发代码：

 

　　//定义Beautifier的构造函数var?Beautifier?=?function（ele,?opt）？{this.$element?=?ele,this.defaults?=?{'color':?'red','fontSize':?'12px','textDecoration':'none'

 

　　},this.options?=?$.extend（{},?this.defaults,?opt）

 

　　}//定义Beautifier的方法Beautifier.prototype?=?{

 

　　beautify:?function（）？{return?this.$element.css（{'color':?this.options.color,'fontSize':?this.options.fontSize,'textDecoration':?this.options.textDecoration

 

　　}）;

 

　　}

 

　　}//在插件中使用Beautifier对象$.fn.myPlugin?=?function（options）？{//创建Beautifier的实体

 

　　var?beautifier?=?new?Beautifier（this,?options）;//调用其方法

 

　　return?beautifier.beautify（）;

 

　　}

 

　　调用方式：

 

　　$（function（）？{

 

　　$（'a'）。myPlugin（{'color':?'#2C9929','fontSize':?'20px'

 

　　}）;

 

　　}）