Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use Javascript plug-in development". In daily operation, I believe many people have doubts about how to use Javascript plug-in development. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to use Javascript plug-in development". Next, please follow the editor to study!

How should it be structured?

There is less contact with the concept of architecture, and my understanding is that architecture is to solve what may happen in the future.

I have encapsulated some plug-ins before, but the backend thought that my package was too difficult to use, so I analyzed the reasons and found that the plug-ins written earlier had no interfaces to be exposed, and some parameters that did not need to be passed were passed instead. There is no interface that should be exposed, because I do not write plug-ins in accordance with future ideas, and plug-ins that are often written in this way become disposable products.

So during this period of time, before writing the plug-in, you will think clearly about what parameters the plug-in needs, which must be passed, which are optional, which functions may be used in the future, and which can be changed. These must be considered, otherwise the written plug-in will definitely have a lot of problems.

Basic prototype

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

Enclose the code to be written into a self-executing function to prevent variable conflicts, and then expose the constructor to the window object so that we can access the constructor externally.

The effect needs to be made as follows:

Think about what parameters are needed

This function is to click on an element, pop up a mask layer, and click the mask layer to remove the mask layer.

So we can analyze that at least one parameter is needed, that is, we need to know which pop-up layer to click on, and we also need to configure some default parameters.

; (function (window,document) {var MaskShare = function (targetDom,options) {/ / determines whether it is created with a function or a 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); / / parameters merge this.options = this.extend ({/ / this parameter may be changed later, so expose imgSrc: ".. / static/img/coupon-mask_1.png"}, options) / / determine whether the DOM or the string if ((typeof targetDom) = "string") {this.targetDom = document.querySelector (targetDom);} else {this.targetDom = targetDom;} var boxDom = document.createElement ("div"); var imgDom = document.createElement ("img"); / / set the default style to set the z-index value higher to prevent other elements from being higher than the mask layer boxDom.style.cssText = "display: none" Position: absolute;left: 0: top: 0; width: 100%; if: 100%; rgba; imgDom.style.cssText = "margin-top:20px;width: 100%;"; / append or reset its 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.targetDom.addEventListener ("click", function () {document.body.appendChild (_ this.boxDom); _ this.boxDom.style.display = "block" / / turn on the callback of the mask layer _ this.options.open&&_this.options.open ();}, false); this.boxDom.addEventListener ("click", function () {this.style.display = "none"; / / turn off the callback of the mask layer _ this.options.close&&_this.options.close ();}, false);}}; / / exposure method window.MaskShare = MaskShare } (window,document))

Examples of use:

MaskShare (".immediately", {imgSrc: ".. / static/img/loading_icon.gif", boxDomStyle: {opacity: ".9"}, imgDomStyle: {opacity: ".8"}, open:function () {console.log ("show");}, close:function () {console.log ("close");}}); at this point, the study on "how to use Javascript plug-in development" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.