总体衡量一个JS前端框架的几个指标：

  • 稳定性 Stability
  • 简单性 Simplicity
  • 可扩展性 Extendable
  • 易维护性 Maintainable
  • 易测试性 Testable

  • 标准化 Standardized

    设计思路

  • 应用组合

    • 组合时机，在构建时组合，还是在运行时组合
    • 应用路由，如何根据 URL 加载/导航到不同的页面，如何根据子应用界面的变化切换 URL
    • 应用加载，确定加载应用的版本，依赖于框架的加载机制，还是采用 AMD 或者 SystemJS 异步加载
  • 应用隔离
    • 应用容错，某个应用的崩溃不应影响到其他应用或容器应用；
    • 样式隔离，避免 CSS 相互污染
    • DOM 隔离，避免子应用操作非自身作用域内的结点
  • 应用协调与治理
    • 统一配置与切换，主题，利用 CSS Variables 等方式动态换肤
    • 应用的生命周期，规范化子应用的生命周期，并且在不同生命周期中执行不同的操作
    • 数据共享，子应用间数据共享
    • 服务共享，跨应用数据共享与服务调用
    • 组件共享，可能将某个纯界面组件或者业务组件以插件(Plugin)或者部件(Widget)的方式共享出去；提供某个计算能力。
  • 开发环境：
    • 跨技术栈支持
    • 统一的构建流程与规范
    • 打桩、埋点与 Hijack

  • 前端框架的设计

    参考：JavaScript Framework Design 司徒正美

    基础框架、工具支持

  • 模块和模块加载系统

  • 插件和插件的扩展机制
  • 种子模块、基础模块
  • 语言模块、工具模块
  • 视觉层引擎
  • DOM以及CSS操作模块
    • 选择器引擎
  • 事件和异步模块
  • 数据和缓存模块

  • 通信模块

    UI组件支持

  • 提供封装好的 UI 组件，可继承和扩展

    框架的演变史

    工具式库，提供一系列的工具函数

  • Prototype.js

  • Mootool.js

  • Underscore.js

    以组件形式封装的相对 重量级 框架

  • YUI

  • ExtJS

    jQuery 时代，以优雅的方式运行脚本，jQuery Style！

  • jQuery

  • Backbone

    MV* 框架

  • MVVM 框架

    • Angular
    • Polymer
    • Knockout
    • Vue

  • FLUX 架构

    • ReactJS
    • redux
    • mobx

      泛 Node.js 框架

  • express

  • koa
  • egg / begg主流的 Web App 架构jQuery Example: Kunotebook.com with jQuery / tranist.js /…适合较为单一的功能需求，结构不复杂的普通网页。MVCMVC中，View 位于架构之上，与 Controller 相邻。 Model 位于 Controller 之下，因此 View 了解 Controller， Controller 了解 Model。虽然 View 能够直接访问 Model 但是向 View 暴露 Model 会带来安全性和性能成本。MVP with AMDExample: TPLDEV5 with Backbone/jQuery/jQueryUI/…P: Presenter: Formats data for display.MVP中，Controller 被 Prensenter 所替代。表示器与 View 处于同一位置，监听 View 和 Model 的事件，并调解他们之间的行为。与 MVVM 不同的是，它没有使用将 View 绑定至 ViewModel 的机制，因而我们转而依赖每个 View 来实现用于让 Prensenter 与 View 进行交互的接口。适合较为重量级的应用开发，以AMD为范式，耦合多个独立模块，公用UI组件，公用API等等。MVVMExample: AngularJS / KnoughtJSView <—> ViewModdel <—> Model 数据绑定，是其最大的特点。MVVM 允许我们创建 Model 的特定于 View 的子集，可以包含状态和逻辑信息，无需向 View 暴露整个 Model。与 MVP 不同，引用 View 时不需要 ViewModel。View 可以绑定到 ViewModel 上的属性，而属性会将 Model 所包含的数据暴露给 View。View 的抽象意味着它背后的代码所要求的逻辑更少了。而 MVVM 的一个缺点是：在 ViewModel 和 View 之间需要进行解释，这会带来性能成本。Web Components 思想Example: React(JS) / Polymer(HTML)较适合层次结构比较清晰的 Web App，比较适合多终端，MutliDevice 开发。因为 Web Componments 尝试多向兼容，构成集合功能、事件、表现为一体的 Componments。测试框架
  • 参考列表（基于：fks）
    • jQuery/Underscore/Mootools/Prototype.js
    • YUI3/Dojo/ExtJS/KISSY
    • Backbone/KnockoutJS/Emberjs
    • AngularJS
    • Batarang
    • Bootstrap
    • Semantic UI
    • Juice UI
    • Web Atoms
    • Polymer
    • Dhtmlx
    • qooxdoo
    • React
    • Brick
    • Knockout
    • Closure (Google)