专栏首页更流畅、简洁的软件开发方式js的动态加载、缓存、更新以及复用(四)

js的动态加载、缓存、更新以及复用(四)

  本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了。

  1、页面里使用<script>来加载 boot.js 。

  2、然后在boot.js里面动态加载 bootLoad.js。以时间作为标识 var dateVer = date.getYear() + '_' + date.getMonth() + '_' + date.getDate() + '_' + date.getHours(); 这样可以保证一小时内肯定会被更新。同时也避免了每次都去更新。

  3、boot.js里面根据情况调用 bootLoad.js里提供的函数。目的是为了把有可能变化的都放在 bootLoad.js 里面以便于能够控制更新。

  4、如果是top页面,则调用bootLoad.js里的Nature.Top.topLoad(loads, kind); ;如果是子页面则调用 top.Nature.Top.sonLoad(loads, kind,window);  进行后续处理。

  5、topLoad(),首先获取最新的版本号,然后加载Nature.LoadJs.js,实现其他js的文件的加载。如果js文件有更新,那么获取的最新版本号就会发生变化,这样就可以实现js文件的及时更新了

  6、sonLoad()则会加载Nature.Adapter.js,实现复用,就是让子页面可以调用top页面里的js。

  简单的说呢就是这样。详细说的话还有很多细节。目前boot.js基本稳定。bootLoad.js也差不多了。Nature.LoadJs.js还需要在改一改。以前写的太乱了。

boot.js的代码。

 1 /*
 2 
 3 加载js脚本的一种解决方法。
 4 
 5 by 金色海洋 2013-7-11 
 6 
 7 */
 8 
 9 //1毫秒后开始加载 js文件 
10 window.setTimeout(function() {
11 
12     //判断有无配置信息————没有的话,加载且缓存
13     //判断有无js文件版本号——没有的话,加载且缓存
14     //加载Nature.LoadJs.js,开始加载其他js
15     //判断页面是否有jsReady,如果有则开始调用
16 
17     //var bootScript = $("script").frist(); //获取标签
18     //var pageKind = bootScript.attr("pageKind"); //获取标签里的属性
19 
20     var kind = (typeof pageKind == "string") ? pageKind : "index"; /*默认的网页类型*/
21 
22     var loads = new loadscript(document);       //把本页面作为参数传递进去。因为涉及到复用,所以要new一下。
23 
24     if (typeof top.Nature == "undefined") {
25         //没有配置信息,加载。用y_MM_dd_HH作为版本标志,一个小时更新一次。因为可以缓存配置信息,所以不是每次都让浏览器加载
26         var date = new Date();
27         var dateVer = date.getYear() + '_' + date.getMonth() + '_' + date.getDate() + '_' + date.getHours();
28         
29         //加载第一个主程序。分开的目的是为了可以控制更新。
30         loads.js('/bootLoad.js?rnd=' + dateVer, function () {
31             Nature.Top.topLoad(loads, kind);   //走top页面的流程
32         });
33     } else {
34         //走子页面的流程,把子页面(window)作为参数传递进去,以便于和top页面区分。因为函数是放在top页面里的。
35         //sonLoad不在子页面里,而是存在于top里,所以要 top.sonLoad
36         top.Nature.Top.sonLoad(loads, kind, window);
37     }
38 
39 
40     /*实现动态加载js的函数,来自于互联网,做了一点修改,可以兼容IE10。IE11没测试。
41     * 写在函数里面,不污染window了。
42     * 增加加载css的函数
43     * 原来是静态的,现在改成需要实例化的。
44     */
45     function loadscript(doc) {
46         this.js = function(url, callback) {
47             var s = doc.createElement('script');
48             s.type = "text/javascript";
49             s.src = url;
50             s.expires = 1;
51             load(s, callback);
52         };
53         this.css = function (url, callback) {
54             var l = doc.createElement('link');
55             l.type = "text/css";
56             l.rel = "stylesheet";
57             l.media = "screen";
58             l.href = url;
59             //doc.getElementsByTagName('head')[0].appendChild(l);
60             load(l, callback);
61         };
62 
63         function load(s, callback) {
64             switch (doc.documentMode) {
65             case 9:
66             case 10:
67             case 11:
68                 s.onerror = s.onload = loaded;
69                 break;
70             default:
71                 s.onreadystatechange = ready;
72                 s.onerror = s.onload = loaded;
73                 break;
74             }
75             doc.getElementsByTagName('head')[0].appendChild(s);
76 
77             function ready() { /*IE7.0/IE10.0*/
78                 if (s.readyState == 'loaded' || s.readyState == 'complete') {
79                     if (typeof callback == "function") callback();
80                 }
81             }
82 
83             function loaded() { /*chrome/IE10.0*/
84                 if (typeof callback == "function") callback();
85             }
86         }
87     }
88 
89 }, 1);

