js的动态加载、缓存、更新以及复用（一）

 

使用范围：

　　OA、MIS、ERP等信息管理类的项目，暂时不考虑网站。

 

遇到的问题：

　　完成一个项目，每每须要引用不少js文件，好比jQuery.js、easyUI等。还有本身写的一些列js文件，那么这些文件如何方便的加载，若是文件有变化如何才能让客户端及时更新缓存？若是可以提升点运行效率，那就更好了。

 

目标：

一、  能够方便的引用js文件。

二、  尽可能使用各类缓存，避免频繁从服务器读取文件。

三、  若是js文件有更新或者增长、减小几个减小js文件，须要客户端可以自动、马上更新。

四、  Js文件的复用。

 

页面结构：

 

　　通常OA、MIS这一类的项目，大多采用frameset或者iframe的方式来实现，这样就有了父页和子页的概念。咱们能够利用这一点来作作文章。

 

　　网页能够分为三块：外壳、首页、标签、数据列表、表单（添加、修改）。由于这里要说的加载js的方法，须要利用这种页面结构，也正是由于这个缘由，因此暂时不支持网站。

 

　　看这个图有点眼熟吧。恩，就是这种结构。

　　

正文

　　如今作web版的应用，愈来愈依赖各类js了，第三方的jQuery、easyUI、my97等，还有本身写的各类js。要实现的功能愈来愈多，须要使用的js也愈来愈多，js文件的修改也很频繁。因而就出现了许多问题，好比每一个页面都要写一大堆<script src=””>。这个也太麻烦了吧，增长一个新的js文件，须要改多少页面？js文件更新了如何让客户端也当即更新？如何让客户端更快的加载js。有的Js文件还有依赖关系，如何确保加载顺序？本文内容就是分享一下个人解决方案。

 

动态加载

　　在页面里使用<script>加载js，显然很麻烦，那么怎么办呢？想来想去仍是用动态加载的方法来解决。在网上也搜索了一番，有不少种方法，有本身手动写的，有整理成框架的（好比seejs）。有的时候仍是感受本身弄一个更加的应手，因此打算本身写一套。

 

　　如何动态加载呢？使用jQuery提供的方法吗？这个却是能够，可是页面必须引用jQuery和我写的加载js文件的js。也就是说一个页面要写两个<script>，这个就麻烦了。能写一个，就必定不要写两个，虽然只是多了一个，可是多了这么一个就真的很麻烦。因此决定本身手写一个动态加载的小方法。

 

　　不会写怎么办呢？百度大婶来帮忙吧。各类搜呀，终于找到了一个比较理想的方法，恩就用这个了。

 

 1 /*实现动态加载js的函数，来自于互联网，作了一点修改，能够兼容IE10 */
 2 var loadscript =
 3 {
 4     $$: function(id) { return document.getElementById(id); },
 5     tag: function(element) { return document.getElementsByTagName(element); },
 6     ce: function(element) { return document.createElement(element); },
 7     js: function(url, callback) {
 8         var s = loadscript.ce('script');
 9         s.type = "text/javascript";
10         s.src = url;
11         if (document.documentMode == 10 || document.documentMode == 9) {
12             s.onerror = s.onload = loaded;
13         } else {
14             s.onreadystatechange = ready;
15             s.onerror = s.onload = loaded;
16         }
17         loadscript.tag('head')[0].appendChild(s);
18 
19         function ready() { /*IE7.0/IE10.0*/
20             if (s.readyState == 'loaded' || s.readyState == 'complete') {
21                 callback();
22             }
23         }
24 
25         function loaded() { /*chrome/IE10.0*/
26             callback();
27         }
28     }
29 };

 

加载顺序

　　和新代码已经搞定了，下面就是如何加载其余js文件了，因为文件比较多，还有必定的依赖关系，想来想去仍是弄个js文件的字典吧，而后作一个加载顺序，按照这个顺序来加载。

 

