javascript脚本封装

 

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

var j = document.createElement('script');j.setAttribute('src', 'http://*/js/jquery.min.js');document.body.appendChild(j); 

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

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

         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。