jquery插件開發入門

i.爲GPU一體機項目開發的一款下拉樹插件

ii.記錄第一次開發jquery插件的過程

iii.wisdomTree的基本用法

---

jquery插件的開發模式

• 通常而言，有三種

  • $.extend()來擴展jQuery
  • $.fn 向jQuery添加新的方法
  • $.widget()應用jQuery UI的部件工廠方式建立

$.extend()

• $.extend()函數用於將一個或多個對象的內容合併到目標對象並返回目標對象（第一個對象）,有點寫輪眼的味道，下面試試它的用法
• $.extend() 基本用法，能夠看出$.extend()返回對象中的全部屬性（可理解爲屬性求和），且屬性值向後取值

對象屬性相同，屬性值不一樣

$.extend({name:'yh',num:9},{name:'ylone',num:22},{name:'ylone666',num:666})
?
{name: "ylone666", num: 666}

對象屬性不一樣，且目標對象<其餘對象

$.extend({name:'yh',num:9},{name:'ylone',num:22,cool:true},{name:'ylone666',num:666})
?
{name: "ylone666", num: 666, cool: true}

對象屬性不一樣，且目標對象>其餘對象

$.extend({name:'yh',num:9,cool:true},{name:'ylone',num:22},{name:'ylone666',num:666})
?
{name: "ylone666", num: 666, cool: true}

對象屬性各不相同

$.extend({name:'yh',cool:true},{num:22},{run:199})
?
{name: "yh", cool: true, num: 22, run: 199}

• $.extend() 特殊用法

將對象合併到jquery的全局對象中，能夠在全局對其進行調用

$.extend({test:function(){console.log("test")}})
?
$.test ? ƒ (){console.log("test")}
$.test() ? test

重載原型,選擇進行深度拷貝，第一個參數配置是否進行深度拷貝,能夠看出，深度拷貝對對象裏面的對象（即全部屬性及其子屬性）都進行了 $.extend() 操做

//深度拷貝
$.extend( true, {}, 
{ name: "yh", location: {cool: false,num:"1"} }, 
{ last: "ylone", location: {state: "well",county:"China", cool: true} } );
?
{name: "ylone", location: {cool:true,county:"China",num:"1",state:"well"}}
//非深度拷貝
$.extend( false, {}, 
{ name: "yh", location: {cool: false,num:"1"} }, 
{ name: "ylone", location: {state: "well",county:"China", cool: true} } );
?
{name: "ylone", location: {cool:true,county:"China",state:"well"}}

$.fn

• $.fn 是指jquery的命名空間，加上fn上的方法及屬性，會對jquery實例每個有效,能夠簡單理解爲在全局範圍寫函數方法

以下至關因而對jquery擴展了一個wsTree方法,那麼後面你的每個jquery實例均可以引用這個方法了.
那麼你能夠這樣子：$("#div").wsTree();

$.fn.wsTree = function(options) {
    var wisdomTree = new WISDOMTREE(this, options);
    return wisdomTree.init();
}

查看jquery源碼, jQuery.fn = jQuery.prototype = {...},向 $（全局對象）添加屬性和方法,經過 $(dom).jquery 便可看到jquery的版本號

