Home > Others

Understand the dojo. Require Mechanism

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Dojo provides a very powerful JavaScript control library.
You do not need to have any basic knowledge before using dojo. you can use the script to remotely link to dojo (Dojo. JS), you can also. download js to the local device and load it with the script tag.

If you do not know much about dojo, refer to the following materials:

  • Dojo 1.4 cheat sheet
  • Dojo base source tree (1.4.3)
  • Dojo Reference Guide

In general, dojo. JS, jquery. JS, or prototype JS have many common features for developing Web applications, including:

  • Javascript language helpers
  • Object Tool
  • Array Tool
  • Dom operations
  • Standard event mechanism
  • Ajax & cross-origin requests
  • JSON Tool
  • Simple Effects
  • Browser compatibility

 

In addition, Dojo also has many functions that are not available in other JavaScript libraries (such as jquery and ext). One of the most important functions is the modular mechanism-Module System (dojo.require()
). JavaScript and the browser itself and other JavaScript libraries do not support this feature, and dojo solves this problem well.

Module System

dojo.require('my.module')
It is used to load JavaScript files. The function is similar to the script tag.

Assume that you have a local development environment. The directory structure is as follows :(http://localhost:8888
.)

index.html
IsSimple dojo. js page
.

 

<! Doctype HTML>
<HTML lang = "en">
<Head>
<Meta charset = "UTF-8"/>
<Title> dojo </title>
</Head>
<Body>
<SCRIPT src = "dojo/dojo. js"> </SCRIPT>

</Body>
</Html>

Assume that we want to use the Flickr API to obtain data. At this time, we need to use cross-origin requests. However, these functional modules are not in the dojo base library. We need to load the required dojo module:

 

<! Doctype HTML>
<HTML lang = "en">
<Head>
<Meta charset = "UTF-8"/>
<Title> dojo </title>
</Head>
<Body>
<SCRIPT src = "/dojo. js"> </SCRIPT>
<SCRIPT src = "/dojo/IO/script. js"> </SCRIPT>

</Body>
</Html>

Here we can use the script label to solve this problem. There is also another way, which reflects the purpose of the module system: we usedojo.require()
Loaddojo.io.script
 

 

<! Doctype HTML>
<HTML lang = "en">
<Head>
<Meta charset = "UTF-8"/>
<Title> dojo </title>
</Head>
<Body>
<SCRIPT src = "/dojo. js"> </SCRIPT>
<SCRIPT>
Dojo. Require ("dojo. Io. script ");

// Note: do not include the. js
</SCRIPT>
</Body>
</Html>

 

Pass
dojo.require()
We have obtained a module system that provides a series of components required for developing complex web pages. The following content focuses on the features of the module system:

  • Cache Management
  • Namespace management
  • Path Management
  • Dependency Management

First,Dojo. Require () will avoid repeated loading. If the Script script is cached by the browser, dojo will call the cached resources to avoid unnecessary HTTP requests. In fact, you can call
Dojo. Require (), no matter how many calls
Dojo. Require () and dojo ensure that the same module is loaded only once.

 

You can also create your own modules. let's go back to the example of the Flickr API. To develop a large web application that uses the data of the Flickr, we need to be able to organize and manage the JavaScript code well. in the final analysis, we need to create a namespace named flickrapp to save all the Logic Functions of the application. to achieve this goal, we will update the original directory structure and createThe flickrapp. js file:

Flickrapp. JS seems to be just a JS file, but if you look at it from the perspective of dojo, you will find that it is actually a module. To let dojo identify it as this module, we use
dojo.provide()

Method to initialize this JS file and change it to a dojo module. we add the following code to the file:

Dojo. Provide ("flickrapp"); // similar to doing flickrapp = {};

 

dojo.provide()
Creates a string (flickrApp
) Named object structure (namespace). Here we createThe object of the flickrapp. After the object is created, we can define the application just like the attributes of the object (
flickrApp
)
In various aspects, the following is an example of flickrapp. JS:

