JS常見(jiàn)的API擴(kuò)展形式有哪些

本文小編為大家詳細(xì)介紹“JS常見(jiàn)的API擴(kuò)展形式有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“JS常見(jiàn)的API擴(kuò)展形式有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

　　比如我現(xiàn)在有一個(gè)需求，給定一個(gè)字符串，給方法傳遞一個(gè)參數(shù)為數(shù)字類(lèi)型來(lái)確定當(dāng)前字符串重復(fù)次數(shù)，例如：

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

　　如果按照一般的思維就是我們把這個(gè)方法綁定到String的原型上，如下代碼：

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

　　str?+=?this;

　　}return?str;

　　}

　　jQuery插件開(kāi)發(fā)方式主要有三種：

　　通過(guò)$.extend（）來(lái)擴(kuò)展jQuery

　　通過(guò)$.fn 向jQuery添加新的方法

　　通過(guò)$.widget（）應(yīng)用jQuery UI的部件工廠方式創(chuàng)建

　　通常我們使用第二種方法來(lái)進(jìn)行簡(jiǎn)單插件開(kāi)發(fā)，說(shuō)簡(jiǎn)單是相對(duì)于第三種方式。第三種方式是用來(lái)開(kāi)發(fā)更高級(jí)jQuery部件的，該模式開(kāi)發(fā)出來(lái)的部件帶有很多jQuery內(nèi)建的特性，比如插件的狀態(tài)信息自動(dòng)保存，各種關(guān)于插件的常用方法等，非常貼心，這里不細(xì)說(shuō)。

　　而第一種方式又太簡(jiǎn)單，僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個(gè)靜態(tài)方法而以。所以我們調(diào)用通過(guò)。extend（）添加的函數(shù)時(shí)直接通過(guò)。extend（）添加的函數(shù)時(shí)直接通過(guò)符號(hào)調(diào)用（$.myfunction（））而不需要選中DOM元素（$（'#example'）。myfunction（））。請(qǐng)看下面的例子。

　　$.extend（{

　　sayHello:?function（name）？{

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

　　}

　　}）

　　$.sayHello（）;?//調(diào)用$.sayHello（'Wayou'）;?//帶參調(diào)用

　　看一個(gè)jquery封裝的面向?qū)ο蟮牟寮_(kāi)發(fā)代碼：

　　//定義Beautifier的構(gòu)造函數(shù)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對(duì)象$.fn.myPlugin?=?function（options）？{//創(chuàng)建Beautifier的實(shí)體

　　var?beautifier?=?new?Beautifier（this,?options）;//調(diào)用其方法

　　return?beautifier.beautify（）;

　　}

　　調(diào)用方式：

　　$（function（）？{

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

　　}）;

　　}）

讀到這里，這篇“JS常見(jiàn)的API擴(kuò)展形式有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。