Javascript dojo usage Summary

Make a framework Summary of the dojo framework used in previous projects for reference.

Main Components... 1

Development notes... 3

DojoCodeConventions... 3

Script library in the form of dojo... 4

Dojo build. 4

Dojo toolbox. 5

Recommended materials... 6

Reference instance... 6

Main Components

It consists of three parts:

Dojo: Framework Core

Dijit: Ui part based on dojo. The topic is controlled by CSS.

Dojox: Other extensions

Util: Packaging style check and other tools [inSource codeIn the release package]

Steps for page application library

Dojo initial Library	Form 1 <SCRIPT type = "text/JavaScript"> Djconfig = {parseonload: True, isdebug: true }; </SCRIPT> <! -- Now load dojo. js; Note No djconfig attribute --> <SCRIPT type = "text/JavaScript" src = "scripts/dojo. js"> </SCRIPT> Form 2 <SCRIPT type = "text/JavaScript" src = "scripts/dojo. js" djconfig = "parseonload: True, isdebug: True"> </SCRIPT> Note: If you write <ScriptType = "text/JavaScript" src = "scripts/dojo. js"/>Form cannot work normally
Reference Library Dijit and CSS Dijit is used only when dijit is used.	<% # If debug %> <Style type = "text/CSS"> @ Import "scripts/dojo/dijit/themes/Tundra/tundra.css "; @ Import "scripts/dojo/resources/dojo.css "; </Style> <SCRIPT type = "text/JavaScript" src = "scripts/dojo. js" djconfig = "parseonload: True, isdebug: True"> </SCRIPT> <SCRIPT type = "text/JavaScript"> Dojo. Require ("dojo. parser "); Dojo. Require ("dijit. dijit-all"); // contains all dijit </SCRIPT> <% # Else %> <% -- This is the release directory. execute scripts \ dojo \ util \ buildscripts \ My. BAT to create it -- %> <Style type = "text/CSS"> @ Import "scripts/DOX/dijit/themes/Tundra/tundra.css "; @ Import "scripts/DOX/dojo/resources/dojo.css "; </Style> <SCRIPT type = "text/JavaScript" src = "scripts/DOX/dojo. js" djconfig = "parseonload: True"> </SCRIPT> <SCRIPT type = "text/JavaScript"> Dojo. Require ("dojo. parser "); Dojo. Require ("dijit. dijit "); </SCRIPT> <% # Endif %>
Dijit usage [HTML Tag extension form]	<Div class = "formcontainer" dojotype = "dijit. layout. tabcontainer"> <Div dojotype = "dijit. layout. contentpane" Title = "Personal Data"> <Label for = "first_name"> First name: </label> <Input type = "text" name = "first_name" id = "first_name" dojotype = "dijit. Form. validationtextbox" Trim = "true" propercase = "true" required = "true" size = "30" invalidmessage = "you must enter your first name"/> <br/> ...

The idea of the dojo library is organized according to small functional blocks. Therefore, we can see that the dojo dijit dojox directory contains many files. functions included in JS include: browser environment attributes, language extensions, asynchronous programming, Dom programming, xhr programming, object-oriented and dojo loaders. Other functions are included in independent JS files, for example, HTML Parsing

Dojo/parser. js reference this function using dojo. Require ("dojo. parser") [dijit is recommended for HTML Tag extension in Dojo]

Development notes

Ø if the demo file is viewed locally, it cannot be correctly displayed in firefox3 by default. The modification method is as follows:

Enter about: config in the address bar of Firefox, and change security. fileuri. strict_origin_policy to false.

Develop suggestions and tracking

Console. dir

Console. log error debug

Library

It is best to use the source code script library, and then use the dojo Packaging System to package as needed during project release to reduce the JS file size.

Ø recommended tools

Because the client script processing needs to be tracked, browser tools are very important.

Firefox: firebug

IE: developer toolbar, httpwatch professional is a better tool

Dojo code conventions

Code File naming conventions in Dojo

The common module is a lowercase letter.

If a module defines a constructor, its name is capitalized, indicating that the module defines a class.

The names of a few scripts and modules start with a permanent underscore, indicating that they are private and are only used by other modules internally. These scripts are automatically loaded when necessary and can be ignored.

According to this rule, you can see the file category of the script library.

Script library in the form of dojo

/// <Reference Path = "../intelliisense/dojo. aspx"/>
Dojo. Provide ("My. Shape ");
Dojo. Declare (
// The Name Of The constructor function (class) created...
"My. Shape ",
// This is where the superclass (if any) goes...
Null,
// This object contains everything to add to the new class's prototype...
{
// Default property values can go in prototype...
Color: 0,
// Here is the single prototype method...
Setcolor: function (color ){
This. Color = color;
}
}
);

The above are classes in the form of dojo

Dojo build

Http://www.ibm.com/developerworks/cn/web/0912_shenjc_dojobuild/. This is a package description.

Dependencies = {
// Each object in the layers attribute specifies how to merge multiple JavaScript resources into one resource.
Layers :[
{
Name: "dojo. js ",
Dependencies :[
"Dojo. parser ",
"Dojo. String"
]
},
{
Name: "../dijit. js ",
Layerdependencies: ["dojo. js"],
Dependencies :[
"Dijit. dijit ",
"Dijit. layout. contentpane ",
"Dijit. layout. tabcontainer ",
"Dijit. Form. validationtextbox ",
"Dijit. Form. datetextbox ",
"Dijit. Dialog"
]
},
{
// The Name Of The packaged resource file, relative to the dojo directory
Name: "../My/demodojo. js ",
// Package other resources dependent on this layer
Layerdependencies :[
],
// Name of the module contained in the package Resource
Dependencies :[
// After the module name is specified, package Program Automatically load and merge corresponding files
"My. demodojo"
]
}
],
// Prefixes a set. Each element in the Set provides a ing from the module name to the module path. [The path name is relative to the dojo/
Prefixes :[
// The default dojo path contains
["Dijit", ".../dijit"],
// ["Dojox", ".../dojox"],
["My", ".../My"]
]
}

In the above example, the JS files are put into three files: dojo. js dijit. js and demodojo. js. In this way, the number of files downloaded by the published system is very small.

Dojo toolbox

You can download this tool from official sites, including API help [installation in online status] and packaging tools.

Recommended Materials

Http://dojotoolkit.org/

Http://www.dojocn.com/

Mastering dojo http://www.pragprog.com site can download example code, the book has a Chinese version "proficient in Dojo"

This book introduces all aspects of dojo

Ebook can also be downloaded on http://ppurl.com

Reference instance

Http://jsfkit.codeplex.com