JavaScript namespace usage introduction_javascript skills

Students who have used Java and C# are very familiar with namespaces. In a complex system, there will be many functions and objects, provided by the language and predefined by the architecture. With so many functions and objects, due to programming specifications If you ask for a name with practical meaning, it will inevitably lead to incorrect calls due to the same name. But with the namespace, the trouble is gone. Not only can functions and objects be classified and organized, but also isolation can be formed to solve the problem of duplicate names.

Using JavaScript is not so comfortable. Javascript only has function scope. Blocks and Shenma files are all considered to be a namespace. Sometimes errors caused by some duplicate names are baffling and difficult to understand. Debugging and solving.

A simple example

Copy code The code is as follows:

                                                                                                                                                                            

test2();
//.......
}

test2(){
function alert('test2')
                                

In this example, the performance will be different in different browsers. IE will report Stack over flow and Firefox will die. . . Anyway, it will report an error. It is a very simple error. An alert function is customized in the code. The test2 function is called in the alert function. The test2 function intends to call the alert method of the window. In this way, it is called in a loop. Maybe you will say it is so obvious after reading it. Who would make the mistake, but if the custom method is called close (this will often happen), and then an external file function is called internally, and the function calls the window's close method, the error will be hidden a lot.

Simple namespace

Since JavaScript does not have file scope, different functions are scattered in different files, or even written by different people, and the probability of duplicate names is greatly increased. Is it enough to be careful enough? Not necessarily. There are also some unexpected situations. For example, inheritance is often used, so I wrote a function name extend that has never appeared before. Unexpectedly, the extend function was added to EcmaScript5, and the necessity of namespaces was reflected.

JavaScript has function scope. You can use this to write custom functions into a function body, so that the variables, objects, and functions in the function are isolated from the outside just like they are in a namespace.

Copy code The code is as follows:

                                                                                                                    alert=function(){
console.log('test');
}
}




In this way, the customized alert method will not conflict with the window alert.

Simple evolution

This is possible, but there are problems. The biggest problem is that the calling method is complicated and ugly! The object must be instantiated every time it is called, and then its methods must be called. Simply modify the code to achieve automatic instantiation.

Copy code

The code is as follows:

           

Copy code The code is as follows: (function xxx(){

//function body
})();

Written in this way, the xxx function can be automatically executed after being defined. It looks magical, but in fact, the above writing method can be broken down into this

Copy code The code is as follows:function xxx(){

//function body
}

xxx();

is to define a function and then call it using bracket syntax. The layer of brackets outside the function definition only converts the function declaration into a function definition expression, because only expressions can be called using brackets. After understanding these monsters, the above code is simple. At the end of the custom namespace function, assign this to the NS attribute of the window, and use NS.xx directly when calling. Looks a lot better.

Beautify it

The above writing method looks good, but the function name namespace seems to be redundant and can be beautified

Copy code The code is as follows:(function (){

this.alert= function(){

                                 console.log('test');                                                                              


becomes an anonymous function that is executed immediately, which is a bit beautified, but it still looks weird. Yes, it is obviously an instantiated function. Why is the method definition not written into the prototype? How to write the prototype for an anonymous function? . . . , you still have to use your brain

Copy code

The code is as follows:

(function(){ var _NS=function (){ } _NS.prototype.alert=function(){ console.log('test');

}

        window.NS=new _NS() ;
})();




Write several useful functions


querySelector and querySelectorAll are new query interfaces provided by W3C, but the names are very long, so I wrote a simple one myself. The innerHTML attribute is also commonly used. I wrote a simple version of the jQuery html method

Copy code

The code is as follows:

(function () {
            var _NS = function () {

            }

            _NS.prototype.select = function (selector,context) {
                var context = context || document;
                return context.querySelectorAll(selector);
            }

            _NS.prototype.isArrayLike=function(obj){
                if(obj instanceof Array){
                    return true;
                }

                var length=obj.length;
                if ( obj.nodeType === 1 && length ) {
                    return true;
                }
                return false;
            }

            _NS.prototype.html = function (obj,value) {
                var isArray=this.isArrayLike(obj), i=0;

                if (typeof value == 'string') {
                    if (!isArray) {
                        obj.innerHTML = value;
                    } else {
                        var length = obj.length;
                        while (i                             obj[i].innerHTML = value;
                            i = 1;
                        }
                    }
                } else {
                    if (!isArray) {
                        return obj.innerHTML;
                    } else {
                        return obj[0].innerHTML;
                    }
                }
            }

            window.NS = new _NS();
        })();

Such a simple JavaScript library with namespace has been written. You don’t have to worry about naming conflicts, but it is very inconvenient to use. All front-end students have used jQuery. It is easy to use. jQuery is How? If you want to know what happens next, listen to the explanation next time.