Dynamic load, cache, update and reuse of JS (four)

Source: Internet
Author: User
Tags date execution file url functions getdate version window domain

Originally wanted to coherent, the loading process has been written, but the card is, so had to be divided into two.

1, the page use <script> to load boot.js.

2, then in boot.js dynamic loading bootload.js. With time as the identification of var datever = date.getyear () + "_" + date.getmonth () + "_" + date.getdate () + "_" + date.gethours (); This is guaranteed to be updated within an hour. At the same time also avoid every time to update.

3, Boot.js inside according to the situation to call the function provided in Bootload.js. The goal is to put the possible changes in the bootload.js to facilitate control of the update.

4, if it is the top page, then call the Bootload.js Nature.Top.topLoad (loads, kind); If the page is a subpage, call top.  Nature.Top.sonLoad (loads, kind,window); for subsequent processing.

5, Topload (), first get the latest version number, and then load Nature.LoadJs.js, the implementation of other JS file loading. If the JS file has an update, then get the latest version number will change, so you can realize the timely update of JS files .

6, Sonload () will load Nature.Adapter.js, to achieve reuse, is to make the child page can call the top page JS.

Simply put, that's it. There are a lot of details to be said in detail. At present the boot.js is basically stable. Bootload.js is about the same. Nature.LoadJs.js also need to change. It was too messy before.

Boot.js code.

/* A solution for loading the JS script. By the Golden Ocean 2013-7-11///1 milliseconds after the start of loading JS file Window.settimeout (function () {   //judge if there is no configuration information ———— not, load and cache &nbsp ;  //Determine if there is no JS file version number--not, load and cache    //load Nature.LoadJs.js, start loading other JS    // Determine if the page has Jsready, and then start calling    //var Bootscript = $ ("script"). Frist (); Get tags    //var pagekind = bootscript.attr ("Pagekind"); Get the properties     var kind = (typeof Pagekind = = "string") in the tag? Pagekind: "Index"; /* Default page Type */    var loads = new Loadscript (document);      // Pass this page as a parameter.

Because it involves reuse, so be new.     if (typeof top. Nature = = "undefined") {       //No configuration information, loading. Use Y_MM_DD_HH as the version flag, updated one hours.
Because the configuration information can be cached, it is not always allowed to have the browser load         var date = new Date ();         var datever = date.getyear () + "_" + date.getmonth () + "_" + date.getdate () + " _"+ date.gethours ();                //Load the first main program.
The purpose of the separation is to be able to control the update.         loads.js ("/bootload.js?rnd=" + datever, function () {             Nature.Top.topLoad (loads, kind);  //GO top page process  
      });    } else {       //go to the process of the child page, the handle page (window) as a parameter passed in to facilitate and the top page to distinguish.
Because the function is placed on the top page.        //sonload is not in the child page, but in the top, so to Top.sonload          top.
Nature.Top.sonLoad (loads, kind, window);    }    /* Implement dynamic Load JS function, from the Internet, made a little modification, can be compatible with IE10.
IE11 not tested.
    * Written in the function, does not pollute window.
    * Add CSS function     * Original is static, now change to need to instantiate.     *     function Loadscript (doc) {        this.js = function (URL, callback) {          
  var s = doc.createelement ("script");
            S.type = "Text/javascript";
            s.src = URL;
            s.expires = 1;
            load (S, callback);
       };         this.css = function (URL, callback) {      
      var L = doc.createelement ("link");
            L.type = "Text/css";
            L.rel = "stylesheet";
            l.media = "screen";             l.href = URL;            //doc.getelementsbytagname ("head") [0].
AppendChild (l);
            load (L, callback);

       };         function Load (s, callback) {             switch (doc.documentmode) {             Case 9:             case:              Case:           
      S.onerror = S.onload = loaded;
                break;             Default:                
S.onreadystatechange = ready;                 S.onerror = S.onload =
Loaded
                break;            }        

     doc.getelementsbytagname ("Head") [0].appendchild (s);             function Ready () {/*ie7.0/ie10.0*/                  if (s.readystate = "Loaded" S.readystate = = "complete") {              
      if (typeof callback = = "function") callback ();                }             }             function loaded () {/*chrome/ ie10.0*/                if (typeof
callback = = "function") callback ();
           }        }    }, 1);

Bootload.js

