編寫js/jQuery插件有一些約定俗成的套路枪萄,根據(jù)這些套路依葫蘆畫瓢脏答,代碼的結(jié)構(gòu)上就不會出現(xiàn)太大的問題了,特別推薦這個叫 javascript-patterns 的項目,一些demo讓我收獲良多局嘁。
基本結(jié)構(gòu)
普通的庫
用最基本的匿名函數(shù)實現(xiàn)即可
(function(){
var root = this;
root.YOURLIB = function(){
FUNC1 : function(){},
FUNC2 : function(){}
}
}())
也可以使用call
而不是使用閉包涯肩,此時兩種寫法等效贺奠,undersocre.js用的是call寫法
(function(){
var root = this;
root.YOURLIB = function(){
FUNC1 : function(){},
FUNC2 : function(){}
}
}.call(this))
jQuery 插件###
通過一下方法可以使的插件可以 跨CMD/AMD/Browser
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// CommonJS
factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
$.fn.render = function() {}
$.render2 = function() {}
}))
當然,如果不考慮Seajs,RequireJS的話,最方便的還是使用匿名函數(shù)竣稽,然后把window.jQuery當成參數(shù)傳進去
內(nèi)部組織
我們以 bootstrap-select v1.6.3,smooth-scroll這倆項目來進行分析撩穿,
初始化###
一般的Library都會提供一套defaults配置文件试吁,然后使用的時候和用戶自定義的settings進行extend, smooth-scroll中的那種
settings = extend(defaults, options ||{}));
寫法就相當贊棺棵,可以以一種十分簡單的方式防止空指針異常。
剩下的就是根據(jù)業(yè)務劃分業(yè)務的funciton了熄捍,對于如何劃分烛恤,只有多加練習了。
另外余耽,在注釋里像寫上 private 和 public 來區(qū)分對外接口和對內(nèi)接口是個不錯的習慣缚柏。
i18n與配置管理###
i18n是吧那些國際話的字符全都放到defautls,比較優(yōu)雅的做法是defaults定義一個對象碟贾,這樣國際化文件
便能和原有的庫文件進行分離币喧,具體參考 bootstrap-datapicker
THE END