無中生有,如何編寫一個最簡單的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>