jquery自定義類的封裝


如何用jquery自定義一個類?(demo參考)

/*簡單使用*/

(function($){

 //el操縱對象,option屬性值

  $.love = function(el,option){ 

    var lo = $(el);

    var lo.vars =  $.extend({},$.love.default ,option); //合並成新對象,則是新的屬性列表

    //定義其他屬性

      ......

      var method = {};

    //私有方法,私有方法之間可互相調用

    method={

      functionA: function() {...},

      functionB: function() {...},

      functionC: function() {...},

      ...

    }

    //公有方法(特權方法),供類外調用

    this.publicFunction = function(a,b,c){

      ....

      /*調用私有函數*/

      method.functionA();

      ...

    }

    ...

 

 }

 //可設置默認屬性

 $.love.default = {

  option1:...,

  option2:...,

  ....

  }

})(jQuery);

 

 /*類外調用*/

  var a = new $.love("#id",{title:"name",age:12,...});

  a.publicFunction(a,b,c);

 

/*相對高級點*/

(function($){

 //el操縱對象,option屬性值

  $.love = function(el,option){ 

    var lo = $(el);

    var lo.vars =  $.extend({},$.love.default ,option); //合並成新對象,則是新的屬性列表

    //定義其他屬性

      ......

      var method = {};

    $.data(el, "love", lo); //在元素上存放數據,包括lo的所有屬性,方法

    //私有方法,私有方法之間可互相調用

    method={

      functionA: function() {...},

      functionB: function() {...},

      functionC: function() {...},

      ...

    }

    //公有方法(特權方法),供類外調用

     lo.pfunctionA = function(){

      /*調用私有函數*/

      method.functionA();

    },

     lo.pfunctionB = function(){...},

    ...

 

 }

 //可設置默認屬性

 $.love.default = {

  option1:...,

  option2:...,

  ....

  }

  $.fn.love(option){

    var $this = $(this); 

    if( $this.data('love')===undefined){

     new $.love(this,option);

    }else{

      var love = $this.data('love'); //直接使用類中的函數等

      love.pfunctionA();

    }

  }

})(jQuery);

 

 

 http://t.cn/RUbL4rP

$ ==> "$ "就是 jQuery 對象的引用,等於"jQuery "

(function(){}) ==>模仿塊級作用域

$.xxx ==>針對 jQuery 對象添加方法(我的理解)

$.fn.xxx ==》針對元素添加方法(我的理解)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM