JS encapsulated into plugins

Because of the project, work for more than a year also useless JS write plug-ins, the project is too mature, usually in the use of the functional plug-in has been packaged. Feel Good low ... These two days want to take time to write a canvas chart and discount diagram of the plug-in, so go online to learn how to encapsulate ..... Although I have seen a lot of source code before, but feel even understand is wild way ....

What is encapsulation?

My understanding is to put a function alone into a component, like making dumplings, before making dumplings have to make dumplings with flour, and then make dumplings, and then handmade dumplings, but now people invented the automatic dumplings machine, although every step inside the machine and your own dumplings are the same, But the only thing you need to do right now is to put the ingredients in. Here the machine is the packaged plug-in, and the raw material is the parameters you want to pass

Why do you want to encapsulate the JS function as a plugin? I think I have the following points.

1. Convenient for code reuse

2, avoid the interference of the same functional components, there may be some problems of the scope of it

3, easy to maintain, at the same time conducive to project accumulation

4, do not feel that the copy and paste is very low ....

I see on the Internet the package seems to have two kinds, one is the original package JS, one is the package of jquery. Here, let me tell you about the native package.

We put the JS code into a self-executing function in the package, which prevents variable collisions.

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

And then create a constructor

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

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

(function() {    varfunction(options) {        ...    }     = Demo;} ())

In fact, now you can call directly, packaged well, although not realized what function

var New Demo ({    x:1,    y:2}) or new  Demo ({    x:2,    y: 3});

And then the arguments, we have a plug-in generally have some required parameters or optional parameters, in my opinion the optional parameter is the default value in the plug-in. The parameters we pass will overwrite the default parameters in the plugin and can be overridden with $.extend ({})

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

You can then perform some actions when you initialize the constructor

(function(){    varDemo =function(options) { This. options =$.extend ({"X": "1",            "Y": "2",            "Z": "3"},options);  This. Init ();    }; Demo.prototype.init=function() {alert ("X is" + This. options.x+ "Y is" + This. options.y+ "Z is" + This. options.z);    }; Window.demo=demo;} ());NewDemo ({"X": "5",    "Y": "4"});</script>

That's it. A super-simple package

I have a question here, extend is only jquery, JS object have any alternative method? I'll see you later .....

There is also need to mention is the package JS when we have to consider thoughtful, such as its extensibility and compatibility, as well as the performance of how, there is no need to be packaged ... To be selective.

Now the online has completed a number of plug-ins, and the function is very powerful, but it is precisely this, sometimes a very large plug-in we only use a very small part, then we need to modify ourselves into a suitable for our own, and some of the project style and the current plug-in style is also different, So the key is to fit your project.

JS encapsulated into plugins