In order to make the code easier to maintain and debug, dojo introduced AMD. This article introduces some basic usage of AMD.
How to load the Dojo module
In order to better understand the Dojo module, here is an example to explain how Dojo loads the module. As for what a module is and how to create a module, I will talk about it below.
Let’s first create a hello-amd.html file with the following content:
<html> <head> <meta charset="utf-8">head><body> <script < span class="hljs-attribute">src="./dojo/dojo.js" data- dojo-config="async: true">script> <script> require( ["app/counter.js" ], function < span class="hljs-params">(counter) { console.log(counter.getValue()); counter.increment(); console.log(counter.getValue()); counter .decrement(); console.log(counter.getValue()); }); script >body>html>
Create another counter.js file with the following content:
define(function(){ var privateValue = 0; return span> {increment: function(){ privateValue++ ; }, decrement: function(){ privateValue--; }, getValue: function() { return privateValue;} };});
When we learn other languages, such as java language, we can pass Package name and class name to find this class. A java class here can be regarded as a module. Then Dojo can also find the module by the file path and file name. For example, the above app/counter.js
file structure:
Then the counter here is the name of the module. You can refer to this module through the counter and call the methods inside. The result of executing this html is as follows:
010
If you want to put related data and operations together, then you can organize them through the Dojo module Together, and use the define method to define a module, the js file name is the module name. In the future, you can use this js name as the name of the module, and other modules can use this js name to refer to this module.
Module Reference Module
When the system is complicated, there must be situations where modules depend on other modules. In dojo, how to get references to other modules in the define method? As follows:
define([ "dojo/_base/declare", " dojo/dom", "app/dateFormatter"], function(declare, dom, dateFormatter){ return declare(null, {showDate: function(id, date){ dom.byId(id).innerHTML = dateFormatter.format(date);} }); });
app/dateFomatter is a module defined by ourselves. If you need to rely on dojo/dom and dojo/_base/declare, you only need to Before the parameter app/dateFomatter, pass in dojo/dom and dojo/_base/declare to the define method.
quote plugin
The code is as follows:
define([ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./templates/NavBar.html"], function(declare, _WidgetBase, _TemplatedMixin, template){ return < span class="hljs-keyword">declare([_WidgetBase, _TemplatedMixin], {// template contains the content of the file "my/widget/templates/NavBar. html" templateString: template });});
Note that you must add an exclamation mark when referencing the dojo plug-in! , As in the code above. dojo/text!
In order to make the code easier to maintain and debug, dojo introduced AMD. This article introduces some basic usage of AMD.
How to load the Dojo module
In order to better understand the Dojo module, here is an example to explain how Dojo loads the module. As for what a module is and how to create a module, I will talk about it below.
Let’s first create a hello-amd.html file with the following content:
<html> <head> <meta charset="utf-8">head><body> <script < span class="hljs-attribute">src="./dojo/dojo.js" data- dojo-config="async: true">script> <script> require( ["app/counter.js" ], function < span class="hljs-params">(counter) { console.log(counter.getValue()); counter.increment(); console.log(counter.getValue()); counter .decrement(); console.log(counter.getValue()); }); script >body>html>
Create another counter.js file with the following content:
define(function(){ var privateValue = 0; return span> { increment: function(){ privateValue++; }, decrement: function(){ privateValue--; }, getValue: function(){ return privateValue;} };});
When we learn other languages, such as java language, we can use the package Name and class name to find this class. A java class here can be regarded as a module. Then Dojo can also find the module by the file path and file name. For example, the above app/counter.js
file structure:
Then the counter here is the name of the module. You can refer to this module through the counter and call the methods inside. The result of executing this html is as follows:
010
If you want to put related data and operations together, then you can organize them through the Dojo module Together, and use the define method to define a module, the js file name is the module name. In the future, you can use this js name as the name of the module, and other modules can use this js name to refer to this module.
Module Reference Module
When the system is complicated, there must be situations where modules depend on other modules. In dojo, how to get references to other modules in the define method? As follows:
define([ "dojo/_base/declare", " dojo/dom", "app/dateFormatter"], function(declare, dom, dateFormatter){ return declare(null, {showDate: function(id, date){ dom.byId(id).innerHTML = dateFormatter.format(date);} }); });
app/dateFomatter is a module defined by ourselves. If you need to rely on dojo/dom and dojo/_base/declare, you only need to Before the parameter app/dateFomatter, pass in dojo/dom and dojo/_base/declare to the define method.
quote plugin
The code is as follows:
define([ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./templates/NavBar.html"], function(declare, _WidgetBase, _TemplatedMixin, template){ return < span class="hljs-keyword">declare([_WidgetBase, _TemplatedMixin], {// template contains the content of the file "my/widget/templates/NavBar. html" templateString: template });});
Note that you must add an exclamation mark when referencing the dojo plug-in! , As in the code above. dojo/text!