開發自定義Jquery外掛

這幾年隨著各種前端框架的出現，操作DOM被更多的封裝起來，有些專案你甚至可以完全拋開jquery進行開發，但不可否認的是，jquery多年來作為前端工程師的必備基本功夫有其不可替代的作用，即使你不用jquery，你也應該掌握他:

• 大多數專案依然在採用jquery，雖然不作為框架，但作為操作DOM的庫檔案用；
• 編寫小網站依然是不錯的選擇，尤其是數不清的優秀外掛能為你所用，他能單獨為你撐起一片天；
• jquery的程式設計思想，是理解javascript的很好的路子；

Begin（三種方式）

1. 構建js閉包

;(function($,window,document,undefined){

    'use strict';

    $('#app').html('hello world');

})(jQuery,window,document)
 

注意事項：

• 1.1' ; '的使用，放只前一個函式末尾沒';',導致js解析錯誤；

    var func = function{}
  
    (function($,window,document){
  
        'use strict';
  
        $('#app').html('hello world');
  
    })(jQuery,window,document)

控制檯報錯Uncaught SyntaxError: Unexpected token {

• 1.2 jquery,window,document放入區域性作用域中，據說可以加快速度，未測試出來，聊勝於無嘛，加上得了，undefined是為了...還沒弄清，應該是變數汙染。

• 1.3 'use strict';採用嚴格模式，編寫更規範化，將來向ES6容易過渡。

2. jquery外掛模式（方式一）

;(function($,window,document){

    'use strict';

    $.fn.myPlugin = function(){
        return($(this).html('hello world'))
    }

})(jQuery,window,document)

//html code

<div id="app"></div>

...

<script type="text/javascript">
    $('#app').myPlugin();
</script>
 

執行後DIV中會加入'hello world'.

jquery.fn 即 jquery.prototype

3. 對選中的元素遍歷，jquery選擇器的牛逼之處

$.fn.myPlugin = function(){

    return this.each(function(){
        var $this = $(this);
        $this.html('hello world');
    })

}

//html code

<div class="app"></div>
<div class="app"></div>

<script type="text/javascript">
    $('.app').myPlugin();
</script>

4. 預設屬性/方法保護

var defaults = {
    width:100,
    height:100
}

var defaultsFunc = {
    getValue:function(ele,param){},
    setValue:function(ele,param){}
}

var methods = {
    'init':function(option){
        option = $.extend({},defaults,option);
        return this.each(function(){
            var $this = $(this);
            $this.html('hello world');
        })
    },
    'destroy':function(){}
}

$.fn.myPlugin = function(){
    return methods.init.apply(this);
}

通過apply隱藏內部結構，通過$.extend來合併預設配置和使用者自定義配置，避免多個例項對預設屬性造成變化

5.對使用者輸入進行判斷

使用者輸入的可能為多種型別,其他輸入預設為非法輸入，丟擲異常：

$(ele).myPlugin(); //按照預設配置初始化
$(ele).myPlugin(string); //呼叫方法
$(ele).myPlugin(object); //按照自定義配置初始化


$.fn.myPlugin = function(){
    var args = arguments[0];
    if(!args){
        return methods.init.apply(this,arguments);
    }else{
        if(typeof(args) === 'object'){
            return methods.init.apply(this,arguments);
        }else if(typeof(args) === 'string'){
            if(methods[args]){
                return methods[args].apply(this,arguments);
            }else{
                throw new Error(args + 'is not a function of this plugin');
            }
        }else{
            throw new Error('unvaliabled param');
        }
    }
}

至此，一個外掛的基本功能就具備了，接下來看看外掛的其他知識.

6. 對jquery的方法進行拓展

//公有方法，外部能進行修改，可用於對外掛進行拓展

$.fn.sayHello = function(){
    return {self:'self'}
}

or

$.fn.extend({
    sayHello: function(){
        return {self:'self'};
    }
})

//私有方法，只有外掛內部進行呼叫

function func(){...}

or

var func = function(){...}

7.定義外掛的另一種方式（方式二）

//預設引數
var defaluts = {
    foreground: 'red',
    background: 'yellow'
};

$.fn.extend({
    "highLight": function (options) {
        //檢測使用者傳進來的引數是否合法
        if (!isValid(options))
            return this;
        var opts = $.extend({}, defaluts, options); 
        return this.each(function () {  
            var $this = $(this); 
        });

    }
});

8.還有一種類似方式（方式三）

//預設引數
var defaluts = {};

var highLight = function(ele,options){
    $(ele).html(options.value);
}

$.fn.selfHighLight = function(args){
    return this.each(function(){
        var hL = new highLight(this,args);
    })
}

9.通過$.widget()應用jQuery UI部件工場方法建立（很少用到jquery UI,沒有嘗試過，日後用到再實驗吧）