概要分析
粗略地分析panel的源码我们知道,panel的href方式获取数据使用的是jQuery的ajax方法,ajax获取返回纯文本,该文本作为变量传给success回调,也就是说,在success内部交由panel组件进一步处理,我们来看看代码片段:
- $.ajax({
- url: _18e.options.href,
- cache: false,
- success: function(data){
- _190.html(_18e.options.extractor.call(_18d, data));
- if ($.parser) {
- $.parser.parse(_190);
- }
- _18e.options.onLoad.apply(_18d, arguments);
- _18e.isLoaded = true;
- }
- });
通过上面代码可以看出:获取远程数据data作为参数送给success回调,在success内部,我们看到panel使用自身的extractor函数对data文本进一步过滤,这个过滤过程不重要,我们可以忽略。过滤后的数据直接使用jQuery的html()追加到当前DOM,然后easyui使用paser对追加的html片段进行渲染。
分析到这个地方,我想关键点我们就都已经找到了,明确以下两点最重要:
data内部包含的javascript片段的执行顺序取决于jQuery的html函数的处理机制
data内部包含的javascript片段一定先于easyui的parser执行
html函数机制:
第一步.将DOM中的script标签剥离出来,从而形成两部分内容,一部分是不包含script标签的文本,假设为A;另一部分是若干个script片段,假设为B。
第二步.清空当前标签,用A追加到当前标签。
第三步.追加B到当前页面,而且对于B,有两种情况:
- script标签使用src方式连接到其它js文件的情况:jQuery使用ajax函数获取src里面的javascript代码,并且ajax设置为同步,从而能保证按照引入顺序执行;
- 直接写在script标签里面的javascript代码:jQuery使用window.execScript或者window[ "eval" ]执行javascript代码.
结论归纳:
分析到这里基本就清晰了,所以,最后href目标页面中的javascript脚本的注意事项有以下几点:
script标签必须放在body内
script标签一定要放在body标签内部,放在body标签外面的所有script标签都会被忽略,或者直接省略掉html,head,body这几个标签页可以。
script的位置无关性
script标签包含的脚本不管是放在DOM最前面,还是中间,还是后面,从执行效果上讲,都好比按顺序地放在了DOM的最后面。因为是先追加不带script标签的DOM,后处理分离出来的script。这也是放在某个DIV前面的脚本可以通过这个DIV的ID属性访问到该DIV的原因,这一点跟正常页面的加载顺序是有区别的。
失去作用的document.ready
比如目标页面的内容如下:
- <script type="text/javascript">
- $(function(){
- alert("这里先执行");
- });
- alert("这里后执行");
- </script>
要是在普通页面内,document.ready里面的脚本肯定是在后面执行的,当其作为panel的href目标页面的时候ready是没有任何效果的,因为这时候页面早就加载完成的,ajax当然不在ready检测的范围内。
不要操作不存在的组件实例
目标页面里面的javascript代码不应该存在直接利用easyui组件实例对象的操作,比如$("#panelId").panel('setTitle','shit'),除非你在次之前调用了$("#panelId").panel({...});来生成panel组件的对象实例。
后知后觉的easyui parser
如果data里面包含easyui支持的组件class,那么在$.parser.parse(_190)代码执行完后将会完成对组件的解析,所以最安全的方式是在onLoad回调中操作easyui组件的实力对象。
不要重复构造easyui组件
还需要注意的是,不要重复构造easyui组件了,如果在data内部通过脚本构造了某easyui组件,然后$.parser.parse检索到该组件样式,又构造一次,这纯粹是浪费,而且可能造成两次加载。
还有哪些组件类似?
layout,according等扩展自panel的上层组件使用href的时候,脚本执行顺序的规则是跟panel组件一致的。
管理员 世纪之光 : 2012年12月20日16:57:42 地下1层
管理员 世纪之光 : 2012年12月20日17:14:42 地下3层
管理员 世纪之光 : 2012年12月20日17:44:35 地下5层
管理员 世纪之光 : 2012年12月20日19:24:46 -48楼
管理员 世纪之光 : 2012年12月21日15:56:18 地下2层
管理员 世纪之光 : 2013年12月16日18:49:16 地下1层