脚本执行方式 - 文档加载 - 面向浏览器编程
发布在Javascript编程指南2014年5月21日view:3485
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

原文: 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的其他的角落也有不少其他执行脚本的入口吧。

评论
发表评论
暂无评论
WRITTEN BY
ELFVision
养猫的互联网绅士
TA的新浪微博
PUBLISHED IN
Javascript编程指南

enter image description here

这是一本开源的Javascript编程指南。内容从最简单的语法基础,到复杂的框架编写、项目自动化,都有覆盖。这本开源书籍大致分为三个部分:Javacsript核心基础、浏览器编程、NodeJS环境编程。也希望大家能共同编写!

非常欢迎大家一起来写完这本书!请直接联系我来获取合作。

  • Email: robinqu@gmail.com
  • Weibo: @ELFVision

有两方面大家可以来帮忙:

  • 来抓bug:文章勘误、演示代码更正等等
  • 补充内容
    • 对于某个主题,你希望添加内容
    • 或者你觉得你可以自主写一些相关主题
    • 或是你已经写过相关主题,我也很希望能够直接收录优秀的好文章!

大家也可以直接Fork项目,然后通过PullRequest来提交任何修改。

我的收藏