Dojo. Provide ("flickrapp"); <br/> // start creating the application logic for my Flickr app <br/> flickrapp. getdata = function (){};Now we can use dojo.require()
To load our custom modules to the HTML page: <! Doctype HTML>
<HTML lang = "en">
<Head>
<Meta charset = "UTF-8"/>
<Title> dojo </title>
</Head>
<Body>
<SCRIPT src = "/dojo. js"> </SCRIPT>
<SCRIPT>
Dojo. Require ("dojo. Io. script ");
Dojo. Require ("flickrapp ");

</SCRIPT>
</Body>
</Html>

The question is, how does dojo know?What is the storage location in the file system of the flickrapp. js module? The answer is the path management mechanism of dojo.
dojo.provide()
Position of the module. The reference point is the upper-level directory of dojo. js. For example
Http: // localhost: 8888/dojo. JS, so
Http: // localhost: 8888/directory level (the upper level of dojo. JS) to locate all modules. To illustrate this problem, we will change the file structure of the example again to make it look
More organized:

At this time, all application-related code is under the directory of the flickrapp (namespace). In this directory, we can further split the application into different modules. The first module isData. js module, including obtaining
The logical functions of the data on the Internet, as well as cross-domain functions, and returned data. Based on this change, we needAdd data. js
The dojo. Provide () statement tells him about the change of the new directory structure (
data.js
）：

 

// Below is similar to doing var flickrapp ={}; flickrapp. data ={}; <br/> dojo. provide ("flickrapp. data "); <br/> // Note: do not include. JS <br/> flickrapp. data. getdata = function (){};

As we mentioned earlier, dojo will (http://localhost:8888/dojo/dojo.js
) To start locating each module, so here dojo locates ourdata.js
The module path isHttp: // localhost: 8888/flickrapp/data. js. At this time, our HTML code should also be modified accordingly:

 

<! Doctype HTML>
<HTML lang = "en">
<Head>
<Meta charset = "UTF-8"/>
<Title> dojo </title>
</Head>
<Body>
<SCRIPT src = "/dojo. js"> </SCRIPT>
<SCRIPT>
Dojo. Require ("dojo. Io. script ");
Dojo. Require ("flickrapp. Data
");
</SCRIPT>
</Body>
</Html>

So far, let's think about it. Is it really necessary to do this? Why can't we use this module system, but simply put all the Logic Functions of the application in a Javascript file? Of course. However, the purpose of the dojo implementation module system is to manage code more conveniently and compress and optimize code with tools.

Next we will discuss the most important part: dependency management.

The module can contain references to other modules, that is, other modules can be require () in the module. dojo will help you manage these modules and let us go back to our HTML page:

 

<! Doctype HTML>
<HTML lang = "en">
<Head>
<Meta charset = "UTF-8"/>
<Title> dojo </title>
</Head>
<Body>
<SCRIPT src = "/dojo. js"> </SCRIPT>
<SCRIPT>
Dojo. Require ("dojo. Io. script ");

Dojo. Require ("flickrapp. Data ");
</SCRIPT>
</Body>
</Html>

We can see that here we will require this on the HTML pageThe dojo. Io. Script. js module, in fact we can
Put the require () statement
In the data. js module
The data. js module depends on
For the dojo. Io. Script. js module, Dojo manages this dependency.
The data. js module is as follows:

Dojo. provide ("flickrapp. data); <br/> dojo. require ("dojo. io. script "); <br/> // Note: dojo. require () shocould be used after dojo. provide () <br/> flickrapp. data. getdata = function (){};

In this case, our HTML page only needs to contain onerequire()
Statement (Data. js module)
.

<! Doctype HTML>
<HTML lang = "en">
<Head>
<Meta charset = "UTF-8"/>
<Title> dojo </title>
</Head>
<Body>
<SCRIPT src = "/dojo. js"> </SCRIPT>
<SCRIPT>
Dojo. Require ("flickrapp. Data ");
</SCRIPT>

</Body>
</Html>

Dojo manages these dependencies to ensureData. js depends on
dojo.io.script.js。

In addition, dependency management also requires a response notification, that is, a response notification after all dependent modules are loaded. This caseYou can use the function dojo. Ready () to implement this function,
Dojo. Ready () registers a function, which is called when all DOM nodes are loaded and all modules and their dependent modules are loaded and parsed. The usage is as follows:

 

 

<! Doctype HTML>
<HTML lang = "en">
<Head>
<Meta charset = "UTF-8"/>
<Title> dojo </title>
</Head>
<Body>
<SCRIPT src = "/dojo. js"> </SCRIPT>
<SCRIPT>
Dojo. Require ("flickrapp. Data ");
Dojo. Ready (function (){

// Note that dojo. Ready () is a closed cut for dojo. addonload () added in Dojo 1.4
// Run code from data. js and all its Dependencies safely
});

</SCRIPT>
</Body>
</Html>

dojo.ready()
Can be used at any time, anywhere, or evenIn the callback method of dojo. Ready (), for example
:

Dojo. require ("some. module "); <br/> dojo. ready (function () {<br/> // run code from some. module. JS and all its Dependencies safely <br/> dojo. require ('some. other. module '); <br/> dojo. ready (function () {<br/> // run code from some. other. module. JS and all its Dependencies safely <br/> });

 

 

As mentioned aboveDuring require (), dojo will start searching from the top-level directory of dojo. JS, such
Require ('some. Other. module') will
Some/other/module. JS:

 

In fact, Dojo also provides a way for us to define the default path of dojo. Let's update the structure of our application, as shown below:

We can see that our module-Some. Other. Module. js has already exceeded the path of the default module of dojo. We need to tell the structure change of dojo to be used.
dojo.registerModulePath()：

 

 

<! Doctype HTML>
<HTML lang = "en">
<Head>
<Meta charset = "UTF-8"/>
<Title> dojo </title>
</Head>
<Body>
<SCRIPT src = "/JS/dojo1.4.1/dojo. js"> </SCRIPT>
<SCRIPT>
Dojo. registermodulepath ("some", "../Some /");

Dojo. Require ("some. Other. Module ");
</SCRIPT>
</Body>
</Html>

Passdojo.registerModulePath("some", "../../some/")
The position of the User-Defined module. Here, we tell dojo that some of our custom modules are at the top two levels of dojo. js (../../some
At this time, dojo will know how to parse this namespace (some.other.module
) And LoadSome. Other. Module. js file. At this moment, Dojo can recognize all
../../some/
. The main reason for this is security. The browser does not support JavaScript access to the file system. If you
Djconfig
You will find that this object can also be used todojo.registerModulePath()
"Work:

 

<! Doctype HTML>
<HTML lang = "en">
<Head>
<Meta charset = "UTF-8"/>
<Title> dojo </title>
</Head>
<Body>
<SCRIPT type = "text/JavaScript">
VaR djconfig = {modulepaths: {"some": ".../../Some /"}};

</SCRIPT>
<SCRIPT src = "/dojo/dojo1.4.1/dojo. js"> </SCRIPT>
<SCRIPT>
Dojo. Require ("some. Other. Module ");
</SCRIPT>
</Body>
</Html>

In fact, dojo has a lot of content about the module system. Here we mainly use local dojo. In fact, Dojo can also be loaded in cross-origin mode (from AOL or Google CDN ), therefore, the module system also supports this feature. The underlying implementation of the module system is based on xhr to request the module content. These will change when you use the CDN version of dojo, at this time, the module system will convert to the Cross-origin method (based on script elements ).

Outside of dojo

In fact, the idea of these module systems can also be used without dojo. Yui3.0 also has a similar implementation. Likewise, there are some independent control libraries dedicated to implementing the idea of a module system, one of which is requirejs.
It is implemented based on dojo. If you are interested, download and study it.

 

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
understand scitools get the permalink sliding drawer mechanism wordpress the field require require once dojo get install dojo

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More