Native Javascript plug-in development practices

This article mainly introduces the development practices and code of native Javascript plug-ins, which has a certain reference value. Let's take a look at the introduction below.

Previously, the company designed a chaotic website, which is not uniform in many places. One of them is the pop-up layer. This is because the company's UI has changed to several people, and each of them does not make the same thing. Recently, the company began to rectify this issue. Of course, the unified things are made into a module or plug-in, and I plan to make it a plug-in. The reason for writing this article is that after writing this plug-in, I found that there are many ideas, and I want to summarize these ideas, although this plug-in is not complex.

What is the architecture?

I have little access to the concept of architecture. In my understanding, architecture is to solve what may happen in the future.

Some plug-ins have been encapsulated before, but I think the backend is too difficult to use. So I analyzed the reason and found that the plug-ins I wrote earlier did not have the exposed interfaces, some parameters that do not need to be passed must be passed. This exposed interface does not exist, because I did not write plug-ins according to future ideas, and the plug-ins that I write in this way often become a one-time product.

Therefore, before writing a plug-in, you will first think about what parameters are required for this plug-in, which are required to be passed, which are optional, and which functions may be used in the future, which of the following statements can be changed must be considered. Otherwise, the written plug-ins may have many problems.

Basic prototype

;(function(window,document){ var MaskShare = function(){ }; MaskShare.prototype = {}; window.MaskShare = MaskShare;}(window,document));

Close the code to a self-executed function to prevent variable conflicts. Then, expose the constructor to the window object so that we can access the constructor externally.

The results must be as follows:

Think about the required parameters

This function is to click an element to bring up a mask layer. Click the mask layer to remove the mask layer.

Therefore, it can be analyzed that at least one parameter is required, that is, we need to know who to click to bring up the pop-up layer, and we also need to configure some default parameters.

; (Function (window, document) {var MaskShare = function (targetDom, options) {// determine whether the function is created or new. In this way, we can use this plug-in through MaskShare ("dom") or new MaskShare ("dom"). if (! (This instanceof MaskShare) return new MaskShare (targetDom, options); // merge the parameters this. options = this. extend ({// This parameter may be changed later, so it is exposed imgSrc :".. /static/img/coupon-mask_1.png "}, options); // determine whether the passed in is DOM or string if (typeof targetDom) =" string ") {this.tar getDom = document. querySelector (targetDom);} else {this.tar getDom = targetDom;} var boxDom = document. createElement ("p"); var imgDom = document. createElement ("img"); // set the default style. Pay attention to setting the z-index value to a greater value to prevent other element levels from being greater than the mask height. boxDom.style.css Text = "display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba (0.8, 0, 9999); z-index ;"; imgDom.style.css Text = "margin-top: 20px; width: 100%;"; // append or reset the style if (this. options. boxDomStyle) {this. setStyle (boxDom, this. options. boxDomStyle);} if (this. options. imgDomStyle) {this. setStyle (imgDom, this. options. imgDomStyle);} imgDom. src = this. options. imgSrc; boxDom. appendChild (imgDom); this. boxDom = boxDom; // initialize this. init () ;}; MaskShare. prototype = {init: function () {this. event () ;}, extend: function (obj, obj2) {for (var k in obj2) {obj [k] = obj2 [k] ;}return obj ;}, setStyle: function (dom, objStyle) {for (var k in objStyle) {dom. style [k] = objStyle [k] ;}}, event: function () {var _ this = this; this.tar getDom. addEventListener ("click", function () {document. body. appendChild (_ this. boxDom); _ this. boxDom. style. display = "block"; // enable the callback of the mask layer _ this. options. open & _ this. options. open () ;}, false); this. boxDom. addEventListener ("click", function () {this. style. display = "none"; // disable the callback of the mask layer _ this. options. close & _ this. options. close () ;}, false) ;}; // exposure method window. maskShare = MaskShare;} (window, document ));

Example:

MaskShare(".immediately",{ imgSrc:"../static/img/loading_icon.gif", boxDomStyle:{  opacity:".9" }, imgDomStyle:{  opacity:".8" }, open:function(){  console.log("show"); }, close:function(){  console.log("close"); }});

Summary

I analyzed it again and found that it still has many limitations. For example, what should I do if I do not use a text clip? These are all big problems. To write a practical plug-in, not only do the technology need to pass through, but the thinking needs to be comprehensive. So this article is just the beginning, and the road is still far away.

The above is all the content of this article. I hope this article will help you in your study or work, and I also hope to support PHP!

For more articles on native Javascript plug-in development practices, please follow the PHP Chinese network!