javascript脚本封装

雨中漫步_012

      很多时候在一个页面当中会引用到很多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）执行的时候是按顺序同步执行，这样的话只要脚本顺序没问题，页面代
码就不会有问题。但当是动态加载多个脚本的时候，执行是异步加载的，也就是如果先加载完的脚本调
用了后加载脚本的某些未加载完的部分，执行会出错。这样的话应该让依赖的脚本先加载完成，才进行后
续脚本的载入。

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

1. 
   
2.          
   
3. [javascript] view plain copy
   
4. var done = false;   
   
5. var script = document.createElement('script');  
   
6. script.setAttribute('src', 'http://*/js/jquery.min.js');  
   
7. document.body.appendChild(script);  
   
8. script.onload = script.onreadystatechange = function(){  
   
9. if ( !done && (!this.readyState ||  
   
10.             this.readyState == "loaded" || this.readyState == "complete") ) {  
    
11.         done = true;  
    
12.     }  
    
13. };  
    

复制代码

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

梦想家

qqq911

感谢分享

Miss_love

支持下