无中生有,如何编写一个最简单的jQuery插件.

时间 2019-11-07

原文原文链接

首先是最基础的,大多数乃至99%的jQuery插件都会用到的代码介绍一下,一共就2条. javascript

1. extend()函数,参数是一个Object,为一个对象作扩展,添加一些方法或者属性.好比: html

jQuery.extend({
  hello:function(){
    alert("say hello");
  }
});

这是为jQuery类自己扩展了新的方法hello,也能够经过$.fn.extend()为jQuery对象添加方法.在插件的通常开发中,都是添加到对象的.若是这还不能理解的话,能够把jQuery想象成是一个类,直接extend就至关于给它添加静态方法.经过$.fn去extend就至关于给jQuery的prototype扩展,要在实例对象上才能调用. java

2. (function($){})(jQuery) 这个代码的含义简单说就是一个匿名函数的执行,(fun1)()表达的是一个名为fun1的函数执行.这里面function($){}这个匿名函数就是代替了fun1的位置.这里这个匿名函数的执行,传入的实参jQuery对象,匿名函数中用$这个形参去接收. jquery

好了知道了上面的2个比较关键的点,咱们就能够本身写一个控件了.咱们但愿这个控件实现的功能就是对input作限制,限制它输入的最大长度.咱们但愿它的使用看起来是这样的: 闭包

$(".inputlimt").limit({
  max:2
});

//为全部class是inputlimit的标签加上最大长度为2的限制.

如此经过一个配置对象设置插件的参数,咱们搭起插件的骨架. 函数

(function($){
    $.fn.setmaxlen = function(options){
      var opts = $.extend({},$.fn.setmaxlen.defaults,options);
    };
                          
    $.fn.setmaxlen.defaults = {
      max:2
    };
  })(jQuery);

上面的代码就是插件的骨架了,构建了一个闭包环境后,扩展了jQuery对象,添加了一个setmaxlen方法和一个setmaxlen.defaults对象.在使用配置信息的时候,不断向空对象中填充.defaults对象对外部开放,能够直接修改. this

如今在setmaxlen函数中继续编写功能,加上长度限制的代码: spa

(function($){
    $.fn.setmaxlen = function(options){
      var opts = $.extend({},$.fn.setmaxlen.defaults,options);
      
      return this.each(function(){
        
        var $this = $(this);
        $(document).delegate($this,"keyup",function(e){
          var l = parseInt(opts.max);
          limitDo.call($this,l)
        });  
        
        var len=function(s){//获取字符串的字节长度
          s=String(s);
          return s.length+(s.match(/[^\x00-\xff]/g) || "").length;
          //返回字符长度 + 从原字符中提取的全部双字节字符的长度
         }
	
        limitDo=function(limit){
            var val=$(this).val();
            if(len(val)>limit) {
                while(len(val=val.substr(0,val.length-1))>limit);
                $(this).val(val);
            }
        }   
        
      });      
      
    };
                          
    $.fn.setmaxlen.defaults = {
      max:2
    };
  })(jQuery);

在闭包区域还能够经过$.fn设置暴露的函数,或者直接function fun(){}设置私有函数.这些都是能够的,通常性的插件就是如此.完整代码以下: .net

<html>
<head>
<script type="text/javascript" src="http://www.ostools.net/js/jquery/jquery-1.7.2.js"></script>
<script>
  (function($){
    $.fn.setmaxlen = function(options){
      var opts = $.extend({},$.fn.setmaxlen.defaults,options);
      
      return this.each(function(){
        
        var $this = $(this);
        $(document).delegate($this,"keyup",function(e){
          var l = parseInt(opts.max);
          limitDo.call($this,l)
          consolelog();
        });  
        
        var len=function(s){//获取字符串的字节长度
          s=String(s);
          return s.length+(s.match(/[^\x00-\xff]/g) || "").length;
          //返回字符长度 + 从原字符中提取的全部双字节字符的长度
         }
	
        limitDo=function(limit){
            var val=$(this).val();
            if(len(val)>limit) {
                while(len(val=val.substr(0,val.length-1))>limit);
                $(this).val(val);
            }
        }   
        
      });      
      
    };
    
    function consolelog(){
      console.log("绑定执行成功")
    };
                          
    $.fn.setmaxlen.defaults = {
      max:2
    };
  })(jQuery);

</script>
</head>
<body>
  <input type="text" id="numonly" />
  <input type="text" id="sss" />
  <script>
    $("#numonly").setmaxlen();
  </script>
</body>
</html>