可扩展的JavaScript应用体系结构
程序员文章站
2022-03-06 13:31:33
...
今天无意中看到 Yahoo! 资深前端工程师 Zakas 的一个 slide :
Scalable JavaScript Application Architecture
看完之后觉得很震撼，思路开阔了许多，发现原来前端的代码可以这样架构，写得如此优雅。这个 slide 是值得你反复看的（Jay.li 同学说结合 YUI 3 的代码看效果更佳，等有空我也来学习一下 YUI 3 的源码），这里总结一下其中的精华部分：
1. An application framework is like a playground for your code,provides structure around otherwise unrelated activities; A JavaScript library is like a toolbox,you can build any number of things using the tools.
框架（framework）和库（library）是不一样的，我们用到的JQuery, dojo, YUI 等都只是库，而不是框架，你可以随意选用这些好用的工具，但是应用程序的框架还是要靠你自己来搭建，因为每个程序都有它各自的特点。
2. Module Theory:Everything is a module
一切皆模块。在一个 web application 中模块是什么意思呢？模块就是在整个架构中的一组独立功能的集合。任何一个模块都应该是独立的，不依赖于其它模块。松耦合可以让我们在不影响其它模块的情况下修改一个模块。
3. Each module has its own sandbox(An interface with which the module can interact to ensure loose coupling)
每个模块都有自己的 sandbox ，这个 sandbox 就是用来降低模块间耦合度的，它是与模块进行交互的接口。
4. 一个 web application 的架构应该包括四个部分：Modules, Sandbox, Application Core, Base Library.
Module 只能“接触”它自身以及它所在 sandbox 的内容。那么这四个部分中哪一个是贯穿整个架构并知道将要构建的 application 呢？ None of them. 是的，所有的模块对于全局都是“无知”的。整个架构中的这四个部分就好像拼图游戏中的那些小方块，每一个都不清楚最后要拼的图是什么，它们只需要做好自己的事情就行了。
5. The web application is created as a result of all parts doing their job.
模块的工作是什么呢？ 举例来说， YAHOO! 首页的新闻模块就是向用户展示新闻，热门搜索模块就是为了告诉用户最热门的关键词。模块的工作就是创建一个有意义的用户体验。 当所有的模块都做好了它们的事情的时候，整个 application 也就建好了。
6. Module Rules.
一个模块需要严格遵守下面的规则：
Hands to yourself
– Only call your own methods or those on the sandbox （只调用自己或者自己的sandbox 中的方法）
– Don’t access DOM elements outside of your box （不要访问 sandbox 之外的DOM元素）
– Don’t access non-native global objects （不要访问非原生的全局对象）
Ask, don’t take
– Anything else you need, ask the sandbox（所有需要的东西都只能从 sandbox 中获取）
Don’t leave your toys around
– Don’t create global objects （不要创建全局对象）
Don’t talk to strangers
– Don’t directly reference other modules （不要直接引用其它的模块）
7. Sandbox Jobs
Sandbox 应该有下面的作用：
Consistency
– Interface must be dependable （接口应该是可以信赖的）
Security
– Determine which parts of the framework a module can access （决定一个模块可以访问框架的哪些部分）
Communication
– Translate module requests into core actions （将模块的请求转化成 application core 的动作）
8. Application Core Jobs
Application Core 需要做下面的工作：
Manage module lifecycle
– Tell modules when to start and stop doing their job （控制模块的初始化和销毁）
Enable inter-module communication
– Allow loose coupling between modules that are related to one another （允许模块间进行松耦合的交互）
General error handling
– Detect, trap, and report errors in the system （进行错误处理）
Be extensible
– The first three jobs are not enough! （可扩展性）
为什么需要扩展呢？因为创建好的 web application
总是在不停变化，而且你无法预测会出现什么变化，所以需要有良好的可扩展性。AJAX
功能可以算作一个扩展，它会为模块隐藏所有请求的细节，而模块只需要根据扩展提供的接口发送请求并获取自己想要的数据。
9. Base Library
基础库应该可以提供最基本的功能：
Browser normalization
– Abstract away differences in browsers with common interface（为所有浏览器提供统一接口）
General-purpose utilities
– Parsers/serializers for XML, JSON, etc. （基本的XML, JSON 处理功能）
– Object manipulation （对象操作）
– DOM manipulation （DOM 操作）
– Ajax communication （AJAX 异步通信）
Provide low-level extensibility （底层可扩展）
大部分的web application 都和基础库耦合得太紧，这句话我要加粗显示，想一想我们见到的应用吧，几乎所有的都是特别依赖于某个库，比如 JQuery , 所有的东西都紧紧耦合在 JQuery 之上。而理想化的情况是：只有 Application Core 这一部分才知道底层用的是什么库，而 Module 和 Sandbox 根本不需要去关心。
10. 总结
一个理想的 web application 架构应该是这样的：
只有 base library 知道使用的是哪一个浏览器
只有 Application core 知道正在使用哪一个 base library
只有 sandbox 知道 Application core 是什么样子
Module 只了解 sandbox 和它自身
这四个模块都不需要知道web application 的全貌
一句话，所有的部分都只对它上层的那部分可见，而且都不需要关心整个架构的全貌。 再来看图吧：
原文来自：Dreamer’s Blog-Scalable JavaScript Application
Scalable JavaScript Application Architecture
看完之后觉得很震撼，思路开阔了许多，发现原来前端的代码可以这样架构，写得如此优雅。这个 slide 是值得你反复看的（Jay.li 同学说结合 YUI 3 的代码看效果更佳，等有空我也来学习一下 YUI 3 的源码），这里总结一下其中的精华部分：
1. An application framework is like a playground for your code,provides structure around otherwise unrelated activities; A JavaScript library is like a toolbox,you can build any number of things using the tools.
框架（framework）和库（library）是不一样的，我们用到的JQuery, dojo, YUI 等都只是库，而不是框架，你可以随意选用这些好用的工具，但是应用程序的框架还是要靠你自己来搭建，因为每个程序都有它各自的特点。
2. Module Theory:Everything is a module
一切皆模块。在一个 web application 中模块是什么意思呢？模块就是在整个架构中的一组独立功能的集合。任何一个模块都应该是独立的，不依赖于其它模块。松耦合可以让我们在不影响其它模块的情况下修改一个模块。
3. Each module has its own sandbox(An interface with which the module can interact to ensure loose coupling)
每个模块都有自己的 sandbox ，这个 sandbox 就是用来降低模块间耦合度的，它是与模块进行交互的接口。
4. 一个 web application 的架构应该包括四个部分：Modules, Sandbox, Application Core, Base Library.
Module 只能“接触”它自身以及它所在 sandbox 的内容。那么这四个部分中哪一个是贯穿整个架构并知道将要构建的 application 呢？ None of them. 是的，所有的模块对于全局都是“无知”的。整个架构中的这四个部分就好像拼图游戏中的那些小方块，每一个都不清楚最后要拼的图是什么，它们只需要做好自己的事情就行了。
5. The web application is created as a result of all parts doing their job.
模块的工作是什么呢？ 举例来说， YAHOO! 首页的新闻模块就是向用户展示新闻，热门搜索模块就是为了告诉用户最热门的关键词。模块的工作就是创建一个有意义的用户体验。 当所有的模块都做好了它们的事情的时候，整个 application 也就建好了。
6. Module Rules.
一个模块需要严格遵守下面的规则：
Hands to yourself
– Only call your own methods or those on the sandbox （只调用自己或者自己的sandbox 中的方法）
– Don’t access DOM elements outside of your box （不要访问 sandbox 之外的DOM元素）
– Don’t access non-native global objects （不要访问非原生的全局对象）
Ask, don’t take
– Anything else you need, ask the sandbox（所有需要的东西都只能从 sandbox 中获取）
Don’t leave your toys around
– Don’t create global objects （不要创建全局对象）
Don’t talk to strangers
– Don’t directly reference other modules （不要直接引用其它的模块）
7. Sandbox Jobs
Sandbox 应该有下面的作用：
Consistency
– Interface must be dependable （接口应该是可以信赖的）
Security
– Determine which parts of the framework a module can access （决定一个模块可以访问框架的哪些部分）
Communication
– Translate module requests into core actions （将模块的请求转化成 application core 的动作）
8. Application Core Jobs
Application Core 需要做下面的工作：
Manage module lifecycle
– Tell modules when to start and stop doing their job （控制模块的初始化和销毁）
Enable inter-module communication
– Allow loose coupling between modules that are related to one another （允许模块间进行松耦合的交互）
General error handling
– Detect, trap, and report errors in the system （进行错误处理）
Be extensible
– The first three jobs are not enough! （可扩展性）
为什么需要扩展呢？因为创建好的 web application
总是在不停变化，而且你无法预测会出现什么变化，所以需要有良好的可扩展性。AJAX
功能可以算作一个扩展，它会为模块隐藏所有请求的细节，而模块只需要根据扩展提供的接口发送请求并获取自己想要的数据。
9. Base Library
基础库应该可以提供最基本的功能：
Browser normalization
– Abstract away differences in browsers with common interface（为所有浏览器提供统一接口）
General-purpose utilities
– Parsers/serializers for XML, JSON, etc. （基本的XML, JSON 处理功能）
– Object manipulation （对象操作）
– DOM manipulation （DOM 操作）
– Ajax communication （AJAX 异步通信）
Provide low-level extensibility （底层可扩展）
大部分的web application 都和基础库耦合得太紧，这句话我要加粗显示，想一想我们见到的应用吧，几乎所有的都是特别依赖于某个库，比如 JQuery , 所有的东西都紧紧耦合在 JQuery 之上。而理想化的情况是：只有 Application Core 这一部分才知道底层用的是什么库，而 Module 和 Sandbox 根本不需要去关心。
10. 总结
一个理想的 web application 架构应该是这样的：
只有 base library 知道使用的是哪一个浏览器
只有 Application core 知道正在使用哪一个 base library
只有 sandbox 知道 Application core 是什么样子
Module 只了解 sandbox 和它自身
这四个模块都不需要知道web application 的全貌
一句话，所有的部分都只对它上层的那部分可见，而且都不需要关心整个架构的全貌。 再来看图吧：
原文来自：Dreamer’s Blog-Scalable JavaScript Application
推荐阅读