A brief analysis of Javascript's use of include/require_javascript techniques

1. javascript include
Javascript without the include statement is sometimes annoying, especially since there is a dependency relationship between scripts and you cannot control it dynamically at all. Loading scripts. Generally speaking, the simplest include is basically like this. Of course, we use jQuery to request the script.

Copy code The code is as follows:

include: function (jsurl) {
if (jsurl == null || typeof(jsurl) != 'string') return;
var js = document.createElement('script');
js.type = 'text/javascript';
js.charset = 'utf-8';
js.src = jsurl;
$.ajaxSetup ({ cache : true });
                                                                                                                             >
Basic usage

It should be noted that the function actually sends a GET request, which is handled by getScript() of jQuery.ajax, but the processing after GET is different from $.getScript(), so the usage method will be different. getScript() generally needs to write dependent functions into its callback function, such as: $.getScript('some.js', function() { // Do things that depend on some.js files.});

And our include here does not need to be written like this, but directly:

include('some.js');

//Here you can directly write dependencies on functions defined in the some.js file

Enable caching

The other thing about file caching is that by default $.getScript will add a timestamp after the url, so that the browser will not be allowed to read the cached file during the second request. If we getScript("some .js"), and finally it will become GET some.js?_23432434534235 or the like when requesting. This is a strategy to force no caching. It is better in the development stage, but in the production stage, it will cause users to The browser does not cache our js script every time, which has a great impact on efficiency. We should add the version stamp after the js script ourselves, such as some.js?v=1, instead of changing it every time. timestamp, so you need to use: $.ajaxSetup({ cache : true }); This will turn off jQuery’s feature of automatically appending a timestamp to the URL.

requireJs

If your scripts have a large number of interdependencies, and you need to dynamically decide which scripts to load, then I recommend using requirejs. Its basic usage is:

require(["some/module", "a.js", "b.js"], function(someModule) { // do something}); One requirement is that your front-end js should be developed as a module. If the front-end logic is relatively complex, using modules for front-end development should be a good choice. The modular development of JS will be discussed in future articles. Let’s talk more specifically, here is just a brief introduction. If you are interested in this aspect, you can go to the

requireJs

official website to have a look.