I haven't blogged for a while, but recently changed my job. From the previous H5 mobile page project to the current PC single page project, the main thing I did after I joined the project team was to write the front-end plug-ins. I worked for more than a month to summarize some of my experiences in writing plug-ins in this project.

Generally speaking, it is not difficult to write plug-ins. It is difficult to debug and bug the plug-ins in different pages. At least some plug-ins written by the plug-ins themselves have some problems more or less, which can be extended and maintained later.

The outermost layer is usually wrapped in this way:

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

   }
})(jQuery);

WxlsSpinner is the name of the plug-in. When the page is called, wxlsSpinner can use the method in the plug-in directly.

Then define a large object settings in the plug-in:

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


       };
      //Initialize settings objects
      settings.init(this);
     //Return settings object
      return this;
   }
})(jQuery);

In the settings object, you can add various attributes and methods:

(function($){
   $.fn.wxlsSpinner = function(options){
       var settings = {
            //Stimulating object
	    this$:null,
	   //Bulletbox Object of Ontology
            thisPopo:{},
            //Addition and subtraction span
            step:10,
            //Default values
            defaultNum:0,
            //minimum value
            minNum:0,
            //Maximum
            maxNum:100,
            //Keep decimal digits
            numFixed:2,
            //Addition and subtraction sign width, height and color
            width:21,
            height:21,
            color:"#ccc",
            init:function(clickElement){
            	settings.returnThis$(clickElement);
            	//Expanding the Events of Replacing this Plug-in
            	$.extend(settings,options);
        	settings.createOrGetHtml();
        	settings.autoOffset();
        	settings.calculate();
                settings.hoverBind();
            },
            
            

       };
      //Initialize settings objects
      settings.init(this);
     //Return settings object
      return this;
   }
})(jQuery);

In the init function, $. extend(settings,options) expands the event of replacing the plug-in, that is, when calling the plug-in, you can pass some parameters to modify the default values of the parameters in the plug-in. And if the first parameter of $. extend(true,settings,options) is true, it will be replaced recursively. Pages will first find out whether their parameters are there. If not, plug-ins will be used. If not, plug-ins will find methods that call other base classes in plug-ins. If true is not passed, they will be replaced by plug-ins by default, but not by plug-ins. It will continue to look for methods that call other base classes in the plug-in. Before the project, because I did not pass true, but my plug-in called the method of the base class. Then my colleague added the parameter of no Page to the paging column in the base class. Although I set this parameter in the plug-in, the page is still invalid. Breakpoint found that the parameter of no Page is null, because there is no paging parameter in the base class. There are parameters that are replaced recursively to the base class of the plug-in.
In init(), each function is initialized when the page is loaded. These functions can be defined under init():

(function($){
   $.fn.wxlsSpinner = function(options){
       var settings = {
            //Stimulating object
	    this$:null,
	   //Bulletbox Object of Ontology
            thisPopo:{},
            //Addition and subtraction span
            step:10,
            //Default values
            defaultNum:0,
            //minimum value
            minNum:0,
            //Maximum
            maxNum:100,
            //Keep decimal digits
            numFixed:2,
            //Addition and subtraction sign width, height and color
            width:21,
            height:21,
            color:"#ccc",
            init:function(clickElement){
            	settings.returnThis$(clickElement);
            	//Expanding the Events of Replacing this Plug-in
            	$.extend(settings,options);
        	settings.createOrGetHtml();
        	settings.autoOffset();
        	settings.calculate();
                settings.hoverBind();
            },
            //If there are multiple trigger objects, return the object of the current active page
            returnThis$:function(clickElement){
                  ......
            },
           //Create or return objects
            createOrGetHtml:function(){
                 xxxxxx
             },
             //Automatic positioning
            autoOffset:function(){
               ......
            },
           //Wait for other customization methods
            

       };
      //Initialize settings objects
      settings.init(this);
     //Return settings object
      return this;
   }
})(jQuery);

Then the way to call the plug-in on the page is:

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

Reference plug-ins and other JS modules in the project are required.js. First find components/wxls-spinner/wxlsSpinner in the path of the plug-in, then find $("input [name='Discount'] [rowID='1'], thisGrid) in the element calling the plug-in, and then call the plug-in directly. The plug-in name can be called, defaultNum in the plug-in. These parameters, step, directly modify the default values of the plug-in.
These are some initial summaries of plug-in writing in recent years, and some problems encountered in plug-in will be summarized in time.