Dojo学习（一）—Hello Dojo

Dojo框架详解

最新推荐文章于 2015-12-30 09:51:22 发布

转载最新推荐文章于 2015-12-30 09:51:22 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuzhaoyang/p/3803751.html

文章标签：

#javascript #ViewUI

本文介绍了Dojo框架的基本概念，包括其核心组件、使用方法及AMD机制。并详细讲解了如何利用Dojo进行DOM操作，提供了丰富的示例代码，帮助读者快速上手。

1.Dojo简介：

　　是一款优秀的javascript库，包含dojo、dijit、core、dojox等一系列的核心包，功能强大。

2.Dojo使用：

　　使用Dojo有两种方式：一种是使用CDNs；另一种是调用本地的Dojo文件。

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js" data-dojo-config="async: true"></script>

3.Dojo机制：

Dojo使用了Asynchronous Module Definition (AMD)方式，具体的使用方式请查看Introduction to AMD tutorial。

　　　　AMD定义了两个全局变量：require和define。使用require可以调用需要的Dojo模块，使用define可以定义自己的模块。

示例：

<script>
        require([
            'dojo/dom',
            'dojo/dom-construct'
        ], function (dom, domConstruct) {
            var greetingNode = dom.byId('greeting');
            domConstruct.place('<i> Dojo!</i>', greetingNode);
        });
    </script>

　　AMD采用异步方式，因此需要回调函数，将模块实例传入到回调函数中，但参数顺序一定要和引用模块的顺序一致，命名也最好一致。

　　如上例中dojo/dom、dojo/dom-construct对应后面的dom、domConstruct

　　使用define定义一个模块

　　　值得注意的是定义模块的文件位置直接关系到后面的使用路径。

示例：demo/ myModule.js

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];
        }
    };
});

使用方式：

  <script>
        require([
            'demo/myModule'
        ], function (myModule) {
            myModule.setText('greeting', 'Hello Dojo!');
 
            setTimeout(function () {
                myModule.restoreText('greeting');
            }, 3000);
        });
    </script>

4.Dojo中的dom/domReady!

　　在js中要引用HTML节点为其添加样式、事件等时使用，其作用是等待DOM文件加载完成后，使用js，相当与window.onload的作用。

　　要注意的是，该模块必须放置到所有引用模块的后面，在回调函数参数中不必添加。

示例：

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

参考地址：http://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/

转载于:https://www.cnblogs.com/liuzhaoyang/p/3803751.html