Dojo 初探
Dojo 是一个由 Dojo 基金会开发的 Javascript 工具包, 据说受到 IBM 的永久支持,其包括四个部分: dojo,dijit,dojox,util
Dojo 第一例像其他 Js 框架一样,Dojo 可以通过引用本地的 在我们加载了 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorial: Hello Dojo!</title> </head> <body> <h1 id="greeting">Hello</h1> <!-- load Dojo --> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="async: true"></script> <script> require([ 'dojo/dom','dojo/dom-construct' ],function (dom,domConstruct) { var greetingNode = dom.byId('greeting'); domConstruct.place('<em> Dojo!</em>',greetingNode); }); </script> </body> </html>
首先, 先来看模块名称数组, 而后是回调函数,回调函数有两个参数 最后在回调函数中,调用 自定义 AMD 模块定义自己的模块可以通过 define([ // 列出当前模块所依赖的模块 'dojo/dom' ],function(dom){ var oldText = {}; // 模块加载时的返回值 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]; } }; }); 将这个文件保存在 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorial: Hello Dojo!</title> </head> <body> <h1 id="greeting">Hello</h1> <!-- 配置 Dojo --> <script> // 在加载 dojo.js 之前添加 dojoConfig 变量用于配置 dojo // 其效果与在 script 标签上添加 data-dojo-config 属性一样 var dojoConfig = { async: true,// 注册 demo 包的位置,确保能正确加载自定义模块 packages: [{ name: "demo",location: location.pathname.replace(//[^/]*$/,'') + '/demo' }] }; </script> <!-- 加载 Dojo --> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> <script> require([ 'demo/myModule' ],function (myModule) { myModule.setText('greeting','Hello Dojo!'); setTimeout(function () { myModule.restoreText('greeting'); },3000); }); </script> </body> </html> 如上代码引入 等待 DOM 加载完成一般在开发 Web 程序中,我们需要等待页面 DOM 元素加载完成之后再执行代码, 可以通过一种特殊 AMD 模块实现 —— “插件”,插件的引用方式与其他模块一样, 只不过会在模块标识符的最后加上感叹号(!),Dojo 提供了 require([ 'dojo/dom','dojo/domReady!' ],function (dom) { var greeting = dom.byId('greeting'); greeting.innerHTML += ' from Dojo!'; });
当然,如果我们把代码块放到了 使用本地 Dojo 源之前的例子使用的都是 CDN 来加载 Dojo,同样我们可以引用本地的 Dojo 源, 不过需要稍稍修改一下 dojo 的配置,来引入 dojo 的各个包 var dojoConfig = { async: true,baseUrl: '.',packages: [ 'dojo','dijit','dojox','demo' ] }; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |