【Dojo 1.x】笔记1 入门
Dojo是个框架 ,是个js框架,现在除了这一点什么都不知道,就这么上手了。
ps:不建议Web初学者看我的笔记,这个要有一定积累才能看。
在<body>标签内写这么一点代码:
<body> <h1 id="greeting">Hello</h1> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="async: true"></script> </body>
按下F12,没报错,算是用CDN引用成功了Dojo。
如果F12报错无法访问dojo.js,请到BootCDN引用,现在暂时不自己开本地服务器引用,以后再说。
1. AMD:异步模块
自1.7起,Dojo就启动了AMD异步模块定义的支持,原因是为了更好地支持大型复杂Web程序。
可见,Dojo是一个重量级框架。
2. 全局函数
算是加载了dojo.js这个文件后的两个入口吧,是两个全局函数:define和require
上面提及,Dojo支持异步模块定义了,那么define就能定义一个模块,而requie就能用你定义的模块。
——有关为什么用define和require这种奇怪的写法,请阅读http://dojotoolkit.org/documentation/tutorials/1.10/modern_dojo/
通常,模块是一个简单的js文件。
以下通过简单的HTML DOM操作来演示define和require,Dojo中操作DOM的模块是'dojo/dom', 'dojo/dom-construct'两个。
demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorial: Hello Dojo!</title> </head> <body> <h1 id="greeting">Hello</h1> <script src="https://cdn.bootcss.com/dojo/1.10.4/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>
我换掉了CDN引用,这样会快一些。
可见HTML文本改变了,引用了dom和dom-construct两个模块后,就能用dom.byId这个方法和domConstruct.place这个方法进行DOM操作了。
代码解释
require有两个参数。
第一个是字符串数组,代表模块的id(或者带路径的模块名称),为什么是这样写,请学习AMD知识或者node.js或者前端js模块化编程。如果下载了SDK,是能在文件夹里找到dom.js和dom-construct.js这两个文件的。
第二个是回调函数。回调函数的参数就是以上引入的模块。回调函数的参数的名字可以自定义,但是顺序是和第一个字符串数组的模块顺序一致的。
由于AMD机制和异步操作,这就意味着,等待模块加载完成后,回调函数才会正式运作,但是这是自动的,在后台自己做完一切。大可不必管交叉调用js文件和模块的问题,AMD机制自己会在后台完成模块之间的交叉调用问题。
3. 说两句话
理解异步操作、js模块化,是Dojo学习中相当重要的。与普通的js框架不同,Dojo更合适开发复杂的大型Web平台。
有兴趣的同学可以学习一下ES6的模块化编程,或者学习一下npm+webpack这种新型的后端写法,node.js也是可以看看的。
目前只学到这里,暂时还是双击打开html文件查看代码成果,下一个笔记就要用本地服务器打开了,可以用IIS,也可以用XAMPP,无所谓。
暂时等这种静态写法学完后,就试着用npm包管理机制写一写试试,混搭Vue什么的。