dojo组件渲染过程
没想到第一篇文章就被选为推荐文章,所以要更加加把劲写了,这里科普性质的介绍一下dojo组件渲染过程。
首先是dojo组件的引用机制,引用dojo组件有两种方式:
一:通过script标签
二:通过dojo.require
第一种方式就没什么可说的了,第二种方式是一种比较方便但是又比较影响性能的方式,dojo.require入参是组件名,字符串参数,dojo的组件名参照类似java包的方式,通过路径名和文件名确定(有例外),比如dijit.form.Button,这个组件的脚本就在dojo包目录同级目录向下找,首先dojo包,也就是dojo.js所在目录,和这个目录平级应该有个叫dijit的目录,下面有个form目录,下面有个Button.js文件,button组件代码就在这个脚本中(有例外),dojo.require就是通过上述方法确定该脚本的路径,然后通过同步的ajax请求,请求到这个组件的脚本代码,再通过eval的方式加载到页面中,执行结果跟script标签引用一样效果,但是需要注意,dojo.require通过同步的ajax请求,而且一个浏览器能同时发送的请求数有限,所以会导致页面加载比较慢,这个请求可以使用浏览器缓存。
然后是dojo组件渲染,不论是手动还是自动调用dojo.parser.parse(),它会遍历到body中所有节点,找到带自定义属性dojoType的节点,这样的节点就是dojo需要渲染的节点,dojoType的值就是需要用哪个组件进行渲染,比如:
<div dojoType="dijit.form.Button"></div>
在渲染之前首先需要确定页面上已经加载了这个叫做"dijit.form.Button"的组件,否则页面会报脚本错误,dojo会new一个对应的组件实例,然后通过dijit组件框架把这个div传给它进行渲染,如果组件继承了dijit._Template的话,一般页面上写div或者font span都可以,因为template的作用是指定一个outerHTML,将页面上不论什么节点完全替换掉,所以页面上写什么都无所谓了,另外在写html时候需要注意,有innerHTML属性的节点需要用</xx>结束,比如div,<div></div>,而没有innerHTML属性的节点需要使用/>结束,比如input,<input/>,否则兼容性上会有一些问题。
欢迎光临我的独立博客http://bwong.me