Create a namespace in JavaScript

Source: Internet
Author: User
Tags closure compact

Reference: http://ourjs.com/detail/538d8d024929582e6200000c in JavaScript, global variables often cause naming conflicts, and even sometimes rewrite variables are not in the order you think they are, Take a look at the following example:
var SayHello = function () {  return ' Hello var ';}; function SayHello (name) {  return ' Hello function ';}; SayHello ();
The final output is
> "Hello var"
Why, according to StackOverflow's explanation, JavaScript is actually parsed in the following order.

function SayHello (name) {  return ' Hello function ';}; var SayHello = function () {  return ' Hello var ';}; SayHello ();
The function declaration without VAR is parsed in advance, so the modern JS notation suggests that you always declare all variables using the preceding VAR; the best way to avoid global variable name collisions is to create namespaces, and here are some common ways to build namespaces in JS. created by functions (function)This is a more common way of writing, by declaring a function implementation, set the initial variables in the functions, public methods to write prototype, such as:
var NameSpace = window. NameSpace | | {};
/*
Function
*/
Namespace.hello = function () {
THIS.name = ' world ';
};
NameSpace.Hello.prototype.sayHello = function (_name) {
Return ' Hello ' + (_name | | this.name);
};
var hello = new Namespace.hello ();
Hello.sayhello ();
This is verbose and is not conducive to compressing code (jquery uses FN instead of prototype), and it needs to instantiate (new) before calling. The use of object as JSON can be written in a compact way: creating an object from a JSON object
/*
Object
*/
var NameSpace = window. NameSpace | | {};
Namespace.hello = {
Name: ' World '
, Sayhello:function (_name) {
Return ' Hello ' + (_name | | this.name);
}
};
Call
NameSpace.Hello.sayHello (' JS ');
> Hello JS;
The disadvantage of this is that all variables must be declared public, causing all references to those variables to be added with this indication scope, with a slightly redundant notation.

Through closures (Closure) and object implementations

Declare all variables and methods in the closure and return to the public interface via a JSON object:
var NameSpace = window. NameSpace | | {};
Namespace.hello = (function () {
Public objects to be returned
var self = {};
Private variables or methods
var name = ' World ';
Public method or variable
Self.sayhello = function (_name) {
Return ' Hello ' + (_name | | name);
};
The returned public object
return self;
}());
improved notation for object and closureThe last example in-house calls to public methods also needs to be added self, such as: Self.sayhello (); Here you can finally return all the JSON objects of the public interface (method/variable).
var NameSpace = window. NameSpace | | {};
Namespace.hello = (function () {
var name = ' World ';
var SayHello = function (_name) {
Return ' Hello ' + (_name | | name);
};
return {
Sayhello:sayhello
};
}());
A concise notation of functionThis is a relatively concise implementation, compact structure, through the function instance, and call without instantiation (new), the scheme is from StackOverflow:
var NameSpace = window. NameSpace | | {};
Namespace.hello = new function () {
var = this;
var name = ' World ';
Self.sayhello = function (_name) {
Return ' Hello ' + (_name | | name);
};
};


Call

NameSpace.Hello.sayHello ();

Create a namespace in JavaScript

Related Article

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.