Dojo学习(一)—Hello Dojo

it2026-04-10  5

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/domdojo/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

最新回复(0)