为了更稳定一点，决定采用一个一个加载的方式，即加载完一个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：下集预告。就是具体的实现代码，还有一些思路和想法，不知道大家还有啥想知道的没，有的话，欢迎在下面回复一下。谢谢先。
您可能感兴趣的文章: