基于jQuery插件之初探

有段时间没更博客了，最近换了份工作，从之前的编写H5移动端页面项目到现在的PC端单页面项目，进项目组之后主要做的事情就是编写前端插件，1个多月来的工作，把自己在这个项目中编写插件的一些体会做个小结。

   总体来讲，写插件并不难，难在插件在不同页面的调用可能出现的bug及调试，至少自己写的一些插件或多或少都有些问题，在后期再进行拓展及维护。

最外层一般直接这样包裹起来：

(function($){
   $.fn.wxlsSpinner = function(options){     

   }
})(jQuery);

其中wxlsSpinner就是插件的名字，在页面调用的时候直接.wxlsSpinner就可以使用插件里面的方法了。

然后在插件中定义一个大的对象settings:

(function($){
   $.fn.wxlsSpinner = function(options){
       var settings = {


       };
      //初始化settings对象
      settings.init(this);
     //返回settings对象
      return this;
   }
})(jQuery);

在settings对象里面就可以添加各种属性以及方法了：

(function($){
   $.fn.wxlsSpinner = function(options){
       var settings = {
            //激发对象
	    this$:null,
	   //本体弹框对象
            thisPopo:{},
            //加减跨度
            step:10,
            //默认值
            defaultNum:0,
            //最小值
            minNum:0,
            //最大值
            maxNum:100,
            //保留小数位数
            numFixed:2,
            //加减号宽高和颜色
            width:21,
            height:21,
            color:"#ccc",
            init:function(clickElement){
            	settings.returnThis$(clickElement);
            	//拓展替换本插件的事件
            	$.extend(settings,options);
        	settings.createOrGetHtml();
        	settings.autoOffset();
        	settings.calculate();
                settings.hoverBind();
            },
            
            

       };
      //初始化settings对象
      settings.init(this);
     //返回settings对象
      return this;
   }
})(jQuery);

在init函数中， $.extend(settings,options)作用是拓展替换本插件的事件，也就是在调用插件的时候可以自己传一些参数来修改插件里面的参数的默认值。而且如果 $.extend(true,settings,options)第一个参数是true就会递归替换，页面会先查找自己参数有没有，如果没有就用插件的，插件如果也没有，那么会查找插件里面调用其他基类的方法，如果不传true默认就替换到插件的方法，而不会继续去查找插件里面调用其他基类的方法。在项目中之前就是因为没传true，而自己的插件里面调用了基类的方法，然后同事在基类里面在分页栏加了不分页的noPage参数，导致我虽然在插件里面设置了这个参数，页面依然是无效的，断点发现noPage参数是null的，就是因为没有递归替换到插件里基类的参数。
在init()中，每一个函数都会在加载页面的时候初始化，这些函数都可以在init()下面定义出来：

(function($){
   $.fn.wxlsSpinner = function(options){
       var settings = {
            //激发对象
	    this$:null,
	   //本体弹框对象
            thisPopo:{},
            //加减跨度
            step:10,
            //默认值
            defaultNum:0,
            //最小值
            minNum:0,
            //最大值
            maxNum:100,
            //保留小数位数
            numFixed:2,
            //加减号宽高和颜色
            width:21,
            height:21,
            color:"#ccc",
            init:function(clickElement){
            	settings.returnThis$(clickElement);
            	//拓展替换本插件的事件
            	$.extend(settings,options);
        	settings.createOrGetHtml();
        	settings.autoOffset();
        	settings.calculate();
                settings.hoverBind();
            },
            //如果有多个触发对象，返回当前激活页面的对象
            returnThis$:function(clickElement){
                  ......
            },
           //创建或返回对象
            createOrGetHtml:function(){
                 xxxxxx
             },
             //自动定位位置
            autoOffset:function(){
               ......
            },
           //等等其他各种自定义方法
            

       };
      //初始化settings对象
      settings.init(this);
     //返回settings对象
      return this;
   }
})(jQuery);

然后在页面的调用插件的方法是：

require(['components/wxls-spinner/wxlsSpinner'], function() {
   $("input[name='Discount'][rowID='1']", thisGrid).wxlsSpinner({
	defaultNum:5.00,
	step: 2,
	maxNum: 100.00,
	numFixed:2,
   });
});

        项目中引用插件和其他js模块都是用的require.js，先把插件的路径找到components/wxls-spinner/wxlsSpinner，然后把调用插件的元素找到$("input[name='Discount'][rowID='1']", thisGrid)，然后直接.插件名就可以调用插件了，在插件里defaultNum和step这些参数都是直接修改了插件的默认值的。
       以上这些就是对近阶段关于插件编写的一些初用的小结，以后在插件里面遇到的一些问题也会及时的总结出来。