jQuery插件開發模式

jQuery插件開發模式

 

 一.javascript的方法能夠分爲三類：

1. 類方法

2 .對象方法

3. 原型方法

function People(name)
{
  this.name=name;
  //對象方法
  this.Introduce=function(){    //這種形式是特權方法this.xx=function(){}
    alert("My name is "+this.name);
  }
}
//類方法
People.Run=function(){
  alert("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
  alert("個人名字是"+this.name);
}

 

//測試
//實例化對象
var p1=new People("Windking");    //My name isWindking

p1.Introduce();    //I can run

People.Run(); p1.IntroduceChinese();    //undefined

 jQuery.fn = jQuery.prototype

 

 

 

二.實例講解：

2.1好比咱們將頁面上全部連接顏色轉成紅色，則能夠這樣寫這個插件：

$.fn.bgChange = function() {   //bgChange是本身定義的函數名字
  //在這裏面,this指的是用jQuery選中的元素
  //example :$('a'),則this=$('a')
  this.css('color', 'red');
}

 

在調用該插件時，用jQuery選擇器選中的元素，通常是一個jQuery類型的集合。好比$('a')返回的是頁面上全部a標籤的集合，且這個集合已是jQuery包裝類型了

解釋1：在上面插件代碼中，咱們在this身上調用jQuery的css()方法，也就至關於在調用 $('a').css()。（區別1）

在頁面上放幾個連接，調用插件後連接字體變成紅色。

<ul>
    <li>
        <a href="http://www.webo.com/liuwayong">個人微博</a>
    </li>
    <li>
        <a href="http://http://www.cnblogs.com/Wayou/">個人博客</a>
    </li>
    <li>
        <a href="http://wayouliu.duapp.com/">個人小站</a>
    </li>
</ul>
<p>這是p標籤不是a標籤，我不會受影響</p>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.bgChange.js"></script>
<script type="text/javascript">
    $(function(){
        $('a').bgChange();    //（對比一）
    })
</script>

 

 

2.2進一步，在插件代碼裏處理每一個具體的元素，而不是對一個集合進行處理，這樣咱們就能夠針對每一個元素進行相應操做。

this指代jQuery選擇器返回的集合，那麼經過調用jQuery的.each()遍歷方法就能夠處理合集中的每一個元素了。

 

但在each方法內部，this指帶的是普通的DOM元素了，若是須要調用jQuery的方法那就須要用$來從新包裝一下。（區別2）

 

好比如今咱們要在每一個連接顯示連接的真實地址，首先經過each遍歷全部a標籤，而後獲取href屬性的值再加到連接文本後面。

$.fn.bgChange = function() {
  //在這裏面,this指的是用jQuery選中的元素
  this.css('color', 'red');
  this.each(function() { //對每一個元素進行操做
    $(this).append(' ' + $(this).attr('href'));
  }))
}

 

對比

 

2.3支持鏈式調用

要讓插件不打破這種鏈式調用，只需return一下便可。

 return this.each(function() {

 

 

2.4 options

$.fn.bgChange = function(options){  
//給定一個默認值。  
   var defaults = {  
        color:"black",fontSize:"12"  
    }; 
//將傳遞的值替換爲默認值，(若是options爲空，則使用defaults，能夠避免傳遞的options爲null和沒有傳遞options的狀況)
 var options = $.extend(defaults,options);
//插件內容寫在這裏
return this.css({
    'color':options.color,
    'fontSize':options.fontSize
});
 } 

 

 咱們的插件能夠這樣被調用：字體大小未指定，會運用插件裏的默認值12px。

$("a").bgChange({    //（對比二）

    color:"blue"
 })

 

這裏要掌握$.extend(obj1,obj2)對於替換的用法

 http://www.cnblogs.com/hewasdrunk/p/7453275.html

 

 上例子中輸入color:"blue"會替換原先的默認值。

 一個好的作法是將一個新的空對象作爲$.extend的第一個參數，defaults和用戶傳遞的參數對象緊隨其後，這樣作的好處是全部值被合併到這個空對象上，保護了插件裏面的默認值。

 

$.fn.bgChange = function(options){  
//給定一個默認值。  
   var defaults = {  
        color:"black",fontSize:"12"  
    }; 
//將一個空對象做爲第一個參數
 var options = $.extend({},defaults,options);
//插件內容寫在這裏
return this.css({
    'color':options.color,
    'fontSize':options.fontSize
});
 } 

 

 進階階段

爲了方便管理使用面向對象思惟，

將須要的重要變量定義到對象的屬性上，函數變成對象的方法，當咱們須要的時候經過對象來獲取，一來方便管理，二來不會影響外部命名空間，由於全部這些變量名還有方法名都是在對象內部。

2.5往後擴充插件功能的準備

咱們能夠把這個插件抽象成一個美化頁面的對象，由於他的功能是設置顏色啊字體啊什麼的，固然咱們還能夠加入其餘功能好比設置下劃線啊什麼的

//定義Beautifier的構造函數(這仍是個全局變量，它會被附到全局的window對象上)
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.bgChange = function(options) {
  //建立Beautifier的實體
  var beautifier = new Beautifier(this, options);
  //調用其方法
  return beautifier.beautify();
}

 

經過上面這樣一改造，咱們的代碼變得更面向對象了，也更好維護和理解，之後要加新功能新方法，只需向對象添加新變量及方法便可，而後在插件裏實例化後便可調用新添加的東西。

插件的調用仍是同樣的，咱們對代碼的改動並不影響插件其餘地方，只是將代碼的組織結構改動了而以。

 

$(function() {
  $('a').bgChange({
    'color': '#2C9929',
    'fontSize': '20px',
    'textDecoration': 'underline'
  });
})

 

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

JavaScript中沒法用花括號方便地建立做用域，但函數卻能夠造成一個做用域，域內的代碼是沒法被外界訪問的。若是咱們將本身的代碼放入一個函數中，那麼就不會污染全局命名空間，同時不會和別的代碼衝突。

(function() {
  //定義Beautifier的構造函數
  var Beautifier = function(ele, opt) {
  ······
})();

 

 

2.7完善

2.7.1在代碼開頭加一個分號，防止與其餘引用別人定義的函數相連

var foo=function(){
  //別人的代碼
}//注意這裏沒有用分號結尾
 
//開始咱們的代碼。。。
;(function(){
  //咱們的代碼。。
  alert('Hello!');
})();

 2.7.2將系統變量以參數形式傳遞到插件內部

;(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)   //可剛改成：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.bgChange = function(options) {
    //建立Beautifier的實體
    var beautifier = new Beautifier(this, options);
    //調用其方法
    return beautifier.beautify();
  }
})(jQuery, window, document);

 

 

 2.7.3關於變量定義及命名

當變量是jQuery類型時，建議以$開頭

通常HTML代碼裏面使用雙引號，而在JavaScript中多用單引號，好比下面代碼所示：

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

 

 

 2.7.4插件發佈

參考原文：http://www.jb51.net/article/74491.htm