javacript

最新推荐文章于 2023-03-14 16:59:37 发布

lzynihao

最新推荐文章于 2023-03-14 16:59:37 发布

阅读量777

点赞数

分类专栏： java script

java script 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.6 JavaScript执行顺序

上一节是从JavaScript引擎的解析机制来探索JavaScript的工作原理，下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序。如果说，JavaScript引擎的工作机制比较深奥是因为它属于底层行为，那么JavaScript代码执行顺序就比较形象了，因为我们可以直观感觉到这种执行顺序，当然 JavaScript代码的执行顺序是比较复杂的，所以在深入JavaScript语言之前也有必要对其进行剖析。

1.6.1 按HTML文档流顺序执行JavaScript代码

首先，读者应该清楚，HTML文档在浏览器中的解析过程是这样的：浏览器是按着文档流从上到下逐步解析页面结构和信息的。JavaScript代码作为嵌入的脚本应该也算做HTML文档的组成部分，所以JavaScript代码在装载时的执行顺序也是根据脚本标签<script>的出现顺序来确定的。例如，浏览下面文档页面，你会看到代码是从上到下逐步被解析的。

alert("顶部脚本");

</script>

alert("头部脚本");

</script>

</head>

<body>

alert("页面脚本");

</script>

</body></html>

alert("底部脚本");

</script>

如果通过脚本标签<script>的src属性导入外部JavaScript文件脚本，那么它也将按照其语句出现的顺序来执行，而且执行过程是文档装载的一部分。不会因为是外部JavaScript文件而延期执行。例如，把上面文档中的头部和主体区域的脚本移到外部JavaScript文件中，然后通过 src属性导入。继续预览页面文档，你会看到相同的执行顺序。

alert("顶部脚本");

</script>

<html>

<head>

</head>

<body>

</body>

</html>

alert("底部脚本");

</script>

1.6.2 预编译与执行顺序的关系

当JavaScript引擎解析脚本时，它会在预编译期对所有声明的变量和函数进行处理。所以，就会出现当JavaScript解释器执行下面脚本时不会报错：

alert(a); // 返回值undefined

var a =1;

alert(a); // 返回值1

由于变量声明是在预编译期被处理的，所以在执行期间对于所有代码来说，都是可见的。但是，你也会看到，执行上面代码，提示的值是undefined，而不是1。这是因为，变量初始化过程发生在执行期，而不是预编译期。在执行期，JavaScript解释器是按着代码先后顺序进行解析的，如果在前面代码行中没有为变量赋值，则JavaScript解释器会使用默认值undefined。由于在第二行中为变量a赋值了，所以在第三行代码中会提示变量a的值为1，而不是undefined。

同理，下面示例在函数声明前调用函数也是合法的，并能够被正确解析，所以返回值为1。

f(); // 调用函数，返回值1

function f(){

alert(1);

}

但是，如果按下面方式定义函数，则JavaScript解释器会提示语法错误。

f(); // 调用函数，返回语法错误

var f = function(){

alert(1);

}

这是因为，上面示例中定义的函数仅作为值赋值给变量f，所以在预编译期，JavaScript解释器只能够为声明变量f进行处理，而对于变量f的值，只能等到执行期时按顺序进行赋值，自然就会出现语法错误，提示找不到对象f。

虽然变量和函数声明可以在文档任意位置，但是良好的习惯应该是在所有JavaScript代码之前声明全局变量和函数，并对变量进行初始化赋值。在函数内部也是先声明变量，然后再引用。

1.6.3 按块执行JavaScript代码

所谓代码块就是使用<script>标签分隔的代码段。例如，下面两个<script>标签分别代表两个JavaScript代码块。

// JavaScript代码块1

var a =1;

</script>

// JavaScript代码块2

function f(){

alert(1);

}

</script>

JavaScript解释器在执行脚本时，是按块来执行的。通俗地说，就是浏览器在解析HTML文档流时，如果遇到一个<script>标签，则JavaScript解释器会等到这个代码块都加载完后，先对代码块进行预编译，然后再执行。执行完毕后，浏览器会继续解析下面的HTML文档流，同时JavaScript解释器也准备好处理下一个代码块。

由于JavaScript是按块执行的，所以如果在一个JavaScript块中调用后面块中声明的变量或函数就会提示语法错误。例如，当JavaScript解释器执行下面代码时就会提示语法错误，显示变量a未定义，对象f找不到。

