Modular Programming with JavaScript-Packt Publishing 2016（读书笔记）

Modular Programming with JavaScript

目录

• 1 为什么模块化
• 2 JavaScript重要的OOP概念
• 3 模块设计模式
• 4 设计简单的模块
• 5 模块增强
• 6 克隆、继承和子模块
• 7 Base、Sandbox and Core
• 8 应用实现：Put it all together
• 9 模块化应用设计与测试
• 10 企业级模块化设计、AMD、CommonJS与ES6模块

为什么模块化

JavaScript重要的OOP概念

1. 单例对象：var MyObj = {};
2. this
   1. 函数内的this：
      1. f()作为函数直接调用：this引用外部的window（但是嵌套作用域的情况下呢？）
      2. new f()：创建了一个新的context
   2. 对象常量内的this：引用自身
      1. 但是如果(MyObj.f=MyObj.f)()，则this又变成引用window了
      2. 如果MyObj.f内部返回一个闭包，则闭包内的this引用window *
         1. 要让这个闭包引用MyObj实例，需要先在外部var that=this;
3. Closures
4. Encapsulation and scoping
   1. function内部的var相当于private变量。also, "函数作用域"
   2. IIFE可以在function内部创建一个新的private作用域，其中定义的var外部不可访问
5. Inheritance
   • JavaScript只支持实现继承（vs 接口继承）
   1. Prototype chaining
      1. ChildType.prototype = new BaseType();
      2. ？最佳实践：ChildType.prototype.constructor = ChildType;
   2. Constructor stealing
      1. function ChildType(){ BaseType.call(this); } //缺点：BaseType.prototype上定义的属性没有被ChildType实例共享
   3. Parasitic combination inheritance
      1. 前2者的组合：BaseType.call(this); 及 ChildType.prototype = BaseType.prototype; 之后定义ChildType自己的方法...
6. Constructor property
   1. ChildType.prototype.constructor = ChildType;
7. Native support for inheritance
   1. ES5原型继承：Object.create()

模块设计模式

1. 匿名函数内部返回匿名对象：
   1. var MySingletonObject = function(){ var ....; return { getName: function(){...}
      
      
2. 对象工厂（最佳实践？）
3. Creating loose coupling among modules
   1. ApplicationInitModule（作者自己编写的一个类，负责管理模块的注册和初始化）

设计简单的模块

1. SPA
2. MV*
3. Application controller
   1. 职责：视图更新（PageUpdater）、客户端存储、通信、消息、Log
4. Application view
5. 我还以为这里作者会讲解一个最简单的React呢，算了

模块增强

克隆、继承和子模块

1. constructor函数，prototype
2. Shallow cloning与Deep cloning
3. jQuery.extend
4. lodash：var deep = _.cloneDeep(objects);
5. var cloneObj = (JSON.parse(JSON.stringify(originalObj)));
6. 定制clone：//primitive对象直接赋值就好了
   1. var newClonedObj = new this.constructor();
7. Module inheritance using __proto__ object
   1. 这与函数对象的prototype属性有什么区别？
8. Submodules

Base、Sandbox and Core

1. Base：aware并适配第3方框架（jQuery, Dojo, lodash, ...）
2. Sandbox
   1. Isolating the sandbox instances from each other
   2. ... sandBox.contextObj.handelFavLinkClick(e.target);
3. Core：实现业务逻辑，MV*，logging，...
   1. Providing plug-and-play capability
      1. 使用localStorage作为cache
   2. mainCore.jQuery = $ = ImagesInc_Base.getBaseModule(); //从全局导入到模块内部？

应用实现：Put it all together

1. 存储component's object definition描述到localStorage？？？
2. Publish-subscribe implementation in MainCore
   1. sandBox.publishCustomEvent？

模块化应用设计与测试

企业级模块化设计、AMD、CommonJS与ES6模块

1. AMD：
   1. define('moduleOneId', ['dependency'], function(dependency) { return { ...
      
2. CommonJS
   1. exports.someFunc = function(){ ...
3. ES6 module
   1. export function sayHello(name) { ... }
   2. function sayBye(name) { ... }
   3. export sayBye;

这本书内容有点矬，很多地方非常空洞，与核心概念“JS模块化编程”并不搭界。