【Dojo 1.x】笔记2 使用服务器环境及使用模块
2018-06-24 01:38:29来源：未知 阅读 ()
又开坑了。上次静态html页面完成本地module的引用，算是成功了，但是并不知道是怎么运作的，没关系慢慢来。
我用的环境是VSCode，这次因为官方说要在服务器环境下运行，所以就用上了VSCode的简单服务器插件Live Server.
1. 构造起目录
一个js文件，用于定义自己的模块，用define方法。
一个html文件，组织页面，调用js文件里写好的模块。
关于js文件怎么写，代码给出：
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]; } }; } );
出效果再看解释。
html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorial: Hello Dojo!</title> </head> <body> <h1 id="greeting">Hello</h1> <script> var dojoConfig = { async: true, packages: [{ name: "modules", location: location.pathname.replace(/\/[^/]*$/, '') + '/modules' }] }; </script> <script src="https://cdn.bootcss.com/dojo/1.10.4/dojo.js" data-dojo-config="async: true"></script> <script> require([ 'modules/myModule' ], function(myModule) { myModule.setText('greeting', 'Hello Dojo!'); setTimeout(function() { myModule.restoreText('greeting'); }, 3000); }); </script> </body> </html>
2. 运行效果与代码解释
按下VSCode右下角的GoLive图标，直接在服务器环境执行html文件。
出现文字，Hello Dojo!，三秒后变成Hello。
接下来对js文件里定义的模块进行解释。
2.1 模块代码解释
define方法有两个参数，一个是这个模块需要用到的其他模块名称，这里是dojo下的dom模块（自带模块）
第二个参数是方法，此方法的参数与第一个参数（字符串数组）顺序严格对应，名字随意，用于传递模块的实例。
它返回了一个匿名对象，包含setText和restoreText两个方法，意思是填入文本、恢复原来文本。
这就对应了三秒的“Hello, Dojo!”和恢复“Hello”的两个动作了。
整个模块定义不难理解，设置返回值即可（暴露出去，让外部访问该模块的功能）
2.2 HTML代码解释
3 总结
没啥好总结的，那个dojoConfig现在比较感兴趣，以后学习深入应该会知道干嘛用的吧。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- Jquery插件写法笔记整理 2020-03-29
- 麻雀虽小五脏俱全 Dojo自定义控件应用 2020-02-20
- manifest.json 解析--手机web app开发笔记（三-2) 2019-08-14
- es6学习笔记（二） 2019-08-14
- 前端笔记之微信小程序（四）WebSocket&Socket.io&am 2019-08-14
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
