1：這種方式主要應用在不需要調用dom元素和沒有鏈式結構：

        $.extend({
        			sayhello:function () {
				console.log(‘hello‘)
			},
			dosomething:function () {
				console.log(‘dosomething‘)
			}
		});
		$.sayhello()

2：鏈式結構，使用場景最多的方式

	$.fn.myPlugin = function() { // 非鏈式
        //在這裏面,this指的是用jQuery選中的元素
        //example :$(‘a‘),則this=$(‘a‘)
        this.css(‘color‘, ‘red‘);
    }

    $.fn.myPlugin = function() {
      //在這裏面,this指的是用jQuery選中的元素
      this.css(‘color‘, ‘red‘);
      return this.each(function() { //用return 返回鏈式結構
          //對每個元素進行操作
          $(this).append(‘ ‘ + $(this).attr(‘href‘));
      }))
  }
  
		$.fn.myPlugin = function(options) { 
            var defaults = {
                ‘color‘: ‘red‘,
                ‘fontSize‘: ‘12px‘
            };
            var settings = $.extend(defaults, options); // 傳參，但是這種情況改變了defaults的參數  var settings = $.extend({},defaults, options); // 是否該創建一個空對象？事實證明並不會影響defaults

            return this.css({
                ‘color‘: settings.color,
                ‘fontSize‘: settings.fontSize
            });
        }

3：面向對象的插件開發 參考文章

好的做法是我們在代碼開頭加一個分號，這在任何時候都是一個好的習慣。

同時，將系統變量以參數形式傳遞到插件內部也是個不錯的實踐。

當我們這樣做之後，window等系統變量在插件內部就有了一個局部的引用，可以提高訪問速度，會有些許性能的提升

最後我們得到一個非常安全結構良好的代碼：

;(function($,window,document,undefined){
    //我們的代碼。。
    //blah blah blah...
})(jQuery,window,document);

而至於這個undefined，稍微有意思一點，為了得到沒有被修改的undefined，我們並沒有傳遞這個參數，但卻在接收時接收了它，因為實際並沒有傳，所以‘undefined’那個位置接收到的就是真實的‘undefined‘了。是不是有點hack的味道，值得細細體會的技術，當然不是我發明的，都是從前人的經驗中學習。

所以最後我們的插件成了這樣：

;(function($, window, document,undefined) {
    //定義Beautifier的構造函數
    var Beautifier = function(ele, opt) {
        this.$element = ele,
        this.defaults = {
            ‘color‘: ‘red‘,
            ‘fontSize‘: ‘12px‘,
            ‘textDecoration‘: ‘none‘
        },
        this.options = $.extend({}, this.defaults, opt)
    }
    //定義Beautifier的方法
    Beautifier.prototype = {
        beautify: function() {
            return this.$element.css({
                ‘color‘: this.options.color,
                ‘fontSize‘: this.options.fontSize,
                ‘textDecoration‘: this.options.textDecoration
            });
        }
    }
    //在插件中使用Beautifier對象
    $.fn.myPlugin = function(options) {
        //創建Beautifier的實體
        var beautifier = new Beautifier(this, options);
        //調用其方法
        return beautifier.beautify();
    }
})(jQuery, window, document);

一個安全，結構良好，組織有序的插件編寫完成。

關於變量定義及命名

現在談談關於變量及方法等的命名，沒有硬性規定，但為了規範，遵循一些約定還是很有必要的。

變量定義：好的做法是把將要使用的變量名用一個var關鍵字一並定義在代碼開頭，變量名間用逗號隔開。原因有二：

• 一是便於理解，知道下面的代碼會用到哪些變量，同時代碼顯得整潔且有規律，也方便管理，變量定義與邏輯代碼分開；
• 二是因為JavaScript中所有變量及函數名會自動提升，也稱之為JavaScript的Hoist特性，即使你將變量的定義穿插在邏輯代碼中，在代碼解析運行期間，這些變量的聲明還是被提升到了當前作用域最頂端的，所以我們將變量定義在一個作用域的開頭是更符合邏輯的一種做法。當然，再次說明這只是一種約定，不是必需的。

變量及函數命名 一般使用駝峰命名法（CamelCase），即首個單詞的首字母小寫，後面單詞首字母大寫，比如resultArray，requestAnimationFrame。對於常量，所有字母采用大寫，多個單詞用下劃線隔開，比如WIDTH=100，BRUSH_COLOR=‘#00ff00‘。當變量是jQuery類型時，建議以$開頭，開始會不習慣，但經常用了之後會感覺很方便，因為可以很方便地將它與普通變量區別開來，一看到以$開頭我們就知道它是jQuery類型可以直接在其身上調用jQuery相關的方法，比如var $element=$(‘a‘); 之後就可以在後面的代碼中很方便地使用它，並且與其他變量容易區分開來。

引號的使用：既然都扯了這些與插件主題無關的了，這裏再多說一句，一般HTML代碼裏面使用雙引號，而在JavaScript中多用單引號，比如下面代碼所示：

var name = ‘Wayou‘;
document.getElementById(‘example’).innerHTML = ‘< a href="http: //wayouliu.duapp.com/">‘+name+‘</a>‘; //href=".." HTML中保持雙引號，JavaScript中保持單引號

一方面，HTML代碼中本來就使用的是雙引號，另一方面，在JavaScript中引號中還需要引號的時候，要求我們單雙引號間隔著寫才是合法的語句，除非你使用轉意符那也是可以的。再者，堅持這樣的統一可以保持代碼風格的一致，不會出現這裏字符串用雙引號包著，另外的地方就在用單引號。

;(function ($,window,document,undefined

) { function Beauty(ele,opt) { this.$ele = ele; this.defaults = { ‘color‘:‘#fe473c‘ }, this.opt = opt; this.options = $.extend({},this.defaults,this.opt); };// 插件的方法 Beauty.prototype.setattr = function () { //return 出鏈式結構 return this.$ele.css({ ‘color‘:this.options.color }) }; $.fn.myPlugin = function () { var buff = new Beauty(this,{‘color‘:‘green‘}); //return 出鏈式結構 return buff.setattr() } })(jQuery,window,document)

jquey插件學習