bootLoad.js

  1 /*
  2 
  3 加载js脚本的一种解决方法。
  4 
  5 by 金色海洋 2013-7-11 
  6 
  7 2014-06-07 移植
  8 
  9 */
 10  
 11 var Nature = {};/* 定义 一个很大的对象 */
 12 Nature.Top = {};/* 加载js用的命名空间 */
 13 
 14 /*数据库的设置*/
 15 Nature.WebConfig = {
 16     isShowPeiZhi: true,         //页面里是否显示“配置”,程序员编辑时设置为 true。上线后设置为 false
 17     WebappID: 7,
 18     dbid_236Write: "2,4",       //统一管理数据连接标识
 19     dbid_236WriteJM: "2,14",    //统一管理数据连接标识
 20 
 21     dbid_236SysLog: "2,6",       //wcf日志数据库
 22 
 23     dbid_Loan: "2,13",       //快易贷测试数据库
 24     //dbid_Loan: "2,12"        //快易贷正式数据库
 25 
 26 };
 27 
 28 /*ajax的设置*/
 29 Nature.AjaxConfig = {
 30     UrlResource:    "http://LCNatureResource.517.cn",  /*增删改查服务的网址*/
 31     Urljs:          "http://LCNatureResource.517.cn",  /*js文件的网址*/
 32     Urlsso:         "http://LCNatureService.517.cn",   /*单点登录的网址*/
 33     Urlcss:         "http://mango-js.517.cn",          /*css文件的网址*/
 34     
 35     ajaxDataType: "json"                            /*跨域的时候用jsonp,不用跨域的话用json,cors跨域的话也是json*/
 36 };
 37 
 38 Nature.AjaxConfig.UrljsVer   = Nature.AjaxConfig.Urljs + "/Scripts/NatureAjax/ver.js",  /*存放js文件版本号的网址*/
 39 Nature.AjaxConfig.UrlLoadJs  = Nature.AjaxConfig.Urljs + "/Scripts/NatureAjax/Nature.LoadJs.js", /*加载其他js文件的网址*/
 40 Nature.AjaxConfig.UrlAdapter = Nature.AjaxConfig.Urljs + "/Scripts/NatureAjax/Nature.Adapter.js", /*适配的网址*/
 41 
 42 
 43 /* 复用父页面里的js文件的时候使用。是否使用自己页的js。true:本页加载js文件。false:使用父页的js文件。*/
 44 //Nature.isSelfJs = false;
 45 
 46 Nature.Top.LoadCss = function(loadCss) {
 47     var cssUrl = Nature.AjaxConfig.Urlcss;
 48     loadCss.css(cssUrl + '/websiteStyle/mangoGlobal.css');
 49     loadCss.css(cssUrl + '/misStyle/misUICss/misStyle/mis-style-p.css');
 50     loadCss.css(cssUrl + '/misStyle/misUICss/misStyle/MisStyle_v2.css');
 51     loadCss.css(cssUrl + '/misStyle/debugCss/css.css');
 52     loadCss.css(Nature.AjaxConfig.UrlResource + '/Scripts/css/css2.css');
 53 };
 54 
 55 //外壳页的加载
 56 Nature.Top.topLoad = function(loadscript, kind) {
 57     //判断有无配置信息————没有的话,加载且缓存      
 58     //判断有无js文件版本号——没有的话,加载且缓存  
 59     //加载Nature.LoadJs.js,开始加载其他js
 60     //判断页面是否有jsReady,如果有则开始调用
 61 
 62     /*加载css文件*/
 63     Nature.Top.LoadCss(loadscript);
 64     
 65     //加载js版本号
 66     
 67     var checkCount = 0;
 68     if (typeof Nature.jsVer == "undefined") {
 69         /*加载js文件的版本号,用于更新浏览器的js缓存文件。使用随机数作为参数,保证版本号是最新的。
 70         * 用随机数保证最新,因为可以缓存,所以不是每次访问都会去加载
 71         */
 72         loadscript.js(top.Nature.AjaxConfig.UrljsVer + '?rnd=' + Math.random(), function() { // 
 73             loadOtherJs();
 74         });
 75     } else {
 76         loadOtherJs();
 77     }
 78 
 79     //加载Nature.LoadJs
 80     function loadOtherJs() {
 81         /*得到了版本号,加载LoadJs.js,该文件加载其他需要的js文件*/
 82         loadscript.js(top.Nature.AjaxConfig.UrlLoadJs + Nature.jsVer, function () {
 83             var loadJs = new Nature.loadFile(document);
 84             loadJs.startLoadJs(kind, checkReady);
 85         });
 86     }
 87 
 88     /*检查页面是否有jsReady */
 89     function checkReady() {
 90         if (typeof jsReady == "function") {
 91             //执行页面里的函数
 92             jsReady();
 93         } else {
 94             //检查次数,尝试十次,超了就不玩了,避免死循环。*/
 95             if (checkCount < 10) {
 96                 checkCount++;
 97                 setTimeout(checkReady, 50);
 98             }
 99         }
100     }
101 
102 };
103 
104 //子页的加载
105 Nature.Top.sonLoad = function(loadscript, kind, win) {
106     var checkCount = 0;
107 
108     top.Nature.Top.LoadCss(loadscript);
109     win.Nature = {};
110     
111     loadscript.js(top.Nature.AjaxConfig.UrlAdapter + top.Nature.jsVer, function () {
112         win.Nature.Adapter(win);
113         checkReady();
114     });
115    
116     /*检查页面是否有jsReady */
117     function checkReady() {
118         if (typeof win.jsReady == "function") {
119             //执行页面里的函数
120             win.jsReady();
121         } else {
122             //检查次数,尝试十次,超了就不玩了,避免死循环。*/
123             if (checkCount < 10) {
124                 checkCount++;
125                 setTimeout(checkReady, 50);
126             }
127         }
128     }
129 };
130   

