2.最基本的jQuery外掛編寫方式

kyo4311發表於2015-07-07
jQuery

開始寫外掛，當然是要先建立一個外掛了，而我使用了最簡單的一種方式來建立，程式碼如下：

;
(function ($) {
    $.fn.quantity = function (opt) {

    };
}(jQuery));

我給外掛取的名稱是quantity，那麼使用的時候就會變成這樣子：

$('#id').quantity({});

$.fn是什麼一個東西？

$.fn是指jquery的名稱空間，可以想像成這樣子：

var a = {}; //名稱空間
var $ = {}; //名稱空間
$.fn = {};
$.fn.quantity = function () {
};
a.quantity = function () {
};

當然我們把他想像成一個名稱空間的時候，這不是真的，只是來幫助理解。那麼在名稱空間上面增加一個屬性，而這個屬性的值是一個function，就比較好理解了。

為什麼可以$.fn.pluginName這樣子用呢？

來看jQuery的原始碼：

jQuery.fn = jQuery.prototype = {
　　　init: function( selector, context ) {//....　
};

這樣子很容易看出來jQuery是一個建構函式，我們增加外掛就是在他的原型連結，多加一點東西而已。看到原始碼，那麼我們是不是還可以像這樣子寫呢？

;
(function ($) {
    $.prototype.quantity = function (opt) {
        console.log(1);
    };
}(jQuery));

$('#id').quantity({});

為什麼要把jQuery當引數傳進去

這樣子可以保證在函式內部，確定肯定一定是jQuery。如果不是這樣子，萬一別的js也是$作為變數名了，那就玩不下去了。

var $ = 1;
(function () {
    //TypeError: Cannot set property 'quantity' of undefined
    $.prototype.quantity = function (opt) {
        console.log(1);
    };
}());

$('#id').quantity({});

最前面為什麼要加一個分號呢？

還是為了防止意想不到的情況。這個情況是這樣子的。

//不知道是哪個傢伙寫的
var foo = function(){
    alert('foo');
};
foo

//後面寫的一個外掛
;(function ($) {
    $.prototype.quantity = function (opt) {
        alert('外掛！')
    };
}(jQuery));

$('#id').quantity({});

如果掉了那個分號，那麼foo這個函式就在意想不到的情況下執行了，如果專案中出現這樣子的情況，排查問題也是很困難的，因此還是乖乖的打上一個分號吧！

opt是幹嘛用的？

opt實際是options這個單詞的綜寫，在這裡，他的作用就是傳引數，這個引數通過物件的形式傳進去。

推薦用物件傳參肯定有他的好處的。

1.傳參的時候和位置無關。
2.其中某個引數想傳就傳，不想傳就不傳。
3.傳多個引數的時候優勢更大。 

function foo1(name, age, sex, addr, qq, qq) {
    console.log('name:'+ name);
    console.log('age:'+ age);
    console.log('sex:'+ sex);
    console.log('addr:'+ addr);
    console.log('qq:'+ qq);
    console.log('mail:'+ qq);
}

function foo2(opt) {
    console.log('name:' + opt.name);
    console.log('age:') + opt.age;
    console.log('sex:') + opt.sex;
    console.log('addr:' + opt.addr);
    console.log('qq:' + opt.qq);
    console.log('mail:' + opt.mail);
}

foo1('kyo', 18, '男', '藍天下西湖邊斷橋上', 12345, '12345@abc.com');

foo2({
    name: 'kyo',
    age: 18,
    sex: '男',
    addr: '藍天下西湖邊斷橋上',
    qq: 12345,
    mail: '12345@abc.com'
});

我們發現，如果foo1這個函式，當我不想傳sex的時候，是不是覺得很無力，一定在那個位置加上一個表示式呢？

foo1('kyo', 18,  '藍天下西湖邊斷橋上', 12345, '12345@abc.com');

這就是一個坑，你不想佔都不行，不然函式體內部的變數名就對應不上了。

相關文章