脚本执行方式 - 文档加载 - 面向浏览器编程

原文: http://pij.robinqu.me/Browser_Scripting/Document_Loading/ScriptExecution.html

源代码: https://github.com/RobinQu/Programing-In-Javascript/blob/master/chapters/Browser_Scripting/Document_Loading/ScriptExecution.md

  • 本文需要补充更多例子
  • 本文存在批注,但该网站的Markdown编辑器不支持,所以无法正常展示,请到原文参考。

脚本执行方式

执行入口

  • script标签
  • eval函数
  • Function构造函数
  • setTimeoutsetInterval函数
  • HTML标签内的事件绑定相关的內联函数(onclick等)
  • 其他hacks

script标签

最基本,最常用的脚本引入方式。例如:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

尽管在HTML4和XHTML里面,要求开发者使用type属性来制定脚本的类型。但是主流浏览器都默认认为脚本类型是text/javascript

在HTML5的规范内1script标签的type属性是完全可选的。

eval函数

  • eval is evil
  • eval有访问本地scope的权利
var a = 1;
eval("a=2");
a === 2; // ==> true

Function构造函数

  • function是“first-class citizen”2;自然有相应的构造函数
  • new Function(arg1, arg2, ..., fnStr)
  • Function3构造函数本质是创建一个函数对象;其创建的函数执行也并不能访问其所在创建环境的闭包,只能访问本地作用域(local scope)和全局作用域(global scope)
  • Function()new Function()效果一样
(function() {
  var a = 1;
  var func = new Function("a=2");
  func();
  a === 2; // ==> false
}());
a === 2; // ==> true

setTimeout和setInterval

setTimeout("alert('haha')", 0);

这个和eval有异曲同工之妙,对作用域的访问也是类似的。

另外要说名,以上几点,除了script标签的方法之外,其他方法都在strict模式4下不可用。

HTML內联事件回调

<a href='#hello' onclick="alert(this.href)">Say hello</a>

这样如同在click事件的Target Phase运行了一个回调。this指向目标元素本身。

其他Hack

利用MessageChannel等新特性可以触发一些函数的执行5。也许Javascript的其他的角落也有不少其他执行脚本的入口吧。

  1. http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#the-script-element 

  2. https://developer.mozilla.org/en-US/docs/functional-javascript/First-class_citizen 

  3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function 

  4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode 

  5. https://github.com/kriskowal/asap/blob/master/asap.js 

    原文作者:RobinQu
    原文地址: https://segmentfault.com/a/1190000000515175
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