Self-encapsulated JS components-Beginner

2 days ago with the attitude of trying to register this god Bo, a whim to write an article about the Vue custom components of the small article a comment on the No! There is no popularity! (Of course, my article is limited in content and the gods of the comparison is simply shoddy ...) I just turn this blog into a record of my own study. Maybe this blog is the original intention of the same! But I this is a net red heart ah ...

Words do not say more into the topic, before you see all kinds of great God himself with JS encapsulation plug-ins and then all over their own use of real to say that I have a few years of the page learning ah how to write a component is not it! Just then I finally found a website in a very suitable for beginners to start their own writing plug-in tutorial feel benefited a lot today I will be a knowledge of the porter to share the contents of the class as well as their own future review notes it!

First of all, please understand that the use of require.js this case using require.js concatenation is not mentioned here (because it is a learning record so it is not expanded here but if you understand require.js follow-up content should not be a problem) also in this lesson the teacher wrote this component is also gradual Continuous improvement of my notes will be a step by step record to prevent my pig brain after a few days to see and forget (I often myself yesterday did nothing to forget that no way to get old, so please don't laugh at me)

Objective: To develop an alert popup module with JS package

define ([' jquery '],function ($)} {

Define the window class to give some basic parameter configuration

function Window () {

This.cfg = {
width:400,
HEIGHT:200,
Content: ' I am the default text content ',
}

}

Add a method to the window class

Window.prototype = {

var CFG = $.extend (this.cfg,cfg);

Alert:function (CFG) {

var BoundingBox = $ (' <div class= ' window_boundingbox ' ></div> ');

Boundingbox.appendto (' body ')

BoundingBox. HTML (CFG content);

Boundingbox.css ({

Width:cfg. Width,

Height:CFG.height,

Left: (cfg.x | | (window.innerwidth-cfg.width)/2) + ' px ',

Top: (Cfg.y | | (window.innerheight-cfg.height)/2) + ' px ',

})

}

}

}

Export Window class

return {

Window:window

}

})

The following is called in Main.js

Require ([' jquery ', ' Window '],function ($,w) {
New W.window (). Alert ({
WIDTH:500,
HEIGHT:300,
Content: ' Happy New Year ',
})
})

This is the use of JS self-encapsulation plug-in phase B stage but in the master looks still very low because this is not finished is the pop-up frame you told me this is the alert popup component??? No, it's okay. Since there is a beginner's B guide, there will be intermediate or even advanced to be continued ...

Self-encapsulated JS components-Beginner