51Testing软件测试论坛

标题: javascript脚本封装 [打印本页]

作者: 雨中漫步_012 时间: 2018-4-3 16:27
标题: javascript脚本封装
   很多时候在一个页面当中会引用到很多javascript的脚本，这些脚本我们有时候可能会想进行一些打包封装，
简单来说只需要引入一个统一入口的脚本文件。举个例子你现在有一个负责翻译的脚本文件translate.js。而在
translate.js中你可能会用到其它的javascript框架，像Jquery, YUI等，这个时候一般的做法是在你需要用的HTM
L页面里直接添加多个<script>标签来完成。这种方式虽然比较常用，但有时可能会比较麻烦，如果一个页面
要加载十几个javascript脚本，有几十个页面要都要加载。这种情况就copy和paste好多次了~。当然也可能通
过一些服务器语言的特性来解决，像JSP的话可以通过import一个公共common.jsp来解决问题。但本文中采用
另外一种方式。就是通过动态脚本来实现依赖脚本的载入。就是平常所用的如下代码：

[javascript] view plain copy
var j = document.createElement('script');j.setAttribute('src', 'http://*/js/jquery.min.js');document.body.appendChild(j);

      当然，如果要加载的依赖脚本有多个的话，这里要注意的是一般的通过页面<script>加载的脚本（
一般也叫做parse-inserted script）执行的时候是按顺序同步执行，这样的话只要脚本顺序没问题，页面代
码就不会有问题。但当是动态加载多个脚本的时候，执行是异步加载的，也就是如果先加载完的脚本调
用了后加载脚本的某些未加载完的部分，执行会出错。这样的话应该让依赖的脚本先加载完成，才进行后
续脚本的载入。

      怎么样来确保依赖的脚本已经加载完毕了呢？这个就是我今天要跟大家探讨的问题。

[javascript] view plain copy
var done = false;
var script = document.createElement('script');
script.setAttribute('src', 'http://*/js/jquery.min.js');
document.body.appendChild(script);
script.onload = script.onreadystatechange = function(){
if ( !done && (!this.readyState ||
this.readyState == "loaded" || this.readyState == "complete") ) {
done = true;
}
};

复制代码

通过如上所示的方法即可判断脚本加载情况，如果已加载完成，则done为true。此方法兼容IE,FF,Chrome。

作者: 梦想家 时间: 2018-4-4 09:08

作者: qqq911 时间: 2018-4-4 11:26
感谢分享

作者: Miss_love 时间: 2020-12-29 17:55
支持下

欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)