JSON
JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来传输的)
JSON.parse(); string->json
JSON.stringify(); json->string
异步加载
-
defer异步加载,但要等到DOM文档全部解析完才会被执行。只有IE能用,也可以将代码写到内部。
<script src='' defer='defer'></script>
-
async异步加载,加载完就执行,async只能加载外部脚本,不能把js写在script标签里。
<script src='' async='async'></script>
(按需加载)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,为了避免这种情况,有以下几种解决办法
-
传入参数时,做一些调整。
loadScript('tools.js',function(){ test(); });
这样的话,第二个参数变成了一个函数引用,传入时不会看函数体里的内容,等到执行时才解析,就可以避免test is not defined
-
改变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()');
-
第三种要配合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');