// JavaScript代码块1

alert(a);

f();

</script>

// JavaScript代码块2

var a =1;

function f(){

alert(1);

}

</script>

虽然说，JavaScript是按块执行的，但是不同块都属于同一个全局作用域，也就是说，块之间的变量和函数是可以共享的。

1.6.4 借助事件机制改变JavaScript执行顺序

由于JavaScript是按块处理代码，同时又遵循HTML文档流的解析顺序，所以在上面示例中会看到这样的语法错误。但是当文档流加载完毕，如果再次访问就不会出现这样的错误。例如，把访问第2 块代码中的变量和函数的代码放在页面初始化事件函数中，就不会出现语法错误了。

// JavaScript代码块1

window.onload = function(){ // 页面初始化事件处理函数

alert(a);

f();

}

</script>

// JavaScript代码块2

var a =1;

function f(){

alert(1);

}

</script>

为了安全起见，我们一般在页面初始化完毕之后才允许JavaScript代码执行，这样可以避免网速对JavaScript执行的影响，同时也避开了HTML文档流对于JavaScript执行的限制。

注意

如果在一个页面中存在多个windows.onload事件处理函数，则只有最后一个才是有效的，为了解决这个问题，可以把所有脚本或调用函数都放在同一个onload事件处理函数中，例如：

window.onload = function(){

f1();

f2();

f3();

}

而且通过这种方式可以改变函数的执行顺序，方法是：简单地调整onload事件处理函数中调用函数的排列顺序。

除了页面初始化事件外，我们还可以通过各种交互事件来改变JavaScript代码的执行顺序，如鼠标事件、键盘事件及时钟触发器等方法，详细讲解请参阅第14章的内容。

1.6.5 JavaScript输出脚本的执行顺序

在JavaScript开发中，经常会使用document对象的write()方法输出JavaScript脚本。那么这些动态输出的脚本是如何执行的呢？例如：

document.write('<script type="text/javascript">');

document.write('f(); ');

document.write('function f(){ ');

document.write(' alert(1); ');

document.write('} ');

document.write('<//script> ');

运行上面代码，我们会发现：document.write()方法先把输出的脚本字符串写入到脚本所在的文档位置，浏览器在解析完document.write()所在文档内容后，继续解析document.write()输出的内容，然后才按顺序解析后面的HTML文档。也就是说，JavaScript脚本输出的代码字符串会在输出后马上被执行。

请注意，使用 document.write()方法输出的JavaScript脚本字符串必须放在同时被输出的<script>标签中，否则 JavaScript解释器因为不能够识别这些合法的JavaScript代码，而作为普通的字符串显示在页面文档中。例如，下面的代码就会把 JavaScript代码显示出来，而不是执行它。

document.write('f(); ');

document.write('function f(){ ');

document.write(' alert(1); ');

document.write('); ');

但是，通过document.write()方法输出脚本并执行也存在一定的风险，因为不同JavaScript引擎对其执行顺序不同，同时不同浏览器在解析时也会出现Bug。

Ø 问题一，找不到通过document.write()方法导入的外部JavaScript文件中声明的变量或函数。例如，看下面示例代码。

