Introduction to AMD Modules (translation)

Http://dojotoolkit.org/documentation/tutorials/1.10/modules/index.html

Dojo supports modules written in asynchronous model definition (AMD), making your programs easier to read and debug. In this tutorial, we will explain the fundamentals of AMD and how to use AMD.

This tutorial is useful if you have previously used the 1.7 version and want to migrate the code. This tutorial focuses on introducing AMD.

Overview

Asynchronous module definition (AMD) mode is introduced into dojo at the time of dojo1.7. Compared to the previous module definition mode, the new schema includes complete asynchronous operations, a truly portable package, a better management model, improved debugging support, and more. AMD is a community standard, which means that the modules you write can also be loaded into the ADM loader of other libraries. In this tutorial we introduce AMD and how to use it.

What is a module?

A module refers to a value that can be accessed with a reference. If you want to load multiple data or functions on a module, it must be presented as an attribute on an object. If we just define a simple value, for example var tinyModule = ‘simple value‘ , the AMD module is redundant for this, but it is valid. The beginning of the module is to break down your code into small chunks of logic that can handle specific functions. If you want to define a person that contains attributes such as names, addresses, and events, as well as functions, then it makes sense to use a module definition. In a file system, a module is stored in a separate file.

How to create a module

With AMD, you create a module by registering it with the loader.

A quick aside Here-loader? What ' s a loader? The loader is the code (yes, it's just javascript!) that handles the logic behind defining and loading modules. When you load dojo.js or require.js , you get a AMD loader. The loader defines functions for interacting with it- require and define.

The global function define allows you-register a module with the loader. Let's look at a few examples:

You can create a module by registering with the loader in AMD.

This brings up a concept, the loader. What is an loader? The loader is a piece of code (just JavaScript code) that processes logic after the model is defined and loaded. When you load Dojo.js or requires.js, you get the AMD loader. The loader defines the require and define functions.

The global function define function allows you to register a module with the loader. Take a look at the example below.

1 define (5);

This is one of the simplest but valid examples, with a registered value of 5.

1 define ({2     Library: ' Dojo ',3     version:1.104 });

To do something more interesting, by the code above, we define a module that contains two attributes.

1Definefunction(){2     varPrivatevalue = 0;3     return {4Incrementfunction(){5privatevalue++;6         },7 8Decrement:function(){9privatevalue--;Ten         }, One  AGetValue:function(){ -             returnPrivatevalue; -         } the     }; -});

In this example, we define a function through define. The function contains the sub-functions and data are stored in the form of the loader as a module. When the code is defined, a closure is used so that private variables that can be defined cannot be accessed for external code. But it can be returned and set by the function inside the module as a property of the module.

How to load a module

For starters, we need-understand how modules is identified. In the order to load a module, you need some the identifying it. Similar to the Module/package systems of other programming languages, an AMD module are identified by its path and file Nam E. Let's Save the code from the above example in a folder:

First we need to understand how the module is identified. In order to load the module, we first need to know how to identify the module. Similar to other programming languages, AMD also identifies modules by path and file name. For example, the following code:

1 app/counter.js

Let's also add a loader (Dojo of course!) and an index.html-the entry-point for our application. This gives us the following file structure:

We also need our Dojo and index.html,index.html to be the entry point for our program. The file structure is as follows:

1 /2    index.html3     /dojo/4     /app/5         Counter.js

The code for the Index.html page is as follows:

1 <HTML>2     <Body>3         <Scriptsrc= "Dojo/dojo.js"Data-dojo-config= "Async:true"></Script>4         <Script>5 require ([6                 "App/counter"7             ], function(counter) {8 log (Counter.getvalue ());9 counter.increment ();Ten log (Counter.getvalue ()); One counter.decrement (); A log (Counter.getvalue ()); -             }); -         </Script> the     </Body> - </HTML>

Let's take a look at what we've done just now.

1. In App/counter.js, we called the Define loader to register a module. Note that the module we define is a reference to an object, not a constructor-which means that each function of the model is cited for the same object. In general, the module returns a constructor, but in some cases, a singleton object can also be returned.
2. In the file system, our custom model is stored under a folder in the Index.html file sibling directory. The AMD loader (Dojo.dojo.js) is located in the same folder as the Index.html page in the sibling directory. At the time of loading the module, we were able to load the App/counter.js module and get the value it returned without any additional configuration.
3. In the Index.html page, we called require to load the "App/counter" module. You can do this by require(["app/counter"]) loading the module. If the code inside refers to other modules, you don't need to refer to all the modules. If you want to reference a model, you need to provide a callback function. The load function ensures that the referenced module is loaded and passed as a parameter to the callback function. Just like any other function, you can name your parameters at will-there's nothing to do with the name of the module when the parameter is named. However, it is a good way to encode the name of a parameter when it is consistent with the module names.

Module Loading module

