`

dojo1.7翻译 hello,dojo

    博客分类：
  • Dojo
 
阅读更多

原文地址：http://dojotoolkit.org/documentation/tutorials/1.7/hello_dojo/

 

欢迎来到Dojo世界！在本教程中。你将会学到如何去加载和使用dojo的一些核心功能。你也能学到关于dojo的异步模块加载的相关知识，知道如何在你的网页中使用他们，在运行出错时如何得到更多的帮助信息。

 

开始

 

我们将从在一个简单的HTML页面中加载google cdn远程dojo.js来开始。这很简单。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <!-- load Dojo -->
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
               data-dojo-config="async: true"></script>
</head>
<body>
    <h1 id="greeting">Hello</h1>
</body>
</html>

 运行Demo

 

这段代码中加载了dojo，并且可以使用dojo的功能了。在这里你可能注意到了，对于dojo1.7版本中，使用了data-dojo-config这个属性。这是HTML5的特性，这是被用来配置当加载dojo时的一些属性。他可以包含几个属性键值的集合。这里所起的作用和写一个script标签的作用是相同的。

 

CDN版本的dojo并不包含调试的全部功能。在开发时，建议使用下载的SDK版本。

 

与以前的版本相比较。以前的版本叫sync mode(legacy mode)会自己的加载所有的dojo base。在1.7的版本中，只要设置了async:true这个属性，将会切换成async mode(AMD mode)。在这种模式下，一些模块，如fx,xhr和query将不会自己被加载。将只会默认的加载自己的功能。这将真正的实现了需要时再加载的机制。使用1.7版本，将会使你的代码更小运行更快。

 

所有的教程都将使用dojo1.7的基础版本，这有利于你能快速在你的页面中进行开发。

 

使用async模式，将会使用新的AMD加载器来加载模块。这种新的加载器明显的比以前的加载器加载速度要快。

 

定义和加载模块

1.7版本的dojo定义模块时更快在定义文件了。如"my/module/id"，这是使用1.7版本来定义模块。事实上，这种定义是直接映射到脚本文件上的，这也就是说，你加载一个"my/module/id"这个模块，也就是加载了"my/module/id.js"这个文件(加载的机制很复杂，但对使用者来说，了解这么多就已经足够了)

 

为了定义和加载模块，对于加载器来说，定义了两种重要的功能。require，用来加载模块。define，用来定义模块。这两种功能都有两个参数，一个是需要模块的ID集合。另一个是加调函数。这通过一个例子能更好的理解。

// In demo/myModule.js (which means this code defines
// the "demo/myModule" module):
 
define([
    // The dojo/dom module is required by this module, so it goes
    // in this list of dependencies.
    "dojo/dom"
], function(dom){
    // Once all modules in the dependency list have loaded, this
    // function is called to define the demo/myModule module.
    //
    // The dojo/dom module is passed as the first argument to this
    // function; additional modules in the dependency list would be
    // passed in as subsequent arguments.
 
    var oldText = {};
 
    // This returned object becomes the defined value of this module
    return {
        setText: function(id, text){
            var node = dom.byId(id);
            oldText[id] = node.innerHTML;
            node.innerHTML = text;
        },
        restoreText: function(id){
            var node = dom.byId(id);
            node.innerHTML = oldText[id];
            delete oldText[id];
        }
    };
});

 这个例子是定义了一个模块，这个模块有一个父类dojo/dom并且定义了两个方法setText和restoreText，现在我们来使用这个模块。

// Require the module we just created
require(["demo/myModule"], function(myModule){
    // Use our module to change the text in the greeting
    myModule.setText("greeting", "Hello Dojo!");
 
    // After a few seconds, restore the text to its original state
    setTimeout(function(){
        myModule.restoreText("greeting");
    }, 3000);
});

 运行示例

 

这个示例是把内容<h1 id="greeting">元素替换成了"Hello Dojo!"，然后在3秒后恢复成原值。注意，我们没有加载其它的js，加载器会自己的加载运行所必须依赖的其它js模块。

在legacy mode中可以使用dojo.require来加载其它模块，在saync mode中可以使用dojo/require! 插件来加载其它模块。这么做是为了可以兼容以前版本。

 

等待DOM加载

大多部的js框架都提供了等待DOM加载完成再运行js的功能，dojo也不例外。在1.7版本中，这种功能是以一种特殊的模块插件来实现。插件可以像别的模块一样的加载，只不过在加载时，其名称后要加一个感叹号来区分。DOJO提供了名叫dojo/domReady插件。只要简单的在require或define中加入这个模块就可以在DOM加载完成后调用回调函数。

require(["dojo/dom", "dojo/domReady!"], function(dom){
    var greeting = dom.byId("greeting");
    greeting.innerHTML += " from Dojo!";
});

 运行示例

 

上面的例子中，简单的在greeting这个元素中加了一些文字，这个功能只能在DOM已经被加载后才能被执行。还有，要注意，在模块名称后有一个感叹号。没有这个感叹号，dojo/domReady将是只被简单的认为是一个模块而被做为参数传给回调函数。

 

加入视觉效果

只是在文字中加入<h1>并没有什么兴奋的。我们来给它加上一个动画。有个模块可以被用来加入动画效果，这个模块是dojo/fx。好，让我们来加入一个dojo/fx的slideTo方法来看看。

require(["dojo/dom", "dojo/fx", "dojo/domReady!"], function(dom, fx){
    // The piece we had before…
    var greeting = dom.byId("greeting");
    greeting.innerHTML += " from Dojo!";
 
    // …but now, with a fun animation!
    fx.slideTo({
        top: 100,
        left: 200,
        node: greeting
    }).play();
});

 运行示例

 

就像你看到的那样，我们加入了一个新的模块依赖。dojo/fx，然后使用这个模块来加入了动画的效果。

 

0
顶
0
踩
分享到：
| dojo1.7翻译 定义类(Classy JavaScript ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics