[JavaScript] Modular & named pollution-from programming Fine Solutions

Recently, I have seen the modular chapter in the solution of programming, which is very enlightening.

/****************/

In the actual process of development, according to the page or logical layout, JS code can be divided into several blocks according to function: Data interaction, form verification, page layout and so on module

In order to improve the development efficiency and post-code maintenance, it is natural that dozens of JS functions should be divided into modules, which is conducive to debugging and subsequent modification. However, when writing dozens of functions, the name of the natural problem, can not think of any other function name or simply two function names, this because the duplicate declaration caused by the bug called named pollution, this is common in large projects.

When it comes to module development, the easiest thing to think about is to divide the module storage and calling code by JS files. The drawback of file storage is: For example, the home page loaded 3, 4 JS files (should not be too much), different files inside the global variables, including functions and variables, how to ensure that there is no naming conflict, of course, by giving the variable name and function name prefix is a very stupid but very effective way, Is there any way to avoid this naming pollution on the basis of the code, and also to implement the modularity?

　　

1. Implemented by module object.

As an example in a book, make a month translator and translate 1 into January. This is probably the case for beginners:

var names = [' One ', ' two ', ' three ', ' four ', ' five ', ' VI ', ' VII ', ' VIII ', ' IX ', ' Ten ', ' 11 ', ' 12 ']; function getmonthname (num) {    return names[num-1]+ ' month ';}; function Getmonthnum (str) {    for (var in names) {        if  (str = = (names[i]+ ' month '))            {return i+1;        }}    };

The names and getmonthname,getmonthnum in this domain are top-level, so if a variable named names is declared in another file or JS code, it will cause the program to be abnormal (getmonthname, Getmonthnum Such a long name is rarely repeated).

In a background management site, the functions that need to be written may be: Form validation, picture Carousel components, Dom loading, reading data from a certain input and then spell JSON, hover effect, popup layer .... If these functions or plug-ins declare global functions or global variables directly, you want to name them and you want to cry.

　　

So at this point, you should think of using a function closure to avoid the creation of scope naming pollution, the most simple modification of the above code is

　　

//anonymous functions are declared and called directly//names as a local variable does not pollute the top-level scope and cannot be accessed externally//externally exposed interfaces by means of binding functions for the Window object of the top level scope(function(){    varnames = [' One ', ' two ', ' three ', ' four ', ' five ', ' six ', ' VII ', ' VIII ', ' IX ', ' Ten ', ' 11 ', ' 12 ']; Window.getmonthname=functiongetmonthname (num) {returnnames[num-1]+ ' Month ';    }; Window.getmonthnum=functionGetmonthnum (str) { for(varIinchnames) {            if(str = = (names[i]+ ' month '))){                returnI+1; }        }    };}) ();

There's a downside to this approach, and we can't always bind all the function interfaces to the properties of the Window object, which is no different than declaring the function directly in the code.

So, one more step of optimization is to do the module object, very simple optimization, the function is bound to the module object, by accessing the properties of the module object to invoke the function:

　　

　　

varMonthtranslator = (function(){    varnames = [' One ', ' two ', ' three ', ' four ', ' five ', ' six ', ' VII ', ' VIII ', ' IX ', ' Ten ', ' 11 ', ' 12 ']; return{getmonthname:function(num) {returnnames[num-1]+ ' Month '; }, Getmonthnum:function(str) { for(varIinchnames) {                if(str = = (names[i]+ ' month '))){                    returnI+1; }            }        }    };}) ();

The above function is called directly using Monthtranslator.getmonthname (1); You can do it. Of course, you can also take the names as a Module object properties appear, this depends on the function design.

/*************/

These are the JS code of the modular, this opinion, some people may feel that you use this way of writing, "I think of a name prefix, I have to write such a troublesome function?"

But I think that good code style is a programmer's good character. It's great for people to be on their own.

　　

Recently like to use brackets ... Small brisk, good good

[JavaScript] Modular & named pollution-from programming Fine Solutions