javascript的动态加载、缓存、更新和重用(一)

使用范围：OA、MIS、ERP等信息管理项目，暂不考虑网站。遇到的问题：要完成一个项目，往往需要参考很多js文件，比如jQuery.js、easyUI等。有一些自己写的js文件，那么这些文件如何方便的加载，如果文件发生变化，客户端如何及时更新缓存？如果能提高点操作的效率，那就更好了。目标：1 .引用js文件很方便。2.尽量使用各种缓存，避免频繁从服务器读取文件。3.如果js文件被更新或几个js文件被添加或减少，客户端应该能够自动并立即更新它。4.Js文件的重用。页面结构：一般OA、MIS等项目多采用框架集或iframe来实现，从而产生了父页面和子页面的概念。我们可以用这个来大惊小怪。网页可以分为三个部分：外壳、主页、标签、数据列表和表单(添加或修改)。因为这里加载js的方法需要用到这个页面结构，也正是因为这个原因，网站暂时不被支持。看这张图，有点眼熟。这就是结构。

现在文本作为web版本使用，越来越依赖各种js，比如第三方的jQuery、easyUI、my97，以及自己编写的各种js。需要实现的功能越来越多，需要的JS越来越多，JS文件被频繁修改。出现了很多问题，比如在每一页上写很多脚本src=" "。这太麻烦了。添加一个新的js文件需要修改多少页？js文件更新后如何让客户端立即更新？如何让客户端加载js更快？一些Js文件仍然有依赖关系。如何保证装货顺序？本文的内容就是分享我的解决方案。在页面中通过脚本动态加载js显然很麻烦，那怎么办呢？想走还是用动载荷法解决。我也在网上搜索过，方法很多，有些是手工写的，有些是组织成框架的(比如seejs)。有时候还是觉得自己有了更好的答案，所以打算自己写一个。如何动态加载？使用jQuery提供的方法？这是可以的，但是页面必须引用我为加载js文件而编写的jQuery和js。也就是说一页要写两个剧本，比较麻烦。如果你能写一个，你就不能写两个。虽然只有多一个，但是多一个真的很麻烦。所以我决定自己写一个动态加载的小方法。如果我不会写呢？百度阿姨，过来帮忙。各种搜索，终于找到了一个理想的方法，所以我就用这一个。复制的代码如下：/*实现动态加载js的功能，来自互联网，稍加修改，可以兼容IE10 */varloadscript={ $ $ : function(ID){ return document . getelementbyid(ID)；}，tag:函数(元素){ return document . getelementsbytagname(元素)；}，ce:函数(元素){ return document.createElement(元素)；}，js:函数(url，回调){ var s=load script . ce(' script ')；s . type=' text/JavaScript '；s.src=urlif(document . document mode==10 | | document . document mode==9){ s . onerror=s . onload=loaded；} else { s . onreadystatechange=ready；s . onerror=s . onload=loaded；} loadscript.tag('head')[0]。appendChild函数ready(){/* IE7.0/IE10.0 */if(s . readystate==' loaded ' | | s . readystate==' complete '){ callback()；} }函数已加载(){/* chrome/IE10.0 */callback()；} }};装载顺序和新代码已经确定。下面是如何加载其他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肯定会更新。看似简单，但如何添加这个版本号？如何更新版本号本身？要重用这一点，我们必须首先看上图，即页面结构，它有一个shell页面(或主页)，我们称之为父页面。还有几个由iframe加载的页面，我们将其作为子页添加。一般在父页面加载jQuery.js，然后在子页面加载jQuery.js。当然，当子页面加载jQuery.js时，它是直接从缓存中提取的，一般不会再打扰服务器。但是，既然已经加载了父页面，为什么还要再次加载子页面呢？你能把好的直接添加到父页面吗？我在网上搜了一下，好像没人这么做过。也许我太不一样了。我就是想实现这个方法。优点是所有js文件都加载在父页面，子页面直接使用加载在父页面的js，这样子页面就不需要折腾js文件了。这样，效率可以更高。毕竟，即使使用缓存进行加载，也需要做出判断，然后做一个加载动作，但还是会有一点损失。js文件越多，就越明显。因此，如何实现它似乎很容易思考。父页面使用jQueryVar aa=$(' div ')；//了解是否可以在父页面的所有div子页面中做到这一点？Var bb=top。$(“div”)；//可以找到div，但不是子页面的div，而是父页面的div。发生了什么事？原因在于搜索范围。JQuery有三个参数。我们通常只使用第一个，但后一个被忽略了。那么第二个参数是什么呢？是搜索范围。未指定时，jQuery将在哪里搜索？在加载jQuery的页面中搜索，而不是调用$。解决方法也很简单，只需添加一个参数。Var bb=top。$(“div”，文档)；//指定搜索范围：子页面中的文档等。这似乎很烦人。当我们编写脚本时，我们还应该考虑脚本是在父页面还是子页面中执行。好吧，做一个简单的包装来避免这个麻烦。在子页中写一个函数复制代码如下： function $ (P1) {return top。$ (P1，文件)；}好了，你说完了吗？当然不是！请听下一个分解来预测会发生什么。Ps:下一集预告。就是具体的实现代码，有一些思路和想法，不知道大家还有什么想知道的，如果有，请在下面回复。先谢谢你。