javascript primer plus
TRANSCRIPT
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设计的过于复杂
当时正是面向对象思想比较流行的时期，设计了简化的面向对象的机制，没有引入类
的概念，引入了new命令和prototype
几个知识点——原型（2）
可以像模仿其他面向对象语言
比如：
from http://ejohn.org/blog/simple-class-instantiation/
jQuery作者
几个知识点——继承（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）（jscex）
异步编程——案例（2）（jQuery deferred）
http://api.jquery.com/category/deferred-object/
CommonJS介绍
from http://www.commonjs.org/
http://www.slideshare.net/dexter_yy/js-
6228773
http://seajs.com/docs/zh-cn/commonjs-modules.html
未来的javascript
• ES5
– 简介
– es5-shim
– es5-compat-table
• CoffeeScript
未来的javascript——ES5
更强的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
没了