How to use JavaScript dynamic call functions (two methods)

Recently, more and more users have emphasized the interaction of the UI interface. JavaScript (JS), which is just a supporting role, has gradually become the main character for a dragon and occupies a major role.

For example, the recently popular ASP. net mvc can be seen directly by Include JQuery.

After using MVC for a while, Xiaolong even felt that the Controller in MVC was under JS control. In this way, it was a big question how to make the UI work independent and switch it to the artist.
It seems that the subsequent artists can only draw and pull pictures. They must use front-end control languages such as JS and Flash to enjoy a good taste.

Here, Xiao Long will introduce how to use JavaScript to call functions dynamically. At this time, we need to first introduce the prerequisites so that readers can understand where the following technologies can be applied.
Generally, dynamic calls are used. Basically, the backend dynamically generates JS Code and is called by the front-end JS framework.

The purpose of this operation is to dynamically set the bar, style, and materials of the UI. Another possibility is to keep the expansion of the JS framework, so that developers can, you can compile additional code to expand the functions of the original JS framework based on the features of each program.

The following describes how to use a dynamic call function. Currently, Xiao Long knows the following two methods:
Copy codeThe Code is as follows:
Function myAlert (value ){
Document. write ("myAlert-" + value + "<br> ");
}
$ (Function (){
Eval ("myAlert") ("test ");
Window ["myAlert"] ("test ");
}

In general, it is more formal to use the window object to check whether a function exists. It is more risky to use eval for elasticity.

In addition, directly following the above implementation will pose a great risk. Once the called function does not exist, the entire screen will go wrong. Therefore, you need to add the attention method in use, from this point of view, eval cannot be used, because eval is used to generate the function object, while window only queries whether there is an object. Therefore, if the function does not exist, eval will directly report an error, in this way, the reader should be able to understand the differences.
The sample code is as follows:
Copy codeThe Code is as follows:
Function myAlert (value ){
Document. write ("myAlert-" + value + "<br> ");
}
$ (Function (){
Var fnName = "myAlert ";
Var fn = window [fnName];
If (typeof fn = "function "){
Fn. apply (window, ["window-test"]);
}
}

Finally, I came up with another method, as shown below:
Copy codeThe Code is as follows:
Function myAlert (value ){
Document. write ("myAlert-" + value + "<br> ");
}
$ (Function (){
If (typeof (myAlert) = 'function '){
MyAlert ("typeof-test ");
}
}

Although this method sacrifices some elasticity, it can be used to limit the naming principles of subsequent developers, such as Init () Load () in the framework, this method can be used to fix the usage, so as not to spread out and facilitate subsequent maintenance costs.