document.write('<script type="text/javascript" src="test.js">

<//script>');

document.write('<script type="text/javascript"> ');

document.write('alert(n); '); // IE提示找不到变量n

document.write('<//script> ');

alert(n+1); // 所有浏览器都会提示找不到变量n

外部JavaScript文件（test.js）的代码如下：

var n = 1;

分别在不同浏览器中进行测试，会发现提示语法错误，找不到变量n。也就是说，如果在JavaScript代码块中访问本代码块中使用document.write()方法输出的脚本中导入的外部 JavaScript文件所包含的变量，会显示语法错误。同时，如果在IE浏览器中，不仅在脚本中，而且在输出的脚本中也会提示找不到输出的导入外部 JavaScript文件的变量（表述有点长和绕，不懂的读者可以尝试运行上面代码即可明白）。

Ø 问题二，不同JavaScript引擎对输出的外部导入脚本的执行顺序略有不同。例如，看下面示例代码。

document.write('<script type="text/javascript" src="test1.js">

<//script>');

document.write('<script type="text/javascript"> ');

document.write('alert(2);')

document.write('alert(n+2);');

document.write('<//script>');

</script>

alert(n+3);

</script>

外部JavaScript文件（test1.js）的代码如下所示。

var n = 1;

alert(n);

在IE浏览器中的执行顺序如图1-6所示。

图1-6 IE 7浏览器的执行顺序和提示的语法错误

在符合DOM标准的浏览器中的执行顺序与IE浏览器不同，且没有语法错误，如图1-7所示的是在Firefox 3.0浏览器中的执行顺序。

图1-7 Firefox 3浏览器的执行顺序和提示的语法错误

解决不同浏览器存在的不同执行顺序，以及可能存在Bug。我们可以把凡是使用输出脚本导入的外部文件，都放在独立的代码块中，这样根据上面介绍的JavaScript代码块执行顺序，就可以避免这个问题。例如，针对上面示例，可以这样设计：

document.write('<script type="text/javascript" src="test1.js"><//script>');

</script>

document.write('<script type="text/javascript"> ');

document.write('alert(2); ') ; // 提示2

document.write('alert(n+2); '); // 提示3

document.write('<//script> ');

alert(n+3); // 提示4

</script>

alert(n+4); // 提示5

</script>

这样在不同浏览器中都能够按顺序执行上面代码，且输出顺序都是1、2、3、4和5。存在问题的原因是：输出导入的脚本与当前JavaScript代码块之间的矛盾。如果单独输出就不会发生冲突了。

把外部JavaScript文件放在HTML底部

我们的目标是相同的：为用户尽可能快地显示内容。当载入一个脚本文件的时候，HTML会停止解析，直到脚本载入完毕。因此，用户可能会长时间对着一个空白的屏幕，看上去什么都没有发生。如果你的JavaScript代码只是增加一些功能（比如按钮的点击动作），那么尽管大胆地把文件引用放在HTML 底部吧（就在</body>之前），你会看到明显的速度提升。如果是用于其他目的的脚本文件，则需要慎重地考虑。但无论如何，这毫无疑问是一个非常值得考虑的地方。

优化循环

循环遍历一个数组

//这段糟糕的代码会在每次进入循环的时候都计算一次数组的长度
var names = ['George','Ringo','Paul','John'];
for(var i=0;i<names.length;i++){
  doSomeThingWith(names[i]);
}

//这样的话，就只会计算一次了
var names = ['George','Ringo','Paul','John'];
var all = names.length;
for(var i=0;i<all;i++){
  doSomeThingWith(names[i]);
}

//这样就更加简短了
var names = ['George','Ringo','Paul','John'];
for(var i=0,j=names.length;i<j;i++){
  doSomeThingWith(names[i]);
}

//这段代码的糟糕之处在于，它把变量声明放在循环体内了，每次循环都会创建变量
for(var i = 0; i < someArray.length; i++) {
   var container = document.getElementById('container');
   container.innerHtml += 'my number: ' + i;
   console.log(i);
}

//在循环体外声明变量，变量只会创建一次
var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len;  i++) {
   container.innerHtml += 'my number: ' + i;
   console.log(i);
}

用尽量简短的代码

如果可以增加可读性的话，那么使用代码的简短格式是有意义的，下面是一份不完全的列表：

//对于条件判断只有两次的，这是一种冗长的写法
var direction;
if(x > 100){
  direction = 1;
} else {
  direction = -1;
}

//更好的代码
var direction = (x > 100) ? 1 : -1;

//判断一个 变量是否定义，如果否，就赋予一个值，糟糕的代码
if(v){
  var x = v;
} else {
  var x = 10;
}

//更好的代码
var x = v || 10;

//重复了变量名很多次
var cow = new Object();
cow.colour = 'brown';
cow.commonQuestion = 'What now?';
cow.moo = function(){
  console.log('moo');
}
cow.feet = 4;
cow.accordingToLarson = 'will take over the world';

//更好的写法是这样
var cow = {
  colour:'brown',
  commonQuestion:'What now?',
  moo:function(){
    console.log('moo);
  },
  feet:4,
  accordingToLarson:'will take over the world'
};

//重复了很多次数组名
var aweSomeBands = new Array();
aweSomeBands[0] = 'Bad Religion';
aweSomeBands[1] = 'Dropkick Murphys';
aweSomeBands[2] = 'Flogging Molly';
aweSomeBands[3] = 'Red Hot Chili Peppers';
aweSomeBands[4] = 'Pornophonique';

//更好的代码
var aweSomeBands = [
  'Bad Religion',
  'Dropkick Murphys',
  'Flogging Molly',
  'Red Hot Chili Peppers',
  'Pornophonique'
];

单引号和双引号

为了避免混乱，我们建议在HTML中使用双引号，在JavaScript中使用单引号。

//html
<img src="picture.gif" />

//JavaScript
<script type="text/javascript">
document.write('<p>');
</script>

//一段混用的jQuery代码
$('h1').after('<div id="content"><h2>目录</h2><ol></ol></div>');

避免混入其他技术

CSS:假设我们的页面上有必须填入的输入框（拥有class“mandatory”），如果它没有被输入数据，周围就会加上红色边框。

//一段混合了其他技术的代码会这样做：
var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
  if(inputs[i].className === 'mandatory' &&
     inputs[i].value === ''){
    inputs[i].style.borderColor = '#f00';
    inputs[i].style.borderStyle = 'solid';
    inputs[i].style.borderWidth = '1px';
  }
}

//一段良好的代码会这么做：将风格化的事情交给CSS吧
var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
  if(inputs[i].className === 'mandatory' &&
     inputs[i].value === ''){
    inputs[i].className += ' error';
  }
}

