Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Learning JavaScript in Three Web Apps(中文)

Dexter.Yy
August 08, 2013

Learning JavaScript in Three Web Apps(中文)

iOS卡牌游戏、TodoMVC、真实的豆瓣产品,通过3个从小到大,从原始到专业的web应用项目,来学习JS语言和基于JS的前端开发

Dexter.Yy

August 08, 2013
Tweet

More Decks by Dexter.Yy

Other Decks in Programming

Transcript

  1. DOM 是平台(浏览器) ⾃自带的、 特定状态下的、 彼此之间 存在关系的, 能被 JS 访问 和调⽤用的

    『UI/视图组件』 实例对象 编辑 HTML 就是在 编辑 runtime 中 对象的状态和关系 HTML 和 CSS 是前端开发者的画板和 Interface Builder
  2. 创建 app.js ECMAScript 5 (ECMA-262-5) Strict Mode TC39 ECMA-262 (ECMAScript,

    ES, JavaScript, JS) ECMA-357 (E4X) ECMAScript 3 (ECMA-262-3, JavaScript 1.5) JavaScript 1.6 JavaScript 1.8 ECMAScript 4 (ActionScript 3) ECMAScript 5 (ECMAScript 3.1) ECMAScript 5.1 (JavaScript 1.8.5) ECMAScript 6 (ECMAScript Harmony, ES.next, JavaScript 2.0)
  3. Function Object Function Object -- * JS最最核⼼心的数据类型和特殊概念 * A collection

    of named values (‘value’: any primitive datatypes, or reference to any objects) * ~= hash table * ~= dictionary * != class instance * Pass by reference (~= pointer) * 除 primitive type之外,万物皆为object * 两种创建⽅方法:Literal(字⾯面量/直接 量)、‘new’操作符 Primitive datatype
  4. Function Object Function Function -- * 包含 executable code 的

    object * Named function 或 Anonymous function * ⽤用字⾯面量创建时,有 Function Declaration 和 Function Expression 两种⽅方式 * ⽤用法:structured programming (like C), late binding 的 object method、constructor、创建 lexical scope(词法作⽤用域)、Currying、传递 block (like Ruby)、元编程、…… * 某些 built-in / host 对象的 executable code 是 native code Primitive datatype
  5. Function Object Function Primitive datatype -- * 3 + 1:number、string、boolean

    + undefined * null 是 object,Infinity、NaN 等都是 number * Pass by value * 前三种有 “Wrapper Class” (like Java),但 100% 情 况下都只使⽤用字⾯面量,Wrapper的价值是众多原⽣生 ⼯工具函数(静态⽅方法) Primitive datatype
  6. Activation object == Variable object in function context { app:

    {...}, arguments: [arguments object], this: {Global object} } Global object == Variable object in global context { app: {...}, window: {Global object}, this: {Global object}, Math: {...}, Array: {...}, Object: {...}, ... }
  7. 进⼊入 execution context 解析形式参数和所有declaration(函数声明和变 量声明),填充当前上下⽂文的 Variable object { Card: function(){...}

    exports: function(){...} } 从上⾄至下执⾏行代码 退出函数上下⽂文,返回上⼀一级的上下⽂文继续执 ⾏行代码,刚才的 Variable object 作为 Scope 被 Card、exports 等还能继续访问的函数继续保存
  8. 进⼊入 execution context 解析形式参数和所有declaration(函数声明和变 量声明),填充当前上下⽂文的 Variable object { Card: function(){...}

    exports: undefined, a: undefined, c: undefined, d: 1 } 从上⾄至下执⾏行代码 { Card: function(){...} exports: function(){...}, a: 10, c: 30, d: 1 } Global Object: { window: {Global}, card: function(){...}, b: 10, ... }
  9. Contructor(构造函数) 是 普通函数,不是Class prototype 是普通对象 Prototype based model of OOP

    new 操作符⽤用函数的 prototype 属性作 为模板,复制出新的对象,Card 本⾝身的 return 只要不是对象就被忽略 以⼯工⼚厂函数 / Wrapper / 模块对象作为 public API,避免紧耦合等问题
  10. this 是 late binding 的 (new Card().contents)() 时, this 指向新对象,

    (false || new Card().contents)() 时, this 指向 Global Object ⽤用 new 调⽤用 Card 时,在进⼊入 Card 函数上下⽂文的阶段,this 被指向复制 出来的新对象 Card 和 contents 被作为属性(property)形式的 引⽤用值被调⽤用时,this 指向属性所属的对象,当 作为 Identifier (⽐比如变量名)形式的引⽤用值或实 际值被调⽤用时,this 被默认填充为 Global Object
  11. jQuery style 的存取器 (Ad-Hoc Polymorphism) ⽤用下划线前缀显式声明private member,但不存在真正的约束 this._contents 使⽤用前不需要声明,因为 JS

    的 object 都是 dynamic mutable object, 不存在的属性、没有实参的形参、未赋值的 变量,访问得到的都是 undefined prototype 只应该⽤用来定义⽅方法,属性必 须在构造函数内定义才能保证每个实例 都持有⾃自⼰己的属性(引⽤用类型)
  12. 函数内的函数,都会形成 Closure (闭包),通过⾃自⼰己 的 Scope 存储上层函数的 “Variable object” (因此也能 访问到上层函数的

    Scope 存储 的更上层 “Variable object” ) 假如 compare 被暴露给外部 访问,则 match 的上下⽂文会 ⼀一直保留,不会被 GC(垃圾 回收)
  13. 原⽣生⽅方法得到的是 nodeList 对象,不是 Array ⽤用以上model来修改视图,测试效果 nodeList 有 length 属 性、接受数

    字键名,所 以能⽤用 Array 的迭代 器(duck typing) 作为配置的HTML应该尽可能抽象 和语义纯粹,⽤用于实现特定外观的 结构可由代码⽣生成
  14. 约定:不允许在 app.js 中直接操作 DOM 有了这个约定,就必须将 视图的具体实现拆分出去, app.js 仅⽤用于调⽤用和组合 view 和

    model 模块、监听 消息、公开接⼝口,也就是 controller 创建 view.js 给 view 传递纯粹的、逻辑⽆无关 的数据,⽽而不是 model 本⾝身
  15. Smalltalk-80 Cocoa Ruby On Rails ASP.NET Model View Controller: History,

    theory and usage 很类似 Cocoa 的 MVC 分层
  16. view/ actionview 是 UI库⾥里 moui/ actionview 的 进⼀一步封装, 满⾜足项⺫⽬目的业 务需求

    view.js ⾥里使⽤用 view组件的接 ⼝口,⽽而不是直 接⽤用 DOM 的 接⼝口
  17. 可以监听 model 的改变, ⾃自动更新 UI (View Model Binder) ⽤用 model

    ⾃自⼰己的⽅方法⽣生成 纯数据传给视图
  18. • 真实的⾖豆瓣产品 • 对⽐比:服务器端web框架中的静态⽂文件 • 项⺫⽬目中的⽂文件都是源代码,不再兼任『静态⽂文 件』 • 静态环境中的预处理/编译/构建 •

    ⽤用任务管理⼯工具整合⼤大量⼯工具和⼯工作流 • 应⽤用本⾝身的组件化,业务逻辑的分层,与服务器 端视图解耦 App III - GalEdtitor