http://dojotoolkit.org/documentation/tutorials/1.6/hello_dojo/
Hello Dojo!
Welcome! In this tutorial,we'll start from the ground up,with a simple HTML page. By the end of this tutorial,we'll have loaded Dojo into the page,as well as put some of the core functions to work. We'll touch on Dojo's modular structure,and discuss how to load dependencies into the page to make a richer experience.
- Difficulty:Beginner
- Dojo Version:1.6
Getting Started
Our starting point is a simple HTML page. We want to load Dojo into the page and add some code to signal our success.
This is as vanilla as it gets. We've put the Dojo script tag into the <head> — it could also have gone at the end of the <body> — with a src attribute indicating the URL where thedojo.jsfile is located.
dojo.ready
Readiness,as it relates to an HTML page and the browser,can be a slippery moment to pin down. We need both the DOM to be ready for manipulation,and Dojo (and any indicated dependencies — more on that in a minute) to be loaded before any of our JavaScript code runs. Becausereadyhas different meanings in different browsers,Dojo provides a reliable,cross-browser function for the purpose:dojo.ready. We pass it a function,and that function gets executed at thereadymoment.
dojo.readyshould cause an alert Box to pop up when the page loads. Handily,Dojo has a version property that's useful for demos like this. As we get further into learning Dojo,the alert is going to get increasingly annoying,and we'll want to learn about logging to a browserconsole. But for now,we'll stay focused,and move on.
Loading Dojo is great,however it's more likely that you want to manipulate the page you just loaded Dojo into. We'll be digging into this in much more detail in other tutorials. For now,though,we'll simply get a reference to our <h1> and update its content.
"greeting"
).innerHTML +=
",from "
+ dojo.version;
@H_403_22@
>
@H_403_22@
@H_403_22@
@H_403_22@
@H_403_22@
View Demo
This time,in our ready function,we usedojo.byIdto retrieve the element in the DOM with the given ID,and append Dojo's version string to itsinnerHTMLproperty.
Note that you can have as many calls to dojo.ready as you like,and each function will be executed in the order they were provided. In practice,if you have more than a few lines of code,it's common to define a named (non-anonymous) function and pass that todojo.ready:
Note that when we pass in the function,we're passing it by name alone,without any parentheses after it.
If you came here for Dojo's Hello World,then we are long done. But earlier,we mentioned something about "indicated dependencies" — let's get back to that.
Modules
There's a bit more going on here than meets the eye. What doesdojo.jsactually get you? Dojo is a modular toolkit,with apackage systemthat allows you to load only the code you need into your page and to make managing dependencies a lot easier. One of the perennial problems with JavaScript development has been the lack of a native package system for loading code (in the same way as you might require/import modules or classes with Java,PHP,Python etc.) Dojo fills that gap with an intuitive approach to code organization and a simple API (dojo.require) to indicate a dependency on a particular module.
What that means for now is that when we loaddojo.js,we aren't loading the entire Dojo Toolkit,only thebasemodules. Our Dojo script tag loads a set of key functionality such as the package system,events,Ajax,DOM helpers,and other very commonly needed functionality.
Module loading for more shine
So,if settinginnerHTMLon that <h1> didn't quite make your day,let's add some shine. Dojo "base" includes the animation framework for visual effects and a couple of the more common effects (dojo.fadeOutanddojo.fadeIn). That's well and good,but we want the greeting to slide on to the page. For that we'll usedojo.fx.slideTo. Thedojo.fxmodule is not already included in ourdojo.js,so we'll need to load it:
TheslideToeffect we want is a part of thedojo.fxmodule. Thedojo.requireline states the dependency,and asks the loader to load the file if it is not already available. There's no new script tag to fiddle with,and crucially,the rest of our initialization needn't change — we still usedojo.readyand our code will only run once the DOM is ready and all dependencies are loaded.
The next part is to put what we loaded to use. Like all property animations in Dojo,we pass in an object with a node reference,and any other properties to configure the animation. We'll be looking closer at animations in Dojo in a future tutorial.
View DemoConclusion
Getting started with the Dojo Toolkit is as simple as adding a script tag,but the broad scope of the toolkit is placed at your fingertips,as and when you need it. In this tutorial we've taken the first step towards putting Dojo to work in your web sites and applications. In future tutorials in this series we'll visit each of the major groups of functionality — from DOM helpers to Ajax,effects,events and more — exploring and explaining each step of the way.
原文链接：https://www.f2er.com/dojo/291445.html