JS encapsulation plug-in case

This time I will bring you a JS encapsulation plug-in case. What are the precautions for JS encapsulation plug-in? The following is a practical case, let’s take a look.

Due to project reasons, I haven’t written a plug-in in js for more than a year. The project is too mature, and I usually use packaged functional plug-ins. I feel so low... In the past two days, I wanted to take the time to write a

canvas plug-in for drawing statistical charts and discount charts, so I went online to learn how to package... Although I have read a lot of source code before, but I feel that even if I understand it, it is still a wild idea...

What is encapsulation?

My understanding is Making a function into a separate component is like making dumplings. In the past, to make dumplings, you had to first make dumpling wrappers with flour, then make dumpling fillings, and then make dumplings by hand. But now people have invented automatic dumpling making machines. Although the inside of the machine Each step is the same as making dumplings yourself, but in fact there is only one thing you need to do now, which is to put the ingredients. The machine here is the packaged plug-in, and the raw materials are the parameters you want to pass

Why should we encapsulate js functions into plug-ins? I think there are the following points

1. Facilitate code reuse

  2. Avoid interference from components with the same function. There may be some issues with scope.

 3. Easy to maintain and conducive to project accumulation

 4. Don’t you think copying and pasting all the time is very low...

There seem to be two kinds of encapsulation I saw on the Internet, one is the native encapsulation of js, and the other is the encapsulation of

jquery. Let me talk about native encapsulation first.

When encapsulating, we will put the js code into a self-executing

function to prevent variable conflicts.

(function(){
  ......
  ......
}()}

Then create a

constructor

(function(){
  var demo = function(options){
    ......
  }
}())

Expose this function to the outside so that it can be called globally

(function(){
  var demo = function(options){
    ......
  }
  window.demo = demo;
}())

In fact, now you can call it directly, it is encapsulated, although it does not implement any functions

var ss = new demo({
  x:1,
  y:2
})；

Or

new demo({
  x:2,
  y:3
})；

Then how to pass parameters? One of our plug-ins usually has some required parameters or optional parameters. In my opinion, optional parameters are just default values ​​given in the plug-in. The parameters we pass will override the default parameters in the plug-in, which can be overridden with $.extend({})

(function(){
  var demo = function(options){
    this.options = $.extend({
      "x" : 1,
      "y" : 2,
      "z" : 3
    },options)
  }
  window.demo = demo;
}())

Then you can perform some operations when initializing the constructor

(function(){
  var demo = function(options){
    this.options = $.extend({
      "x" : "1",
      "y" : "2",
      "z" : "3"
    },options);
    this.init();
  };
  demo.prototype.init = function(){
    alert("x是"+this.options.x+" y是"+this.options.y+" z是"+this.options.z);
  };
  window.demo = demo;
}());
new demo({
  "x" :"5",
  "y" :"4"
});
</script>

I have a question here. Does extend only exist in jquery? Is there any alternative to js

object? I'll check it out later..........

Another thing that needs to be mentioned is that when encapsulating js, we must consider everything, such as its scalability and compatibility, as well as its performance. If there is no need, there is no need to encapsulate... Be selective .

There are countless plug-ins that have been completed on the Internet, and their functions are very powerful. However, sometimes we only use a small part of a large plug-in, so we need to modify it ourselves. It suits us, and the styles of some projects are different from the current plug-in styles, so the key is to suit your own projects. ​​​​​​​​

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How Vuejs operates page regionalization

detailed explanation of using webpack2 React

JQUERY gets the value of the attribute through the current tag name

The above is the detailed content of JS encapsulation plug-in case. For more information, please follow other related articles on the PHP Chinese website!