如何用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 ==》针对元素添加方法(我的理解)

相关文章:

  • 2022-12-23
  • 2022-03-01
  • 2021-11-19
  • 2021-05-22
  • 2022-12-23
  • 2022-02-13
  • 2021-10-09
  • 2021-11-23
猜你喜欢
  • 2021-11-11
  • 2021-08-22
  • 2021-09-28
  • 2022-12-23
  • 2021-05-19
  • 2021-06-20
  • 2021-10-31
相关资源
相似解决方案