Getting Started with Dojo: first knowledge of Dojo

Dojo is the full name of Dojo Toolkit, founded in 2004, is currently the development of a variety of JS Toolkit leader. Dojo provides a complete end-to-end solution for the development of rich Internet Applications (RIA), including a core JavaScript library, an easy-to-use widget (widget) system and a test framework, and the open source development community of Dojo is constantly providing new functionality to it.

Dojo Features

The features of Dojo Toolkit can be divided into 4 different parts. This partitioning allows developers to keep the library size to a minimum, ensuring that application performance is not affected by a large number of JavaScript library downloads. For example, if you only need Ajax to support performance, you only need to include the base package, and you don't need to include the extended Dijit UI components, you'll learn more about Dojo loading different modules later in this series.

Base

The base package provides the foundation for Dojo Toolkit, including features such as DOM usage functions, CSS3 DOM query based on selectors, event handling, basic animations, and Dojo class-based object-oriented features. This article mainly introduces Base.

Core

The Core package contains additional features that are not included in the Base. Typically, these attributes are not used as frequently as the attributes in base, so they are loaded separately to relieve the burden of the base package. From this point on, the Core package provides some useful components, including advanced animation drag-and-drop, I/O, Data Management, internationalization (i18n), and browser history management. The Core package is no longer within the scope of this article.

Dijit

The Dijit package contains an extended UI library of Dojo widgets and components. Some examples of these widgets include dialog boxes, calendars, color palettes, tooltips, and trees. It also includes some form controls, which provide more functionality than standard HTML form controls, and some complete layout management options. The 3rd part of this series will cover the Dijit features in depth.

DojoX

Dojo eXtensions (DojoX) contains the individual sub-items of the toolbox. Most of the features in DojoX are experimental, but there are some stable components and features.

Download Dojo

As with other JS toolkits, Dojo does not require a special environment and configuration. You can use it just by downloading it.

It's: http://dojotoolkit.org/download/

If you don't want to download it locally, you can also get it via CDN and add the following code to your page:

<script src= "http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" ></script>

The drawback of CDN is that when the CDN environment is unstable, the referenced files may not load correctly, so it is recommended to download the files locally so that the correct access to your site can be guaranteed.

Say Hello World

In order to verify that the Dojo Toolkit we downloaded is correct, it is customary for us to write a dojo version of the HelloWorld program. The function we want to implement is to dynamically output the Hello World string in the page.

You first need to create a new page and add a reference to the dojo.

<script type= "Text/javascript" src= "Resources/dojo/dojo.js" ></script>

Add the following JS code to the page:

        Dojo.addonload (function () {            dojo.create ("div", {innerHTML: "Hello world!"}, Dojo.body ());        });

OK, open this page in your browser to see how it works:

Here is the code for the entire page, make sure the path to dojo.js is correct before copying.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">        Dojo Edition Heloworld        Dojo.addonload (function  () {            dojo.create ("div", {innerHTML: "Hello world!" }, Dojo.body ());        });     </script></body>
Getting Started with Dojo: first knowledge of Dojo