JSON，异步加载

JSON

JSON是一种传输数据的格式（以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来传输的）

JSON.parse(); string->json

JSON.stringify(); json->string

异步加载

1. defer异步加载，但要等到DOM文档全部解析完才会被执行。只有IE能用，也可以将代码写到内部。

2. async异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script标签里。

3. （按需加载）js的加载，不一定要在解析DOM页面时就下载，可以在要用到的时候才下载，这时候可以创建script标签，插入到DOM中去，加载完毕后callback,封装的方法代码如下：

function loadScript(url,callback) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    if(script.readState) {
        script.onreadystatechange = function() {//兼容IE
            if(script.readState == "complete" || script.readyState == "loaded") {
                callback();
            }
        }
    }else{
        script.onload = function() {
            callback()
        };
    }
    script.src = url;
    document.head.appendChild(script);
}

对于正常的js文件，js内容如下方法写的话，

function test(){...}
function demo(){...}

像调用上面的（按需加载的）异步加载的话，需要注意callback这个参数，

如果直接写函数名的话，是不行的，因为在解析的时候，解析loadScript函数的时候，是不会解析里面的内容的，也就是函数体，所以浏览器不知道你这个参数指向的是js文件里的函数，而是会看成一个变量，所以一般像loadScript('tools.js',test);这样的话会报错成test is not defined，为了避免这种情况，有以下几种解决办法

1. 传入参数时，做一些调整。

   loadScript('tools.js',function(){
    test();
   });
   

   这样的话，第二个参数变成了一个函数引用，传入时不会看函数体里的内容，等到执行时才解析，就可以避免test is not defined

2. 改变loadScript里的callback的执行方法；

   function loadScript(url,callback) {
       var script = document.createElement('script');
       script.type = "text/javascript";
       if(script.readState) {
           script.onreadystatechange = function() {//兼容IE
               if(script.readState == "complete" || script.readyState == "loaded") {
                   eval(callback);
               }
           }
       }else{
           script.onload = function() {
                eval(callback);
           };
       }
       script.src = url;
       document.head.appendChild(script);
   }
   

   传入的callback以字符串的形式加（），

   loadScript('tools.js','test()');
   

3. 第三种要配合js文件里的内容形式,再改变loadScript里的callback的执行方法

   js文件：

   var tools = {
       test : function(){
           console.log('1');
       },
       demo : function(){}
   }
   

   function loadScript(url,callback) {
       var script = document.createElement('script');
       script.type = "text/javascript";
       if(script.readState) {
           script.onreadystatechange = function() {//兼容IE
               if(script.readState == "complete" || script.readyState == "loaded") {
                   tools[callback]();
               }
           }
       }else{
           script.onload = function() {
                 tools[callback]();
           };
       }
       script.src = url;
       document.head.appendChild(script);
   }
   

   传入的callback以字符串的形式，

   loadScript('tools.js','test');