Variable encapsulation in js

In general, when writing some simple javascript code, the following operations are performed: [javascript] varname & amp; #39; Chris & amp; #39; varage & amp; #39; 34 & amp; #39; varstatus & amp; #39; single & amp; #39; functioncreateMember () {// [...]} fun

In general, when we write some simple js files, they are all as follows:

[Javascript]
Var name = 'chris ';
Var age = '34 ';
Var status = 'singles ';
Function createMember (){
// [...]
}
Function getMemberDetails (){
// [...]
}
Var name = 'chris ';
Var age = '34 ';
Var status = 'singles ';
Function createMember (){
// [...]
}
Function getMemberDetails (){
// [...]
}

 

However, due to the scope of js variables (variables outside function are global variables), the reference page contains multiple definitions of the same variable name, and the previous variables will be replaced.

To solve this problem, we can encapsulate variables and functions in a specific function, as follows:

[Javascript]
Var myApplication = function (){
Var name = 'chris ';
Var age = '34 ';
Var status = 'singles ';
Function createMember (){
// [...]
}
Function getMemberDetails (){
// [...]
}
}();
Var myApplication = function (){
Var name = 'chris ';
Var age = '34 ';
Var status = 'singles ';
Function createMember (){
// [...]
}
Function getMemberDetails (){
// [...]
}
}();

Yes, the above method solves the scope of the variable, but there are also new problems. The variables and functions in myApplaction cannot be called elsewhere.

Of course, if you think this meets the requirements, this is naturally a good solution, or we can write it simpler:

 

[Javascript]
(Function (){
Var name = 'chris ';
Var age = '34 ';
Var status = 'singles ';
Function createMember (){
// [...]
}
Function getMemberDetails (){
// [...]
}
})();
(Function (){
Var name = 'chris ';
Var age = '34 ';
Var status = 'singles ';
Function createMember (){
// [...]
}
Function getMemberDetails (){
// [...]
}
})();

 

 

But in most cases, we want the previously defined functions or variables to be reused, and the following optimization can satisfy us:

[Javascript]
Var myApplication = function (){
Var name = 'chris ';
Var age = '34 ';
Var status = 'singles ';
Return {
CreateMember: function (){
// [...]
},
GetMemberDetails: function (){
// [...]
}
}
}();
// MyApplication. createMember () and
// MyApplication. getMemberDetails () now works.
Var myApplication = function (){
Var name = 'chris ';
Var age = '34 ';
Var status = 'singles ';
Return {
CreateMember: function (){
// [...]
},
GetMemberDetails: function (){
// [...]
}
}
}();
// MyApplication. createMember () and
// MyApplication. getMemberDetails () now works.

 

This is called a module pattern or singleton.

The YUI is used in a lot of ways for further optimization:

[Javascript]
Var myApplication = function (){
Var name = 'chris ';
Var age = '34 ';
Var status = 'singles ';
Function createMember (){
// [...]
}
Function getMemberDetails (){
// [...]
}
Return {
Create: createMember,
Get: getMemberDetails
}
}();
// MyApplication. get () and myApplication. create () now work.
Var myApplication = function (){
Var name = 'chris ';
Var age = '34 ';
Var status = 'singles ';
Function createMember (){
// [...]
}
Function getMemberDetails (){
// [...]
}
Return {
Create: createMember,
Get: getMemberDetails
}
}();
// MyApplication. get () and myApplication. create () now work.

 

Via: http://coding.smashingmagazine.com/2010/04/20/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/

Excerpt from jian sheng's code Memorandum