Our previous examples are simple uses of the Define function. When an application uses a good modular structure, many modules naturally depend on each other. The Define function automatically loads other modules that your module relies on. Before defining the value of the module, the other modules that the module relies on are listed in the Define function.

1 define ([2"Dojo/_base/declare",3"Dojo/dom",4"App/dateformatter"5],function(declare, DOM, Dateformatter) {6     returnDeclareNULL, {7Showdate:function(ID, date) {8Dom.byid (id). InnerHTML =Dateformatter.format (date);9         }Ten     }); One});

This example demonstrates some more typical features of AMD applications:

This example shows more of the AMD application features.

1. Multiple dependent-dojo/dom and app/dateformatter (assuming we define this) are included in the dependency list.
2. A constructor is returned-an appropriate name for the module, such as App/datemanager. The code that uses the module is shown below.

1 require ([2     "App/datemanager"3function(datemanager) {4     varnew  Datemanager (); 5     New Date ()); 6 });

Before using dojo development, AMD is one of the concepts you must be familiar with. Declare is another important function, if you are not familiar with it dojo/_base/declare , you can see the tutorial below. Tutorial

Using plugins

In addition to the regular modules, the AMD loader calls a module with special features-plug-ins. Plug-ins are used to extend the new features of the loader compared to loading normal modules. Add special characters to the back of the module! , you can identify that the module was requested as a plug-in. Data is passed directly to the plugin processing. With some examples we can see that this will keep the code clean. Dojo provides several default plugins, respectively,, and dojo/text dojo/i18n dojo/has dojo/domReady , let's look at how these plugins work.

Dojo/text

When you need to load a string from a file, Dojo/text is used. Once called, the module is cached, which reduces network requests. HTML string loading requires the Dojo/text module. Enter the template to load the widget, the code for the request module is as follows:

1 //In "My/widget/navbar.js"2 define ([3"Dojo/_base/declare",4"Dijit/_widgetbase",5"Dijit/_templatedmixin",6"Dojo/text!. /templates/navbar.html "7],function(declare, _widgetbase, _templatedmixin, template) {8     returndeclare ([_widgetbase, _templatedmixin], {9         //template contains the content of the file "my/widget/templates/navbar.html"Ten templatestring:template One     }); A});

dojo/i18n

dojo/i18nLoads language resource bundles according to the Web browser ' s user locale. Its usage looks like this:

DOJO/I18N will load different language resources depending on the location of the browser user. Use the following:

1 //In "My/widget/dialog.js"2 define ([3"Dojo/_base/declare",4"Dijit/dialog",5"Dojo/i18n!. /nls/common "6],function(declare, Dialog, i18n) {7     returnDeclare (Dialog, {8 Title:i18n.dialogTitle9     });Ten});

For more information on how to use i18n reference internationalization tutorial.

Dojo/has

Dojo ' s loader includes an implementation of the Has.js feature detection API; The dojo/has plugin leverages this functionality for requiring modules conditionally. Its usage looks like this:

The Dojo loader contains APIs that use the Has.js detection feature. The plugin feature of Dojo/has can be used to detect some preconditions for loading modules. The code looks like this:

1 //In "My/events.js"2 define ([3"Dojo/dom",4"Dojo/has!dom-addeventlistener?" /events/w3c:./events/ie "5],function(DOM, events) {6     //events is "MY/EVENTS/W3C" if the "Dom-addeventlistener" test was true, "my/events/ie" otherwise7Events.addevent (Dom.byid ("foo"), "click",function(){8Console.log ("Foo clicked!");9     });Ten});

Dojo/domready

Dojo/domready is the replacement for dojo.ready . It's a module that simply doesn ' t resolve until the DOM are ready

Dojo/domready is a module that replaces the Dojo.ready, which monitors whether the DOM is loaded properly. The example code is as follows:

1 // In "My/app.js" 2 function (DOM) {3     // This function does not execute until the DOM was ready 4     Dom.byid ("Someelement"); 5 });

Note that we do not set the parameters of the module in the parameters of the callback function. This is because the value returned is worthless-we just take this module to control the callback function. Some modules or plug-ins that do not need to be called directly can be placed on the last side of the module list when requested, so that the module does not need to be reflected in the parameter list of the callback function.

The parameter module requires an exclamation mark even if there is no data transfer. Without an exclamation point, you just load activated the Dojo/domready module only, and don't use its features.

Summarize

The basic understanding of AMD provided in this tutorial would get you started with Dojo development, but you'll soon fin D yourself running into more complicated scenarios. Read the Advanced AMD Usage tutorial to learn-deal with:

This tutorial provides the basic usage of your AMD. But you will find yourself in more complex situations. You can take a look at Advanced AMD USAGEAMD Premium usage Tutorials to address these issues.

• The configuration loader allows the loader to load packages under different local paths and different services.
• Create a lightweight module package.
• Load a different version of the same module or library.
• Load non-AMD code.

Introduction to AMD Modules (translation)