Creeper's Blog

Creeper's Blog

关于前端,工作和学习过程中遇到过许多问题,也解答过许多别人的问题。这篇博客权当一个记录,记录一些有价值的问题。

先看一道阿里面试题(来自阿里2015春季前端实习校招笔试题):

对于下列程序运行结果,符合预期的是:

1
2
3
4
5
6
7
8
9
10
11
12
13
var str = 'global';

function printStr() {
console.log(str);
}

function testScope() {
var str = 'local';
printStr();
}

printStr(); // 毫无疑问,输出 "global"
testScope(); // 还是输出 "global"

以一段简单的代码开始:

1
2
3
4
5
6
7
8
9
10
$.ajax({/*...*/}).done(function(data) {
var list = data.list, // will be like ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
tmp = '',
i,
len = list.length;
for(i = 0; i < len; i++) {
tmp += '<li> index: ' + (i + 1) + ', content: ' + list[i] + '</li>';
}
$('#wrap').append(tmp);
});

这段代码就是实现根据数据拼接字符串,修改文档DOM的功能,很简单,大概每个前端程序员都写过,或至少感到熟悉。

什么是命名空间,变量污染,变量声明提升,预编译?如何检查一段代码执行后是否声明了全局变量?

这些问题聚焦于一个核心:变量与作用域,而这恰恰是JavaScript作为一门语言没有处理好的地方,所以有很多疑问都很正常。

这篇是「JavaScript Hoisting」的进阶篇,参照了大牛Ben「JavaScript Scoping and Hoisting」

首先介绍一下Ben

Ben is a 25 year-old software engineer. He lives and works in San Francisco. Many people think he invented the term “hoisting” in JavaScript, but this is untrue.

先给一个高大上的术语「JavaScript Hoisting」——没听过的人可能是一头雾水,理解的人则可能会心一笑。hoist是提升的意思(百度翻译):

1
2
3
4
5
hoist:
-----------------------

vt.升起,提起;
vi.被举起或抬高;
n.起重机,升降机; 升起; <俚>推,托,举;

但知道这个单词可能无助于理解这个术语。但一贯地,我认为概念可以提纲契领,所以定义先来:

Hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).

什么是模块

你可以把模块当作你app不同部分(控制器、指令、过滤器等等)的容器。

为什么需要模块

大多应用有个main方法实例化app的各个部分并把它们联系起来。

angular app没有main方法。作为代替,模块声明性地指定一个app怎么启动。这样做的几个优点:

  • 声明性的处理更易理解;
  • 可以打包代码作为可复用模块;
  • 因为模块的延迟执行,不同模块可以以任意顺序(甚至并行)加载;
  • 单元测试更快;
  • 端到端测试可以用模块来覆写配置。

上一章末尾已经讲到了scope,其它地方也或多或少接触到了scope,这一章就来具体讲讲scope。

什么是scope

scope是一个对象。scope是一个引用模型(refer to model)的对象。scope是一个提供给表达式的执行环境。scope是以层次结构来组织的,模拟了app的DOM结构。scope能检测表达式和传播事件。

scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.

html编译,这是angular的核心概念或者说重难点。这章就是围绕HTML Compiler展开,既算是自定义指令的深入,也算是对angular工作原理的一点解析。

首先注意:如果只是初学者,或者暂时不想深入,那么,跳过本章也可。