js的動態加載、緩存、更新以及復用（四）

本文轉載自查看原文 2014-06-21 16:44 3635 自然架構

　　本來想一氣呵成，把加載的過程都寫了，但是卡着呢，所以只好在分成兩份了。

　　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 的介紹了。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js的動態加載、緩存、更新以及復用 js的動態加載、緩存、更新以及復用（一） js的動態加載、緩存、更新以及復用（二） js的動態加載、緩存、更新以及復用（三） js動態加載js css文件,可以配置文件后輟，防止瀏覽器緩存動態加載js文件動態加載js 動態加載js/css 動態加載JS函數如何動態加載js？