zoukankan      html  css  js  c++  java
  • 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 ==》针对元素添加方法(我的理解)

  • 相关阅读:
    面试题(8)之 在线题
    deepin深度学习环境配置
    ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(一)
    ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(三)
    ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(二)
    阅读博客后结合自身经历的心得体会
    软件工程学习后问题解答
    软件工程课后总结与反思
    学霸数据处理项目之数据处理网页以及后台以及C#代码部分开发者手册
    学霸数据处理项目之数据处理框架开发者手册
  • 原文地址:https://www.cnblogs.com/wuxiaobin/p/4724360.html
Copyright © 2011-2022 走看看