狠狠撸

Javascript primer plus
blankyao

目录：

? 几个知识点
? 几种事件处理模型
? 异步编程
? CommonJs介绍
? 未来的javascript
? 开发工具
? 推荐书籍
? 推荐阅读资料
? 参考资料

几个知识点

–上下文
–作用域链
–闭包
–原型
–继承

几个知识点——上下文

当前代码执行所处的环境（this所指的对象）

可以通过apply/bind/call来改变上下文

示例：apply.js

几个知识点——作用域链（1）

JavaScript中的函数运行在它们被定义的作用域里,而丌是它们被执行的作用域里

思考：
var name = 'blankyao';
function echo() {
alert(name);
var name = '姚东旭';
alert(name);
}

echo();

几个知识点——作用域链（2）

1. 定义函数echo时，js解释器将作用域链(scope chain)设置为当前echo所在的上下
文（环境）

2. 执行函数echo的时候，进入执行环境(excution context)

3. 执行环境创建一个调用对象(call object)（丌具有原型的内部对象，丌能直接访问
），然后将该活劢对象添加到作用域链的最顶端

4. 添加函数echo的命名参数到调用对象

5. 定义var语句定义的局部变量

几个知识点——闭包（1）

闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因
而这些变量也是该表达式的一部分

说白了，

JavaScript中所有的
function都是一个闭包

几个知识点——闭包（2）

基础应用：
防止污染全局变量
在内存中长期维持一个变量
实现私有属性戒方法（Private Members in JavaScript ）

具体应用：
curry memoization
注意：
IE内存泄漏 http://msdn.microsoft.com/en-
us/library/Bb250448

几个知识点——原型（1）

Brendan Eich丌想把javascript设计的过于复杂

当时正是面向对象思想比较流行的时期，设计了简化的面向对象的机制，没有引入类
的概念，引入了苍别飞命令和辫谤辞迟辞迟测辫别

几个知识点——原型（2）

可以像模仿其他面向对象语言
比如：

jQuery
作者

from http://ejohn.org/blog/simple-class-instantiation/

几个知识点——继承（1）

javascript是基于原型的继承
当获取一个对象的属性时，会遍历prototype链直到找到同名的属性

if (typeof Object.create !== 'function') {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}
newObject = Object.create(oldObject);

from http://javascript.crockford.com/prototypal.html

几个知识点——继承（2）

简单强大的继承

又是他

From http://ejohn.org/blog/simple-javascript-inheritance/

几种事件处理模型

? PubSub模型
? 统一事件分发
? 自定义事件

几种事件处理模型——PubSub模型

? 分离业务逻辑和UI
? 避免复杂的耦合
? 统一管理事件

示例：example/PubSub/index.html

Dojo 等框架中都有实现

几种事件处理模型——事件分发模型

几种事件处理模型——自定义事件

示例：

1. Tangram的事件中心
2. YUI Custom Event System

异步编程

异步编程的重要性丌言而喻，对于JavaScript来说更是如此。JavaScript并没有
提供任何能够阻塞代码执行过程的机制，任何一个“耗时”的操作都必须写成异
步的模式。传统的异步操作会在完成时通过回调函数传回结果，我们可以在回调
函数中进行下面的工作。

但这也是造成异步编程十分困难的主要原因。我们一直习惯于“线性”地编写逻
辑，但是异步操作所带来的大量回调把我们的算法分解地支离破碎。我们丌能用if
来实现逻辑分支，也丌能用while/for/do来实现循环。更丌提异步操作之间的组
合、错误处理以及取消操作了。

——from : jscex文档 http://www.sndacode.com/projects/jscex/wiki

异步编程——案例（1）（箩蝉肠别虫）

异步编程——案例（2）（jQuery deferred）

http://api.jquery.com/category/deferred-object/

颁辞尘尘辞苍闯厂介绍

http://seajs.com/docs/zh-cn/commonjs-modules.html
http://www.slideshare.net/dexter_yy/js-
6228773
from http://www.commonjs.org/

未来的javascript

? ES5
– 介绍
– es5-shim
– es5-compat-table
? CoffeeScript

未来的箩补惫补蝉肠谤颈辫迟——贰厂5

更强的Object

Strict mode

改进的API扩展

未来的javascript——CoffeeScript

CoffeeScript is an attempt to expose the good parts of JavaScript in a
simple way.

link : http://jashkenas.github.com/coffee-script/

开发工具

? JsLint http://www.jslint.com/
? jsbeautify http://jsbeautifier.org/

推荐资源

? How Browsers Work: Behind the Scenes of Modern Web Browsers
? PPK http://www.quirksmode.org/js/contents.html
? Javascript garden http://bonsaiden.github.com/JavaScript-Garden
? Scalable JavaScript Application Architecture
http://www.slideshare.net/nzakas/scalable-javascript-application-
architecture
? Updating JavaScript: ES5 http://whereswalden.com/files/mozilla/es5-
lightning/

参考资料

? Prototype.js YUI jQuery Tangram Qwrap jscex
? CommonJS seajs Ozjs
? Decoupling Data and UI: PubSub http://blog.narcvs.com/?p=43
? 从 if else 到 switch case 再到抽象
http://www.baiduux.com/blog/2010/11/01/from-if-else-to-switch-case-
then-to-abstraction
? Javascript – How Prototypal Inheritance really works
http://blog.vjeux.com/2011/javascript/how-prototypal-inheritance-really-
works.html
? JavaScript异步编程的Promise模式
http://www.infoq.com/cn/news/2011/09/js-promise
? 通用JS时代的模块机制和编译工具 http://www.slideshare.net/dexter_yy/js-
6228773

狠狠撸

Javascript primer plus

Recommended

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Javascript primer plus (20)

Javascript primer plus