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
