Write a frame from the beginning (ii): The seed of the inoculation frame _

In the previous article we introduced the AMD specification, the definition and loading of asynchronous modules, and we completed the defined sections. Next, let's complete the loading section.

We could have used define to define the module, so how do we use it now? We just store the defined modules in the repository, and we need a way to use them when we use them.

Let's start with define to define some modules:

Define ("A", [], function () {//No dependent module return 1;}); Define ("B", ["a"], function (a) {//has a dependent module return ++a;}); Define ("C", ["a", "B"], function (b) {//has two dependent modules  we will use this module for return a+b;});

　　

There are 3 modules defined here, one of which is not dependent, and two are modules with dependent modules.

Then we need a way to use a well-defined module: (for the Apply and call methods, you can step into my other article: to talk about apply and call)

var noop = function () {}; An empty function prepared for the Apply method; function use (name) {///parameter: module name if (Modules[name]) {//if module defined: var module = modules[name];//Create a copy if (! module.entity) {//If the instance does not exist, the description is created for the first time var args = [];for (var i=0;i<module.dependencies.length;i++) {//Traversal dependency list modules[ Module.dependencies[i]].entity?  An instance of the dependent module is present Args.push (modules[module.dependencies[i]].entity)://Get the instance directly (cache method), Args.push (This.use ( Module.dependencies[i])); Otherwise get once};module.entity = Module.fn.apply (NoOp, args); Use the Apply method to extend the};return module.entity for the module instance; Later calls can be called directly to the cache}else{throw new error ("Error:" + name + "is not define");//If no module is defined, throw an error directly.}};

　　

Here we define a method that uses a module that invokes a defined module by its name. In the case of a module that was used once, we put it into the cache so that it can be invoked directly when it is used again.

Then let's use this approach to our defined modules:

var d = use ("C"); Console.log (d)//Output 3

　　

This allows us to use any of the modules we have defined, while redefining the module without the same module name causing the module to be overwritten.

So how do we use this method to extend our namespace? Obviously, the define and use methods cannot be used directly, because our modules are defined in the parameters of the factory method, and the two methods are defined within the factory method, so we are not able to get them.

So let's change these two methods.

This is from Vuejs:

var modulemap = {}; Module warehouse function require (ID) {//parameter is the name of the module, which is used to define the module directly with a number idif (Modulemap[id])//If the module already exists return modulemap[id].exports;// Returns the instance directly and ends the code block var module = Modulemap[id] = {//declares a new object exports:{},//initializes the instance id:id,loaded:false//the load state};modules[id].call (Module.exports, module, module.exports, require); Extend the module to the warehouse using the call method module.loaded = true; Set module load status return module.exports; Returns the module instance};return require (0); Returns the call of the first module

　　

This method directly puts the function of the definition module into the parameters of the factory method, simplifies many programs, and makes the invocation more convenient. So the next thing to do is to register the framework module with the method on the namespace.

This part we put in the next article to write.

Write a frame from the beginning (ii): The seed of the inoculation frame _