資訊專欄INFORMATION COLUMN
摘要：這里也提供了幾種不同模式的組件開發(fā)方式，你可以選擇一個適合你的使用輕量級基礎(chǔ)模式為初學(xué)者提供的一個簡單通用的基礎(chǔ)模板，包括基礎(chǔ)的默認(rèn)對象簡單的構(gòu)造函數(shù)默認(rèn)參數(shù)和傳遞參數(shù)的合并以及防止對象多次實(shí)例化的構(gòu)造函數(shù)的簡單封裝。
在初次進(jìn)行jquery插件開發(fā)時，我們往往無從下手，當(dāng)然我們可以按照jquery官方提供的格式進(jìn)行簡單的插件開發(fā)，但是很多時候往往不盡完美，一不小心，就造出一個很“爛”的插件：難以維護(hù)、難以擴(kuò)展、使用繁瑣、性能不佳...當(dāng)我們在不斷的實(shí)踐中，慢慢積累下來時，有些問題得到了有效的避免，但也帶來了新的問題：在眾多紛雜的jquery插件開發(fā)模式中，究竟哪一種模式才是最好的呢？
如果能提供一個模板，通過一定的約束和規(guī)范為開發(fā)者解決在jquery插件開發(fā)中的“迷惘”那該多好！在這里主要介紹下一個在實(shí)際開發(fā)中最常用的jquery模板插件——jQuery Boilerplate
jQuery Boilerplate不是jquery插件開發(fā)的銀彈，他并沒有提供各種模式的完美解決方案，當(dāng)然這也不是他所追求的目標(biāo)，他的目的只是提供一個最基礎(chǔ)的模板，對于初學(xué)者而言，你只需要在這個模板的基礎(chǔ)上做相應(yīng)的修改即可。來看一下jQuery Boilerplate提供的一個基礎(chǔ)模板（是不是覺得很熟悉呢？沒錯，bootstrap就是這個模式）：
// 這個分號的作用是防止和其他jquery插件合并時，別人不規(guī)范的jquery插件忘記使用分號結(jié)束
//影響到我們當(dāng)前的插件，導(dǎo)致無法運(yùn)行的問題。
;(function ( $, window, document, undefined ) {
// undefined作為形參的目的是因?yàn)樵趀s3中undefined是可以被修改的
//比如我們可以聲明var undefined = 123,這樣就影響到了undefined值的判斷，幸運(yùn)的是在es5中,undefined不能被修改了。
// window和document本身是全局變量，在這個地方作為形參的目的是因?yàn)閖s執(zhí)行是從里到外查找變量的（作用域），把它們作為局部變量傳進(jìn)來，就避免了去外層查找，提高了效率。
// 聲明默認(rèn)屬性對象
var pluginName = "defaultPluginName",
defaults = {
propertyName: "value"
};
// 構(gòu)造函數(shù)
function Plugin ( element, options ) {
this.element = element;
// 將默認(rèn)屬性對象和傳遞的參數(shù)對象合并到第一個空對象中
this.settings = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
// 為了避免和原型對象Plugin.prototype的沖突，這地方采用繼承原型對象的方法
$.extend(Plugin.prototype, {
init: function () {
// 初始化，由于繼承自Plugin原型，
// 你可以在這里直接使用this.element或者this.settings
console.log("xD");
},
yourOtherFunction: function () {
// some logic
}
});
// 對構(gòu)造函數(shù)的一個輕量級封裝，
// 防止產(chǎn)生多個實(shí)例
$.fn[ pluginName ] = function ( options ) {
this.each(function() {
if ( !$.data( this, "plugin_" + pluginName ) ) {
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
}
});
// 方便鏈?zhǔn)秸{(diào)用
return this;
};
})( jQuery, window, document );
上面的模板是一個輕量級的基礎(chǔ)模板，在開發(fā)中已經(jīng)能滿足我們大部分需求，例如：對象只實(shí)例化一次，鏈?zhǔn)秸{(diào)用、默認(rèn)參數(shù)、以及公有和私有方法的調(diào)用。來看一個示例：
http://jsfiddle.net/mirandaasm/wjPvF/3/
但是在實(shí)際開發(fā)中，尤其在有一定規(guī)模的組件開發(fā)中，我們還面臨著很多問題需要解決，比如命名空間的沖突、插件的可擴(kuò)展性以及公有方法如何方便的調(diào)用？當(dāng)然還有一部分是個人愛好的原因，我就喜歡使用其他模式的開發(fā)方式。這里jQuery Boilerplate也提供了幾種不同模式的組件開發(fā)方式，你可以選擇一個適合你的使用：
輕量級（基礎(chǔ)）模式 為初學(xué)者提供的一個簡單通用的基礎(chǔ)模板，包括基礎(chǔ)的默認(rèn)對象、簡單的構(gòu)造函數(shù)、默認(rèn)參數(shù)和傳遞參數(shù)的合并以及防止對象多次實(shí)例化的構(gòu)造函數(shù)的簡單封裝。
Widget factory 工廠模式，沒錯，jquery ui使用的典型模式，使用面向?qū)ο蟮姆绞綐?gòu)建復(fù)雜有狀態(tài)的組件，jquery ui中的組件大部分依賴于widget factory基礎(chǔ)組件，這個基礎(chǔ)模板提供了大部分的默認(rèn)方法，包括事件觸發(fā)方法。
Widget factory + RequireJS 這是個使用RequireJS對Widget factory進(jìn)行簡單封裝，使其支持AMD模塊化加載規(guī)范。
Namespaced pattern 命名空間模式，在和其他插件一起使用時，采用命名空間模式避免和其他插件的沖突問題。
更多...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87566.html
摘要：鏈?zhǔn)讲僮魇褂面準(zhǔn)讲僮鞔孀兞烤彺婧投啻尾僮髅慨?dāng)鏈長超過個鏈接或得到，因?yàn)榛顒尤蝿?wù)的復(fù)雜，使用適當(dāng)?shù)膿Q行和縮進(jìn)使代碼的可讀性。對于較長的鏈?zhǔn)讲僮骺梢园褜ο缶彺娴揭粋€變量里。 原文地址：http://lab.abhinayrathore.com/jquery-standards/ 第一次翻譯，有不對不妥的地方請拍磚。showImg(http://segmentfault.com/img/b...
摘要：如何構(gòu)建大型的前端項(xiàng)目搭建好項(xiàng)目的腳手架一般新開發(fā)一個項(xiàng)目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。組件化一般分為項(xiàng)目內(nèi)的組件化和項(xiàng)目外的組件化。 如何構(gòu)建大型的前端項(xiàng)目 1. 搭建好項(xiàng)目的腳手架 一般新開發(fā)一個項(xiàng)目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。一般腳手架都應(yīng)當(dāng)有以下的幾個功能： 自動化構(gòu)建代碼，比如打包、壓縮、上傳等功能 本地開發(fā)與調(diào)試，并有熱替換與...
摘要：如何構(gòu)建大型的前端項(xiàng)目搭建好項(xiàng)目的腳手架一般新開發(fā)一個項(xiàng)目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。組件化一般分為項(xiàng)目內(nèi)的組件化和項(xiàng)目外的組件化。 如何構(gòu)建大型的前端項(xiàng)目 1. 搭建好項(xiàng)目的腳手架 一般新開發(fā)一個項(xiàng)目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。一般腳手架都應(yīng)當(dāng)有以下的幾個功能： 自動化構(gòu)建代碼，比如打包、壓縮、上傳等功能 本地開發(fā)與調(diào)試，并有熱替換與...
閱讀 2148·2021-10-14 09:43
閱讀 2206·2019-08-30 15:55
閱讀 738·2019-08-30 14:23
閱讀 2030·2019-08-30 13:21
閱讀 1246·2019-08-30 12:50
閱讀 2210·2019-08-29 18:46
閱讀 2292·2019-08-29 17:28
閱讀 2375·2019-08-29 17:21
