1 按HTML文档流顺序执行JavaS cript代码
首先,读者应该清楚,HTML文档在浏览器中的解析过程是这样的:浏览器是按着文档流从上到下逐步解析页面结构和信息的。JavaS
<script>
alert("顶部脚本");
</script>
<html><head>
<script>
alert("头部脚本");
</script>
<title></title>
</head>
<body>
<script>
alert("页面脚本");
</script>
</body></html>
<script>
alert("底部脚本");
</script>
如果通过脚本标签<script>的src属性导入外部JavaS
<script>
alert("顶部脚本");
</script>
<html>
<head>
<script src="head.js"></script>
<title></title>
</head>
<body>
<script src="body.js"></script>
</body>
</html>
<script>
alert("底部脚本");
</script>
2 预编译与执行顺序的关系
当JavaS
alert(a); // 返回值undefined
var a =1;
alert(a); // 返回值1
由于变量声明是在预编译期被处理的,所以在执行期间对于所有代码来说,都是可见的。但是,你也会看到,执行上面代码,提示的值是undefined,而不是1。这是因为,变量初始化过程发生在执行期,而不是预编译期。在执行期,JavaS
同理,下面示例在函数声明前调用函数也是合法的,并能够被正确解析,所以返回值为1。
f(); // 调用函数,返回值1
function f(){
alert(1);
}
但是,如果按下面方式定义函数,则JavaS
f(); // 调用函数,返回语法错误
var f = function(){
alert(1);
}
这是因为,上面示例中定义的函数仅作为值赋值给变量f,所以在预编译期,JavaS
虽然变量和函数声明可以在文档任意位置,但是良好的习惯应该是在所有JavaS
3 按块执行JavaS cript代码
所谓代码块就是使用<script>标签分隔的代码段。例如,下面两个<script>标签分别代表两个JavaS
<script>
// JavaS
var a =1;
</script>
<script>
// JavaS
function f(){
alert(1);
}
</script>
JavaS
由于JavaS
<script>
// JavaS
alert(a);
f();
</script>
<script>
// JavaS
var a =1;
function f(){
alert(1);
}
</script>
虽然说,JavaS
4 借助事件机制改变JavaS cript执行顺序
由于JavaS
<script>
// JavaS
window.on
alert(a);
f();
}
</script>
<script>
// JavaS
var a =1;
function f(){
alert(1);
}
</script>
为了安全起见,我们一般在页面初始化完毕之后才允许JavaS
注意
如果在一个页面中存在多个windows.on
window.on
f1();
f2();
f3();
}
而且通过这种方式可以改变函数的执行顺序,方法是:简单地调整on
除了页面初始化事件外,我们还可以通过各种交互事件来改变JavaS
5 JavaS cript输出脚本的执行顺序
在JavaS
document.write('<script type="text/javas
document.write('f(); ');
document.write('function f(){ ');
document.write(' alert(1); ');
document.write('} ');
document.write('<\/script> ');
运行上面代码,我们会发现:document.write()方法先把输出的脚本字符串写入到脚本所在的文档位置,浏览器在解析完document.write()所在文档内容后,继续解析document.write()输出的内容,然后才按顺序解析后面的HTML文档。也就是说,JavaS
请注意,使用document.write()方法输出的JavaS
document.write('f(); ');
document.write('function f(){ ');
document.write(' alert(1); ');
document.write('); ');
但是,通过document.write()方法输出脚本并执行也存在一定的风险,因为不同JavaS
? 问题一,找不到通过document.write()方法导入的外部JavaS
document.write('<script type="text/javas
<\/script>');
document.write('<script type="text/javas
document.write('alert(n); '); // IE提示找不到变量n
document.write('<\/script> ');
alert(n+1); // 所有浏览器都会提示找不到变量n
外部JavaS
var n = 1;
分别在不同浏览器中进行测试,会发现提示语法错误,找不到变量n。也就是说,如果在JavaS
? 问题二,不同JavaS
<script type="text/javas
document.write('<script type="text/javas
<\/script>');
document.write('<script type="text/javas
document.write('alert(2);')
document.write('alert(n+2);');
document.write('<\/script>');
</script>
<script type="text/javas
alert(n+3);
</script>
外部JavaS
var n = 1;
alert(n);
在IE浏览器中的执行顺序如图1-6所示。
图1-6 IE 7浏览器的执行顺序和提示的语法错误
在符合DOM标准的浏览器中的执行顺序与IE浏览器不同,且没有语法错误,如图1-7所示的是在Firefox 3.0浏览器中的执行顺序。
图1-7 Firefox 3浏览器的执行顺序和提示的语法错误
解决不同浏览器存在的不同执行顺序,以及可能存在Bug。我们可以把凡是使用输出脚本导入的外部文件,都放在独立的代码块中,这样根据上面介绍的JavaS
<script type="text/javas
document.write('<script type="text/javas
</script>
<script type="text/javas
document.write('<script type="text/javas
document.write('alert(2); ') ; // 提示2
document.write('alert(n+2); '); // 提示3
document.write('<\/script> ');
alert(n+3); // 提示4
</script>
<script type="text/javas
alert(n+4); // 提示5
</script>
这样在不同浏览器中都能够按顺序执行上面代码,且输出顺序都是1、2、3、4和5。存在问题的原因是:输出导入的脚本与当前JavaS
转自:http://ribbonchen.blog.163.com/blog/static/11831650520105220402832/