《编写高质量代码--改善JavaScript程序的188个建议》学习记录（六）

2019独角兽企业重金招聘Python工程师标准>>>

JavaScript编程规范和应用
（一）准确分析JavaScript执行顺序
alert(a);   //undefined
var a = 1;
alert(a);   //1
  由于变量声明实在预编译期进行的，因此，在执行期间，变量对所有代码来说都是可见的，执行上面的代码，提示的值是undefined，而不是1，这是因为变量初始化过程发生在执行期而不是预编译期。在执行期，JavaScript解释器是按着代码先后顺序进行解析的，如果在前面代码行中没有为变量赋值，那么JavaScript解释器就会使用默认值undefined，由于在第二行中为变量a赋值了，因此在第三行代码中会提示变量的值为1而不是undefined。
    同理，在下面实例中，在函数声明前调用函数也是合法的，并能够被正确解析，因此，返回值为1
   f();  //1
   function f(){
     alert(1);
}
但是，如果按照下面方式定义函数，那么JavaScript解释器会提示语法错误
f();   //undefined
var f = function(){
    alert(1);
}
在上面的代码中定义的函数仅作为值复制给变量f，因此，在预编译期，JavaScript解释器只能为声明变量f进行处理，而对于变量f的值，只能等到执行期按顺序进行赋值，自然就会提示语法错误，提示找不到对象f。
 由于JavaScript是按块执行的，因此在一个JavaScript块中调用后面块中变量或函数就会提示语法错误，例如，在JavaScript解释器中执行下面代码时就会提示语法错误，显示变量a未定义，对象f找不到。
    <script type="text/javascript">
       alert(a);
       f();
     </script>
  <script type="text/javascript">
      var a = 1;
      function f(){
        alert(1);
      }
  </script>
  虽然JavaScript是按块执行的，但是不同块都属于同一个全局作用域，也就是说，块之间的变量和函数是可以共享的。由于JavaScript是按块处理代码，同时又遵循html文档流的解析顺序，因此在上面示例中会看到语法错误，但是在文档流加载完毕后再次访问就不会出现这样的错误，例如，把访问第2个代码块中的变量和函数的代码放在页面初始化事件函数中，这样就不会出现语法错误了。
      <script type="text/javascript">
    window.onload = function(){
       alert(a);
       f();
    }
     </script>
  <script type="text/javascript">
      var a = 1;
      function f(){
        alert(1);
      }
  </script>
  如果一个页面中存在多个window.onload事件处理函数，那么只有最后一个才是有效的，为了解决这个问题，可以吧所有脚本或者调用函数都放在同一个onload事件处理函数中
 
 （二）关于document.write
     document.write('<script type="text/javascript">');
     document.write('f();');
     document.write('function f(){');
     document.write('alert(1);');
     document.write('}');
     document.write('<\/script>   ');
     使用document.write()方法输出的JavaScript脚本字符串必须放在同时输出的<script>标签中，否则JavaScript解释器会因为不能识别这些合法的JavaScript代码而作为普通的字符串显示在页面文档中，例如，下面的代码就会把JavaScript代码显示出来，而不是执行它：
     document.write('f();');
     document.write('function f(){');
     document.write('alert(1);');
     document.write('}');
  通过document.write()方法输出并执行脚本也存在一定的风险，因为不同的JavaScript引擎对其执行顺序不同，同时不同浏览器在解析是也会出现bug
  （1）找不到通过document.write()方法导入的外部JavaScript文件中声明的变量或函数，例如：
     document.write('  <script type="text/javascript" src ="test.js"><\/script>');
     document.write('<script type="text/javascript">');
     document.write('alert(n);');
     document.write('<\/script>   ');
     alert(n+1);
     分别在不同浏览器中测试，均会发现提示语法错误，找不到变量n,也就是说，如果在JavaScript代码块中访问本代码块使用document.write()方法输出的脚本导入的外部JavaScript文件所包含的变量，会显示错误，同时，如果在IE中，不仅在脚本中，在输出的脚本中也会提示找不到输出的导入外部JavaScript文件的变量
   （2）不同JavaScript引擎对输入的外部导入脚本的执行书序略有不同，例如:
       <script type="text/javascript">
     document.write('  <script type="text/javascript" src ="test.js"><\/script>');
     document.write('<script type="text/javascript">');
     document.write('alert(2);');
     document.write('alert(n+2);');
     document.write('<\/script>  ');
     </script>
  <script type="text/javascript">
     alert(n+4);
  </script>
  上面这段代码在高级浏览器中执行时分别会弹出：1,2,3,5，但是在IE中会弹出：2，错误，1,5
  可以把凡是输出脚本导入的外部文件，都放在独立的代码块中，这样根据上面介绍的JavaScript代码块执行顺序，就可以解决不同浏览器的不同执行顺序的问题，以及可能存在的bug，例如：
      <script type="text/javascript">
     document.write('  <script type="text/javascript" src ="test.js"><\/script>');
  </script>
  <script type="text/javascript">
     document.write('<script type="text/javascript">');
     document.write('alert(2);');
     document.write('alert(n+2);');
     document.write('<\/script>  ');
     </script>
  <script type="text/javascript">
     alert(n+4);
  </script>
  这样，在不同的浏览器中都能够保证按顺序执行上面的代码
 （三）减一使用直接量
 在JavaScript中有多种方法创建对象和数组，但是没有什么比创建对象和数组直接量更快的。例如：
 var obj = {
   name : "sunshine",
   age: 32
}
 var arr = ['name','age'];

转载于:https://my.oschina.net/sunshinewyf/blog/618885