jquey插件學習

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)