　　为了更稳定一点，决定采用一个一个加载的方式，即加载完一个js，而后在加载另外一个js。这样就能够确保依赖关系。固然缺点是加载速度会比较慢。通常网页加载js是能够多个js文件一块儿下载的，这个速度就会比较快。

 

使用缓存

　　通常浏览器对于各类资源（好比网页、图片、js、css等）会有一个缓存，已经有了就不会再向服务器去下载了。看似很好，可是有两个问题：

　　　　A、浏览器如何判断缓存的js文件是否是最新的？

　　　　B、js文件更新了，如何强制浏览器更新？

 

　　浏览器是怎么判断的呢？具体步骤我也不太清楚，只是知道有一个步骤是要到服务器问问，我缓存的js文件是否是最新的，而后才可以肯定本地的缓存是不是最新的，若是是最新的就不折腾了，若是不是再去下载最新的。就是说呢，即便客户端已经有了js文件的缓存，可是浏览器要确认一下是否最新，仍是会跑到服务器去问问。这个，折腾呀。固然通常状况下，这个过程会很快，可是有时候这个过程会很慢。

　　因此呢，仍是尽可能避免加载js的好。因而就引出来的“js文件的复用”。

 

更新js文件

　　Js文件更新了，可是浏览器却还在用之前的js文件，由于有缓存了，并且还执拗的认为缓存的js文件就是最新的，哎咋办呀？

 

　　最简单的方法就是在加载js的时候，后面跟一个版本号，有更新了，就版本号+1。好比 xxx.js?v=1。Js文件更新后就是 xxx.js?v=2。这样js就确定会被更新了。

 

　　看起来彷佛很简单，可是这个版本号如何加上去？版本号自己又如何更新呢？

 

复用

　　这个就要先看看上面那个图了，就是页面结构，有一个外壳页（或者首页），咱们叫作父页。里面还有若干个iframe加载的页面，咱们加作子页。

 

　　通常的作法是，父页里加载jQuery.js，而后子页里也要加载jQuery.js。固然当子页在加载jQuery.js的时候，直接从缓存里面提取，通常不会再去折腾服务器了。

　　可是，既然父页里面已经加载了，子页为啥还要再加载一次？直接用父页里加载好的行不行呢？到网上搜了一下，彷佛没有人这么作。也许是我太另类了吧，我就是想实现这个方法。优势就是，全部的js文件都在父页里加载，子页直接使用父页里加载好的js，这样子页就不须要在折腾js文件了。这样效率也能够更高一些，毕竟即便用缓存里加载，也是要判断一下，而后在作个加载的动做，仍是会有一点点损耗，js文件越多也就越明显。

 

　　那么如何实现呢，想一想彷佛很简单。

 

　　父页里使用jQuery

 

　　Var aa = $(’div’);  //找到父页里的全部div

 

　　子页里是否是能够这么作？

 

　　Var  bb = top.$ (’div’) ; //可以找到div，可是不是子页的div而是父页里的div。

 

　　咋回事呢？缘由就在于搜索范围。jQuery是有三个参数的，咱们平时只用了第一个，后面的就被忽略了。那么第二个参数是啥呢？就是搜索范围。没有指定的时候，jQuery会在哪里搜索呢？加载jQuery的页面里面搜索，而不是调用$的页面里搜索。

 

　　解决方法也很简单，加个参数就行了

 

　　Var  bb = top.$ (’div’,document) ; //指定搜索范围：子页的document

 

　　等等，这个彷佛很烦人，咱们在写脚本的时候，还要考虑一下，这个脚本是在父页里执行仍是在子页里执行吗？

 

　　好了，作一个简单的封装，避免这个麻烦。子页里写个函数

 

function $ (p1){

         return top.$ (p1,document);

}

 

　　好了，大功告成了吗？固然没有！预知后事如何，请听下回分解。

 

 

ps：下集预告。就是具体的实现代码，还有一些思路和想法，不知道你们还有啥想知道的没，有的话，欢迎在下面回复一下。谢谢先。