jQuery.fn = jQuery.prototype = {
// The current version of jQuery being used
jquery: version,
constructor: jQuery,
// The default length of a jQuery object is 0
length: 0,
toArray: function() {
    return slice.call( this );
}...

面向對象

• 此次開發過程對於面向對象的三個基本特性（封裝，繼承，多態）有了更深的理解
• 使用面對對象的開發模式，方便管理，更重要的是不會污染外部的命名空間，實際上，咱們只須要在全局命名空間上聲明一個對象初始化的方法，而後將函數和變量寫在對象的內部，變成對象的方法和對象的屬性就行了

自調用匿名函數包裹代碼塊

• 一個自我調用的匿名函數在建立時自動,當即運行，而且沒有名字，所以被稱爲自調用匿名函數
• 基本格式：;(fucntion($, window, document, undefined){ code... })(jQuery, window, document)
• 做用原理：函數能夠造成一個做用域，域內的代碼是沒法被外界訪問的，若是咱們將本身的代碼放入一個函數中，那麼就不會污染全局命名空間，同時不會和別的代碼衝突
• 函數前的 ; 做用：自調用匿名函數與上一段代碼相連，若是上一段代碼沒有以分號結束，而咱們又沒有主動地加上分好，那麼會致使函數編譯出錯
• 將系統變量以參數形式傳遞到插件內部，能夠提升對系統變量的訪問速度，其中 undefined 的妙處在於：爲了獲得沒有被修改的 undefined，咱們並無傳遞這個參數，但卻在接收時接收了它，由於實際並無傳，因此undefined那個位置接收到的就是真實的undefined

wisdomTree開發過程

在全局命名空間添加聲明對象的方法，options 表示在使用插件，建立對象時的一些配置項, this表示選擇的元素

$.fn.wsTree = function(options) {
    var wisdomTree = new WISDOMTREE(this, options);
    return wisdomTree;
}

接着，在 WISDOMTREE 對象內添加一些默認屬性，$.extend({}, this.defaults, opt) 使用 {} 來保護默認配置項，將選擇元素與配置放在 this(它表明函數運行時，自動生成的一個內部對象，只能在函數內部使用 ) 中

var WISDOMTREE = function(ele, opt) {
    this.element = ele,
        this.defaults = {
            'data': '', //數據
            'buttonValue': 'WISDOMTREE', //標題欄提示
            'buttonStyle': { //標題欄樣式
                "width": "100px",
                "border": "1px solid #999",
                "height": "26px",
                "line-height": "26px",
                "text-align": "center"
            },
            'conStyle': { //下拉框樣式
                "width": "220px",
                "max-height": "600px",
                "border": "1px solid #222"
            },
            'treeHeight': null, //樹的高度
            'fontColor': '#000', //樹字體顏色
            'fontBackgrd': '#fff', //樹字體背景顏色
            'chkType': 'checkbox', //選擇方式，單選（radio）或者多選（checkbox）
            'chkRela': { "Y": "ps", "N": "ps" }, //父子關聯關係，
            'rootParam': ['name'], //父節點屬性
            'seedParam': ['name'], //子節點屬性
            'rootIcon': null, //父節點圖標樣式
            'seedIcon': null, //子節點圖標樣式
            'rootNoCheck': false, //頂級父節點是否能夠選中
            'ancientId': true, //是否獲取祖先元素的ID
            'onDownCallBack': null, //收起下拉樹的回調
            'isQuery': false, //是否顯示搜索框
            'queryOpen': false, //是否展現搜索框
            'queryCallBack': null, //搜索事件回調
            'queryParam': {} //搜索的參數
        },
        this.options = $.extend(true, {}, this.defaults, opt);
}

最後，向 WISDOMTREE 對象中添加一些方法，一套插件三連，帶走~

WISDOMTREE.prototype = {
    //初始化
    init: function() {
        var $SELMAIN = this.element.attr("id");
        ...
        },
    //獲取值
    get: function()
    ...
}

• 若是你喜歡，能夠對插件內容進行壓縮,畢竟js文件的大小會對性能產生影響

踩過的坑

• 要理解和注意全局命名空間，最初我本身在全局定義了 init() 方法，控制檯一直報錯

• 理解面向對象的三大特性，最初我在 $.fn.wstree 內返回的是 wisdomTree.init() 方法，這樣作的壞處在於：

  - 沒有充分利用面向對象的思惟
  
  - 污染了全局命名空間，由於要用到對象中封裝的方法，還須要 `$.fn` 一下
  
  - 當你要用對象內封裝的 `get()` 時，還須要將關鍵的配置項再傳一次，不然就會以默認配置項進行處理

• 對於 WISDOMTREE.prototype 裏面 this 對象至關於全局變量

基本用法

• 具體參考wisdomTree,裏面對插件配置及使用方法進行了詳細的介紹

行文參考

• jQuery插件開發精品教程，讓你的jQuery提高一個臺階
• Javascript Self Invoking Functions

?Merry X'mas all!