HTML:假设我们有内多HTML内容需要用JavaScript来载入，那么使用Ajax载入单独的文件，而不是通过JavaScript处理DOM，后者会让代码难以处理，并且出现难以维护的兼容性问题。

验证JavaScript代码

浏览器处理JavaScript代码可能会非常宽容，但我建议你不要依赖浏览器的解析能力，因此养成了懒散的编码习惯。

最简单的检测你的代码质量的方法是通过一个在线JavaScript验证工具JSLint。

“JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.”
– JSLint Documentation

使用更简单的格式来写innerscript

//早期的代码可能是这样的
<script type="text/javascript" language="javascript">
...
</script>

//现在不用language属性了
<script type="text/javascript">
...
</script>

总是检查数据

要检查你的方法输入的所有数据，一方面是为了安全性，另一方面也是为了可用性。用户随时随地都会输入错误的数据。这不是因为他们蠢，而是因为他们很忙，并且思考的方式跟你不同。用typeof方法来检测你的function接受的输入是否合法。

//如果members的类型不是数组，那么下面的代码会抛出一个错误
function buildMemberList(members){
  var all = members.length;
  var ul = document.createElement('ul');
  for(var i=0;i
//良好的习惯是检查参数是否是一个数组
function buildMemberList(members){
//数组的typeof是object，所以如果要判断是否为数组的话，可以测试它是否拥有数组才有的function：slice
  if(typeof members === 'object' &&
     typeof members.slice === 'function'){
    var all = members.length;
    var ul = document.createElement('ul');
    for(var i=0;i

另一个安全隐患是直接从DOM中取出数据使用。比如说你的function从用户名输入框中取得用户名做某项操作，但用户名中的单引号或者双引号可能会导致你的代码崩溃。

避免全局变量

全局变量和全局函数是非常糟糕的。因为在一个页面中包含的所有JavaScript都在同一个域中运行。所以如果你的代码中声明了全局变量或者全局函数的话，后面的代码中载入的脚本文件中的同名变量和函数会覆盖掉（overwrite）你的。

//糟糕的全局变量和全局函数
var current = null;
function init(){...}
function change(){...}
function verify(){...}

解决办法有很多，Christian Heilmann建议的方法是：

//如果变量和函数不需要在“外面”引用，那么就可以使用一个没有名字的方法将他们全都包起来。
(function(){
  var current = null;
  function init(){...}
  function change(){...}
  function verify(){...}
})();

//如果变量和函数需要在“外面”引用，需要把你的变量和函数放在一个“命名空间”中
//我们这里用一个function做命名空间而不是一个var，因为在前者中声明function更简单，而且能保护隐私数据
myNameSpace = function(){
  var current = null;
  function init(){...}
  function change(){...}
  function verify(){...}
  //所有需要在命名空间外调用的函数和属性都要写在return里面
  return{
    init:init,
    //甚至你可以为函数和属性命名一个别名
    set:change
  }
}();

声明变量的话，总是用var

JavaScript中的变量可能是全局域或者局部域，用var声明的话会更加直观。

//在function中不用var引起的迷惑性问题
var i=0; // This is good - creates a global variable
function test() {
     for (i=0; i<10; i++) {
        alert("Hello World!");
     }
}
test();
alert(i); // The global variable i is now 10!

//解决方法是在function中声明变量也用var
function test() {
     for (var i=0; i<10; i++) {
        alert("Hello World!");
     }
}

使用前置+号来把字符串转化为数字

JavaScript中，“+”操作符即被用来作为数字加，也被用来连接字符串。如果需要求表单中几个值的和，那么用+可能会出现问题。

//会出现问题的代码
<form name="myform" action="[url]">
<input type="text" name="val1" value="1">
<input type="text" name="val2" value="2">
</form>
function total() {
    var theform = document.forms["myform"];
    var total = theform.elements["val1"].value + theform.elements["val2"].value;
    alert(total); // This will alert "12", but what you wanted was 3!
}

//在字符串前面加上“+”，这是给JavaScript的一个暗示：这是一个数字而不是字符串
function total() {
    var theform = document.forms["myform"];
    var total = (+theform.elements["val1"].value) + (+theform.elements["val2"].value);
    alert(total); // This will alert 3
}

避免使用eval()方法

JavaScript中的eval()方法是在运行时把任何代码当作对象来计算/运行的方法。实际上由于安全性的缘故，大部分情况下都不应该用 eval()，总是有一种更“正确”的方法来完成同样的工作的。基本原则是，eval is evil，在任何时候都不要用它，除非你是一个老手，并且知道你不得不这样做。

for in语句

遍历一个对象中的所有条目的时候，用for in语句是非常方便的。但有时候我们不需要遍历对象中的方法，如果不需要的话，可以加上一条filter。

//加上了一个过滤器的for in语句
for(key in object) {
   if(object.hasOwnProperty(key) {
      ...then do something...
   }
}

不要偷懒省略”和{}

从技术上说，你可以忽略很多花括号和分号。

//虽然看上去很不对头，大部分浏览器都能正确解析这段代码
if(someVariableExists)
  x = false

//这个代码看上去更不对头了，咋眼一看似乎下面的句都被执行了
//实际上只有x=false在if中
if(someVariableExists)
   x = false
   anotherFunctionCall();

所以，要记住的原则是：1.永远不要省略分号；2.不要省略花括号，除非在同一行中。

//这样是OK的
if(2 + 2 === 4) return 'nicely done';

获取对象属性的时候用方括号而不是点号

在JavaScript中取得某对象的属性有两种方法：

//点号标记
MyObject.property

//方括号标记
MyObject["property"]

如果是用点号标记取得对象的属性，属性名称是硬编码，无法在运行时更改；而用方括号的话，JavaScript会求得方括号内值然后通过计算结果来求得属性名。也就是说用方括号标记的方式，属性名称可以是硬编码的，也可以是变量或者函数返回值。

//这样是不行的
MyObject.value+i

//这样就没有问题
MyObject["value"+i]

假设JavaScript会被禁用

我知道这样的假设会伤害JavaScript开发者的感情，可是在目前数据不明朗的情况下我们为了安全起见应该做这样的假设。这是渐进增强中很重要的一部分。

使用JavaScript库

现在有很多非常流行的JavaScript库，比如YUI和jQuery、Dojo。它们的缺点是需要下载一个额外的文件，优点却更多：兼容性更强；代码更简单易懂。好的库有很多，但你不应该在一个项目中把它们都用上，因为可能存在兼容性问题。选择一个自己习惯的就好。

不要忘记的一点是，原生的JavaScript毫无疑问更快，如果是小规模的使用，最好还是用原生的。

1. async属性和defer属性都是用来标识脚本的执行方式。

2. 对于内联JavaScript（没有src属性），不能指定async和defer属性

3. 设置async，不设置defer。脚本将会异步执行，也就是在脚本下载完成后立即执行。

4. 不设置async，设置defer。脚本将会在页面DOM解析完毕后执行。

5. 两个都不设置。脚本的下载和执行是阻塞模式，将会阻塞DOM树的继续渲染。

lzynihao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录