如何寫一個js/jQuery函式庫（心得總結）

寫js/jQuery外掛程式有一些約定俗成的套路，根據這些套路依葫蘆畫瓢，程式碼的結構上就不會出現太大的問題了，特別推薦這個叫javascript-patterns 的專案,一些demo讓我收穫良多。

基本結構

普通的函式庫

#用最基本的匿名函數實作即可

(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的話,最方便的還是使用匿名函數，然後把window.jQuery當成參數傳進去

內部組織

我們以bootstrap-select v1.6.3,smooth-scroll這兩個專案來進行分析，

初始化

一般的Library都會提供一套defaults配置文件，然後使用的時候和用戶自定義的settings進行extend, smooth-scroll中的那種

settings = extend(defaults, options ||{})); 写法就相当赞，可以以一种十分简单的方式防止空指针异常。

剩下的就是根據業務劃分業務的funciton了，對於如何劃分，只有多加練習了。

另外，在註解裡像寫上 private 和 public 來區分對外介面和對內介面是個不錯的習慣。

i18n與設定管理

i18n是吧那些國際話的字元全都放到defautls，比較優雅的做法是defaults定義一個對象，這樣國際化檔案

便能和原有的函式庫檔案進行分離，具體參考bootstrap-datapicker

#THE END

以上是如何寫一個js/jQuery函式庫（心得總結）的詳細內容。更多資訊請關注PHP中文網其他相關文章！