/* A solution for loading the JS script. 
by Golden Ocean 2013-7-11 2014-06-07 transplant/  var nature = {};/* defines a large object/nature.top = {};/* The namespace for loading JS/* Database Settings * * * Nature.webconfig = {    isshowpeizhi:true,        // If "Configure" is displayed on the page, the programmer is set to True when editing. Set to False     Webappid:7,     dbid_236write: "2,4",       //Unified management Data Connection Identification     DBID_236WRITEJM: "2,14",   //Unified management Data Connection Identification     Dbid_236syslog: "2,6",      //WCF log database     Dbid_loan: "2,13",       //Quick-Easy loan test database    //dbid_loan: "2,12"      

  //Quick-Easy loan official database}; /*ajax Setting * * nature.ajaxconfig = {    urlresource:    "http://LCNatureResource.517.cn" , /* Additions and deletions Service URL * * *     urljs:          "http://LCNatureResource.517.cn ", /*js file URL * *     urlsso:        " http ://lcnatureservice.517.cn ",  /* Single sign-on URL */    urlcss:     
    "http://mango-js.517.cn",         /*css file URL * *         ajaxdatatype: "JSON"                             /*

Cross-domain time with JSONP, do not cross-domain words with json,cors cross-domain words is also json*/}; nature.ajaxconfig.urljsver   = Nature.AjaxConfig.Urljs + "/scripts/natureajax/ver.js", /* Store JS file version number of the URL * * * nature.ajaxconfig.urlloadjs  = Nature.AjaxConfig.Urljs + "/scripts/natureajax/nature.loadjs.js" ,/* Load other JS file URL * * * Nature.AjaxConfig.UrlAdapter = Nature.AjaxConfig.Urljs + "/scripts/natureajax/nature.adapter.js",/ * Suitable URL/////////* Reuse the JS file in the parent page when used. Whether to use the JS of your own page. True: This page loads the JS file. FalsE: Use the JS file of the parent page.

* *//nature.isselfjs = false; Nature.Top.LoadCss = function (loadcss) {    var cssurl = Nature.AjaxConfig.Urlcss;    
Loadcss.css (Cssurl + "/websitestyle/mangoglobal.css");
    loadcss.css (cssurl + "/misstyle/misuicss/misstyle/mis-style-p.css");
    loadcss.css (cssurl + "/misstyle/misuicss/misstyle/misstyle_v2.css");
    loadcss.css (cssurl + "/misstyle/debugcss/css.css");
    loadcss.css (Nature.AjaxConfig.UrlResource + "/scripts/css/css2.css");

}; Shell page Load Nature.Top.topLoad = function (Loadscript, kind) {   //judge if there is no configuration information ———— not, load and cache           //To determine if there is a JS file version number-no, load and cache      // Load Nature.LoadJs.js, start loading other JS    //Determine whether the page has jsready, if there is then start calling    /* Loading CSS file * */ 
   Nature.Top.LoadCss (Loadscript);        //Load JS version number         var checkcount = 0;     if (typeof nature.jsver = = "undefined") {       /* Load the version number of the JS file, The JS cache file used to update the browser.
Use random numbers as parameters to ensure that the version number is up to date.         * with random number to ensure the latest, because you can cache, so not every visit will go to load          *         loadscript.js (top. Nature.AjaxConfig.UrljsVer + "? rnd=" + math.random (), function () {//        
    Loadotherjs ();
       });    } else {        loadotherjs ();    }     //Load Nature.loadjs     function Loadotherjs () {        /* Got the version number, loaded loadjs.js, the file loaded with other required JS file/        loadscript.js (top. Nature.AjaxConfig.UrlLoadJs + nature.jsver, function () {            var loadjs = new Nature.loadfile (document);
            Loadjs.startloadjs (kind, checkready);
       });    }    /* Check the page for Jsready/    function Checkready () {  & nbsp;     if (typeof Jsready = "function") {        
   //Execution page functions             jsready ();        } else {            //Check the number of times, try 10 times, the super will not play, to avoid the death cycle. */            if (Checkcount <) {   
             checkcount++;                 settimeout (Checkready, 50);
           }        }

   };

The Load Nature.Top.sonLoad = function (Loadscript, kind, win) {    var checkcount = 0;     top.
Nature.Top.LoadCss (Loadscript);     win.
Nature = {};         loadscript.js (top. Nature.AjaxConfig.UrlAdapter + top. Nature.jsver, function () {        win.
Nature.adapter (Win);
        Checkready ();
   });        * Check the page for Jsready */    function Checkready () {         if (typeof Win.jsready = = "function") {        
   //Execution page functions             win.jsready ();         else {           //check the number of times, try 10 times, the super will not play, avoid the death cycle. */            if (Checkcount <) {   
             checkcount++;                 settimeout (
Checkready, 50);
           }        }    };


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.