Javascript--module mode

Source: Internet
Author: User

Module:module mode is a very common pattern in JavaScript programming.
Window.onload = function () {
1. Basic use:
var myfn = function () {
var = 24,sex = "Boy";//Private variable
var action = function () {//private behavior
Console.log ("it Man");
};
return {//Exposed public member
Work: "Ordermonkey",
Action2:function () {
Console.log ("it developer!");
}
}
};
var newmyfn = new Myfn ();
Console.log (Newmyfn.action2 ());
Console.log ("===============================");
The disadvantage of basic usage: Use the new keyword generation each time, so that in memory every time copy a copy, memory, using closures can avoid memory problems, implement self-execution. It is also possible to extend the functionality.

2. Module Method:
var MyFn2 = (function () {
var my = {};//object returned outward
var = 25,name = "Assassin";
var action = function () {
Console.log ("Internal private member");
};
My. Englishname = "WANGHF";
My.action2 = function () {
Console.log ("Major in javascript!");
};//Public Code State
return my;
/*return my = {//Outward returned objects
Work: "It developer",
Action2:function () {
Console.log ("external member variable");
}
}*/
})();
Console.log (Myfn2.action2 ());//call to avoid generation, reduce memory footprint
Console.log ("===============================");
Module method The introduction of global variables and jquery design thinking the same as the use of global parameters
var MyFn3 = (function ($) {
Ditto
}) (JQuery);
3, the expansion of the module:
For large-scale projects need to expand their own, based on the above thought, the same as the parameter value, to expand
var MyFn2 = (function (my) {//var is not required to be written, for unification.
My.addname = "INTELWISD";
My.addaction3 = function () {
Console.log ("New method of Extension ...");
};
/*var my1 = {
AddName: "INTELWISD",
Addaction3:function () {
Console.log ("external member variable");
}
};*///objects are copied in the form of objects before they overwrite the previous
return my;
}) (MYFN2);
Console.log (Myfn2.action2 ());
Console.log ("===============================");
4. Loosely coupled expansion and tight coupling expansion
Loosely coupled extension leverages var MyFn2 = MyFn2 | | {};
var MyFn2 = (function (my) {
my.addname1 = "INTELWISD1";
My.addaction4 = function () {
Console.log ("New method of loose coupling extension ...");
};
/*var my = {
AddName: "intelwisd111",
Addaction3:function () {
Console.log ("external member variable");
}
};*/
return my;
}) (MyFn2 | | {});
Console.log (Myfn2.englishname);
Console.log (MYFN2.ADDNAME1);
Console.log (Myfn2.action2 ());
Console.log (Myfn2.addaction4 ());
Advantages of loose coupling: Ensure that the object is used directly when it exists, and is directly assigned to {} When it does not exist.
Console.log ("===============================");
Tightly coupled extensions can implement overloaded functionality, but ensure that the load sequence
var MyFn2 = (function (my) {
var addAction4 = My.newaddaction4;
My.newaddaction4 = function () {//Overload function, previous function can continue to use
Console.log ("tightly coupled extension ....");
};
return my;
}) (MYFN2);
Console.log (Myfn2.addaction4 ());
Console.log (Myfn2.newaddaction4 ());
Console.log ("===============================");
5, cloning and inheritance (on the basis of tight coupling inheritance, in fact, the object's Property object or function is not copied at all, but the same object more than a reference, so if the old object to change it, the object of the clone after the property or function functions will also be changed. )
var MyFn2 = (function (my) {
var my1 = {}, key;
For (key in my) {
if (My.hasownproperty (key)) {
My1[key] = My[key];
}
}
var addAction4 = My1.newaddaction4;
My1.newaddaction4 = function () {//Overload function, previous function can continue to use
Console.log ("Tight coupling extension 2 ....");
After cloning, it was rewritten, and of course it was possible to continue invoking the previous
};
return my1;
}) (MYFN2);
Console.log (Myfn2.addaction4 ());
Console.log (Myfn2.newaddaction4 ());
Console.log ("===============================");
6. Sharing of private members across files
var MyFn3 = (function (my) {
var _private = My._private = My._private | | {},
_seal = My._seal = My._seal | | function () {
Delete my._private;
Delete my._seal;
Delete my._unseal;
},
_unseal = My._unseal = My._unseal | | function () {
My._private = _private;
My._seal = _seal;
My._unseal = _unseal;
};
return my;
} (MyFn2 | | {}));
Any file can have properties for their local variable _private, and the settings will take effect immediately for other files. Once this module is loaded, the application calls Blogmodule._seal () "locked", which prevents external access to the internal _private. If the module needs to proliferate again, any file can call _unseal () "Unlock" during the lifetime of the application and then load the new file. Call _seal () "Locked" again after loading.
Member creation common to Submodules
Myfn2.commentsubmodule = (function () {
var my = {};
// ...

return my;
} ());
eg
Myfn3.commentsubmodule = (function () {
var my = {
Name: "Assassin",
Fn1:function () {
Alert (0);
}
};
// ...

return my;
} ());
}

Learning source Tom Uncle Javascript--module

Javascript--module mode

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.