Xiao A is a front-end engineer of a certain entrepreneurial team, responsible for writing project Javascript programs.
Global variable conflict
According to his own experience, Xiao A first extracted some commonly used functions and wrote them into functions and put them in a public file:
var _ = {
$: function(id) { return (id); },
getCookie: function(key) { ... },
setCookie: function(key, value) { ... }
};
Xiao A puts these functions in the _ object to prevent too many global variables from causing conflict. He told the rest of the team that if anyone wants to use these functions, just introduce them.
Xiao C is Xiao A's colleague. He told Xiao A: his page has introduced a class library called, and this class library will also occupy this global variable, which will conflict with the "in-chief". Xiao A thought to himself that it is a third-party library and it is probably difficult to modify, but it has been spread out on many pages and it is impossible to modify it. In the end, Xiao A had no choice but to change the occupied global variables.
At this time, Xiao A found that putting functions in a namespace can reduce the probability of global variable conflicts, but it does not solve the problem of global variable conflicts.
rely
With the development of the business, Xiao A has written a series of function libraries and UI components, such as tag switching components, which require calls and functions in it.
One day, the new colleague Xiao D and Xiao A reported that they had quoted it on the page, but their functions were not normal. Xiao A found the problem at a glance. It turned out that Xiao D did not know that he had relied on and did not add references to these two files. So he immediately made changes:
<script src=""></script>
<script src=""></script>
<script src=""></script>
However, the function is still abnormal. At this time, Xiao A taught Xiao D a lesson: "Everyone said it is a dependency, so the dependent party must be placed before the dependent party." It turned out that Xiao D put the and then put it behind.
Xiao A thought to himself that he is the author and naturally knows the dependence of components, but it is hard for others to say, especially newcomers.
After a while, Xiao A added functions to the tag switching component. In order to implement this function, the functions in the process need to be called. At this time, Xiao A discovered a serious problem, and he needed to add references to all the called pages! ! !
After a while, Xiao A has optimized and this component is no longer dependent, so it removes references from all the pages used to improve performance. Something big happened to him when he made the modification. The MM in the test team told him that some pages were abnormal. When Xiao A saw it, he suddenly realized that other functions of some pages used functions in the middle, and he removed the reference to this file and caused an error. In order to ensure the function is normal, he restored the code again.
Xiao A thought again, is there a way to modify the dependencies without modifying the page one by one, and does not affect other functions?
Modular
When Xiao A was shopping in the Internet, he accidentally discovered a novel modular encoding method that can solve all the problems it encountered before.
In modular programming, each file is a module. Each module is created by a function called define. For example, after replacing it into a module, the code will become like this:
define(function(require, exports, module) {
exports.$ = function(id) { return (id); };
= function(key) { ... };
= function(key, value) { ... };
});
All interfaces provided to the exports object are added. exports is a local variable, and the code of the entire module does not occupy half of the global variable.
So how do you call the interface provided by a certain module? For example, it depends on and:
define(function(require, exports, module) {
var _ = require(''), util = require('');
var div_tabs = _.$('tabs');
// ...... Other codes
});
A module can obtain the interfaces of other modules through the local function require. At this time, the variables _ and util are both local variables, and the variable name is completely controlled by the developer. If you don't like _, you can also use base:
define(function(require, exports, module) {
var base = require(''), util = require('');
var div_tabs = base.$('tabs');
// ...... Other codes
});
Once you want to remove or add, just modify it:
define(function(require, exports, module) {
var base = require(''), ui = require('');
var div_tabs = base.$('tabs');
// ...... Other codes
});
Loader
Due to the lack of native browser support, if we want to encode in a modular way, we must rely on something called a loader.
Currently, there are many implementations of loaders, such as seajs. The JRaiser class library also has its own loader.