Getting started with my module Loading System v17

The purpose of the module Loading System is to introduce dependency management, modules, and include mechanisms in Js.

I heard someone doesn't need it. Just write a simple tutorial.

Download mass. js first.

Then, create an HTML page, index.html, And the content is

<! Doctype HTML> 
In this example, index.html can correctly reference mass. js.
We can use Firefox to open this page and print the log under firebug, indicating that the loading is successful!
Then we create a new JS file and put it in the same directory named hello. js. Of course, this module is named "hello". Of course, you can change the file name to be the same as that of the module.
define("hello", function(){    var helloMass = function(){        alert("hello mass!")    }    var helloAMD = function(){        alert("hello AMD!")    }    var helloWorld = function(){        alert("hello world!")    }    return {        helloMass: helloMass,        helloAMD: helloAMD,        helloWorld: helloWorld    }});
Then, modify index.html.
<! Doctype HTML> 
Then you can use IE, FF, or chrome to open it, and then you will see three alert pops up.
Let's talk about how to call the module. Require has two parameters: the first is a string, indicating the module to be called, and the second is the callback function. For example, if I want to call the AAA. js file, and AAA. js and Mass. js are in the same directory, call this method.
$.require("./aaa", function(){   });
Of course you can. The suffix of ". js" is not required.
$.require("./aaa.js", function(){   });
"./"Indicates searching in the current directory.
If I want to rely on two modules, AAA. js and BBB. JS, and they are all in the same directory as mass. js.
$.require("./aaa,./bbb", function(a, b){    alert(a+b)//3});
The content of AAA. js and BBB. JS is very simple.
//aaa.jsdefine("aaa", function(){   return 1});
//bbb.jsdefine("bbb", function(){   return 1});
The page is changed to the following:
<! Doctype HTML> 
Now let's look at the dependencies between modules. Each module should handle its own dependencies. Now there is a CCC. JS, which is also located in the same directory as mass. js. It depends on the above AAA. js.
// CCC. jsdefine ("CCC ",[". /AAA "], function (){//. /indicates that AAA and CCC are in the same directory: return a + 10 });
So when we call the CCC module on the page, we don't need to call AAA. js. It will load the AAA module on its own.
<! Doctype HTML> 
Now let's take a look at how to use JS files that reference other directories. Create a DDD folder under the Mass. js directory, and then create a DDD. js file. The DDD module depends on the CCC module.
// DDD. jsdefine ("DDD ",[".. /CCC "], function (c ){//.. /indicates searching in the directory at the upper level. Anyone who wants to program will understand it. Very common sense, do not need to learn too much. Return C + 100 });
Then I reference them like this on the page.
<! Doctype HTML> 
Let's take a look at remote file calls. It is certain that all resources are not placed on the same server. For example, I have a moduleHttp://files.cnblogs.com/rubylouvre/20120830__amd.jsMedium
The content is
// 20120830_amd.jsdefine ("remote", function () {return {name: "This is a remote file", address: "On the cnblog server "}})
Then, enter the URL directly during the call.
<! Doctype HTML> 
After the full text, if you want to know how to load jquery, you can take a look at the foreign articles. After all, AMD is very popular abroad and can be found. Or wait for my next tutorial.