下次就是 Nature.LoadJs.js 的介绍了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何动态加载js?

    第三方的js文件,自己写的js文件,js越来越多了怎么办? 提出问题: 1、js文件太多了,每个页面都写<script src="...">太麻烦。 2、如果路...

    用户1174620
  • js的动态加载、缓存、更新以及复用(二)恼人的命名冲突

      上一篇发出来后得到了很多回复,在此首先感谢大家的热情捧场!有的推荐第三方框架,比如 In.js、requrieJS、sea.js、lab.js等。这个开阔了...

    用户1174620
  • js的动态加载、缓存、更新以及复用(一)使用范围:遇到的问题:目标:页面结构:正文

    使用范围:   OA、MIS、ERP等信息管理类的项目,暂时不考虑网站。 遇到的问题:   完成一个项目,往往需要引用很多js文件,比如jQuery.js、ea...

    用户1174620
  • Require.js

    通过require.js 可以对javascript文件进行别样引用 Require.js的使用: 第一步: 只需在html页面中引用require.js ...

    河湾欢儿
  • Flink Broadcast State实战案例:电商平台用户行为模式分析

    Broadcast State是Flink 1.5引入的功能,本文将跟大家分享Broadcast State的潜在使用场景,并使用电商用户行为分析的例子来演示B...

    PP鲁
  • 总结了一些指针易出错的常见问题(五)

    指针与链表及其操作 //结构体定义 typedef struct _person{ char* firstname; char* lastna...

    互联网金融打杂
  • Egg.js 笔记一 快速入门

    tonglei0429
  • 猿进化系列3——看完这个,你就有好几根猴毛了!

    不管是啥语言,程序都是按照语句的顺序一行一行执行的!虽然代码看起来和鬼画符差不多,但是这些鬼画符是按照先后次序一行一行执行的!不信你看下面的结果

    山旮旯的胖子
  • 多版本JDK在Linux下如何共存

    Windows的话,可以配置多个环境变量。 比如:JAVA8_HOME,JAVA10_HOME。然后按需使用需要的环境变量。这里就不说了。

    xuing
  • Android 混合开发之JsBridge

    电商或者内容类APP中,H5通常都会占据一席之地,Native跟H5通信会必不可少,比如某些场景H5通知native去分享,native通知H5局部刷新等,An...

    看书的小蜗牛

扫码关注云+社区

领取腾讯云代金券