jquery自定义类的封装

原文链接: https://www.mk2048.com/blog/blog.php?id=h0bihj2hc20j&title=jquery%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B1%BB%E7%9A%84%E5%B0%81%E8%A3%85

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


更多专业前端知识,请上 【猿2048】www.mk2048.com

猜你喜欢

转载自blog.csdn.net/QDY5945/article/details/102716169
今日推荐