The code is still faulty, that is, $ cannot be used after jquery is imported. To learn more about requirejs, follow these steps ):
Require (['jquery ', 'underscore', 'backone'], function ($, _, backbone ){
// Some code here
});
This code is original, but some parts refer to the blog and requirejs source code of instructor Ruan Yifeng.
Before testing moduleloader, use
<SCRIPT type = "text/JavaScript" src = "./moduleloader. js"> </SCRIPT>
Introduce moduleloader. js
So far I have found a limitation (it is better to solve the limitations of the versatility of the module loaders, of course there are many other limitations ):
A. Because the _ load function in moduleloader uses dynamic append <SCRIPT>... </SCRIPT> method on the <body> label. Therefore, this module loader can be used only after the <body> is loaded.
B ,...
1. [Code] moduleloader. js
/**
* The JS module loader is simple to implement and the code is original. Reprinted with the original author name.
* @ Author jxqlovejava
*/
(Function (window, document, undefined ){
VaR moduleloader = function (){
};
VaR _ loadedfiles = {};
// Dynamically and asynchronously load JS files
VaR _ load = function (jsfilepath, callback ){
If (! Jsfilepath)
Return;
VaR JS = Document. createelement ('script ');
JS. setattribute ('src', jsfilepath );
JS. setattribute ('type', 'text/JavaScript ');
JS. onload = Js. onreadystatechange = function (){
If (! This. readystate | this. readystate = 'loaded' | this. readystate = 'complete '){
If (callback & typeof callback = "function "){
Callback ();
}
JS. onload = Js. onreadystatechange = NULL;
}
};
Document. Body. appendchild (JS );
}
/**
* File is the module File Path (it must be suffixed with. JS)
* Dependencyfiles is the path array of the module on which the file module depends.
* Callback is the callback function to be executed after loading.
* @ Param string file flag icon
* @ Param string []
* @ Param callback
*/
Moduleloader. Prototype. Require = function (file, dependencyfiles, callback ){
If (_ loadedfiles [file]) {// if it has been loaded, the system returns
Console. Log (File + "already loaded! ");
If (callback & typeof callback = "function "){
Callback ();
}
Return;
}
Dependencyfiles = dependencyfiles | [];
For (VAR I = 0; I <dependencyfiles. length; I ++ ){
VaR curfile = dependencyfiles [I];
If (_ loadedfiles [curfile]) {
Console. Log (curfile + "already loaded! ");
Continue;
}
Else {
_ Load (curfile );
_ Loadedfiles [curfile] = true;
}
}
// After loading all the dependent modules, load the file module and execute the callback function after loading.
_ Loadedfiles [file] = true;
_ Load (file, callback );
}
Window. moduleloader = moduleloader;
}) (Window, document );
2. [file] jquery. js ~ 262kb download (9)
3. [Code] modulea. js
Function Test (){
Console. Log ("modulea: Test () function execution! ");
}
Function add (a, B ){
Return A + B;
}
4. [Code] moduleb. js
// The getjqueryversion () function can be called only after the jquery. js module is loaded.
Function getjqueryversion () {http://www.huiyi8.com/guoqi?
Console. Log ("moduleb: getjqueryversion>" + $. FN. jquery );
}
// The testadd function can be called only after the modulea. js module is loaded.
Function testadd (a, B, expected ){
Console. Log ("moduleb: testadd> (" + A + "+" + B + ") =>" + expected + (a + B) = expected ));
}
5. Authorization code example test.html
<! Doctype HTML>
<HTML>
<Head>
<Meta http-equiv = Content-Type content = "text/html; charset = UTF-8">
<Title> index page </title>
</Head>
<Body>
<P> Hello world! </P>
<SCRIPT type = "text/JavaScript" src = "./moduleloader. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
VaR moduleloader = new moduleloader (); // instantiate the module loader object
// Test and load the independent module modulea. js
Moduleloader. Require ("modulea. js", [], function () {test () ;}); // load the modulea. js module and test the test () function.
Moduleloader. Require ("modulea. js"); // reload the modulea. js Module
// Test and load the moduleb. js module dependent on the jquery. js module and the modulea. js Module
Moduleloader. Require ("moduleb. js", ["jquery. js", "modulea. js"], function (){
Testadd (1, 2, 3 );
Getjqueryversion ();
});
</SCRIPT>
</Body>
</Html>
?
