How to dynamically call functions with JavaScript (two ways)

How to dynamically call functions with JavaScript (two ways)_javascript skills

WBOY

Release： 2016-05-16 17:34:43

Original

1302 people have browsed it

Recently, users are placing more and more emphasis on the interaction of UI interfaces. Gradually, JavaScript (hereinafter referred to as JS), which was only a supporting role to a little dragon, has become the protagonist, occupying a large part of the use.

For example, the recently popular ASP.NET MVC can directly include JQuery.

After using MVC for a while, Xiaolong even felt that the Controller in MVC was controlled by JS at all. How to make the UI work independent and hand it over to the artist also felt like a big question.
It seems that the artists in the back can only draw and pull images. They must know JS, Flash and other front-end control languages to be popular.

Here, a little dragon will introduce how to use JavaScript to dynamically call functions. At this time, we need to introduce the premise first, so that readers can understand where the following technology can be applied.
Generally, dynamic calls are used. Basically, the back-end dynamically generates JS code, which is called by the front-end JS framework.

The purpose of this is to dynamically set the fields, styles, data, etc. of the UI. Another possibility is to retain the extensibility of the JS framework so that subsequent developers can You can write additional code to expand the functionality of the original JS framework based on the characteristics of each program.

Let’s introduce it below. As far as Xiaolong knows, there should be the following two ways of dynamic calling function

Copy code The code is as follows:

 
function myAlert(value) { 
document.write("myAlert - " value "
"); 
} 
$( function () { 
eval("myAlert")("test"); 
window["myAlert"]("test"); 
} 

Generally speaking , it is more formal to use the window object to query whether the function exists. It is risky to use eval because it is too flexible.

And if you implement it directly as above, there will be a huge risk. Once the function is called. If it does not exist, the entire screen will be wrong, so when using it, you need to add a judgment expression. From this perspective, eval cannot be used, because using eval is to generate the function object, and window only queries whether there is an object. , so when the function does not exist, eval will directly report an error, so readers should be able to better understand the difference. 🎜>
The code is as follows:

function myAlert(value) { document.write("myAlert - " value "
"); } $(function () { var fnName = "myAlert"; var fn = window[fnName];

if (typeof fn == "function") {

fn.apply(window, ["window - test"]); 
} 
} 

Finally, I came up with another method myself, as follows

Copy code

The code is as follows:

function myAlert(value) { document.write("myAlert - " value "< br>"); } $(function () { if (typeof (myAlert) == 'function') { myAlert("typeof - test");

}

} 

Although this method will sacrifice some flexibility, on the contrary, it can be used to restrict the naming principles of subsequent developers, such as Init() Load in the framework () and so on. In this way, the usage method can be fixed, so that it will not spread out, and it will also facilitate subsequent maintenance costs.