Rowan Liu's Tech
Home
Blog
CSS
JS
lib
Read
About
GitHub
Home
Blog
CSS
JS
lib
Read
About
GitHub
  • 在专精的路上走的一发不可收拾
  • 生活有感

    • lerna
    • jQuery实践
    • gzip
    • 2018 Web开发,实用指南
    • for 追求
    • Travis CI
    • 前端基础设施(gulp)
    • 知乎Live--前端工程师的职业规划
    • 前端架构演进
    • 组件的重写
    • vue-cli2 to vue-cli3
    • vue3
  • 翻译

    • 开篇
    • [译]在 Angular 中使用拦截器的方式 Top 10
    • 2020年关于 Vue 3 你需要知道的事
    • core-js@3, babel展望未来
    • Vue CLI 插件开发指南
    • @vue/cli-plugin-typescript README
    • @vue/cli-plugin-eslint
    • Vue 3 的开发进展
  • 那些年我面过的试

    • 开篇
    • JavaScript
    • css
  • 数据结构

    • 排序
  • 设计模式

    • 开篇
    • OOP
    • 表单验证

前端架构演进

tips: 前端架构这个单词到底是什么,我迷茫了。

web front end architecture

the structure of the web front end

还是说不要纠结这个问题,又有点庸人自扰了。只记得前端架构不就可以了吗。(!_!)/懊恼

MVC(Model-View-Controller)

  • View(视图): 用户界面

  • Controller(控制器):业务逻辑

  • model(模型):数据保存

各部分通信方式:

igm

MVP(Model-View-Presenter)

MVP将Controller改名为Presenter,同时改变了通信方向。

mvp

  1. 各部分的通信都是双向的。
  2. View与model不发生联系,通过Presenter传递。
  3. View非常薄,不部署业务逻辑,称为被动视图(Passive View),即没有任何主动性,而presenter非常厚,所有逻辑都部署在那里。

MVVM(Model-ViewModel-View)

MVVM模式将presenter改名为ViewModel,基本上与MVP模式完全一致。

mvvm

唯一区别是,他用了双向数据绑定(data-binding):View的变动,自动反应到ViewModel,反之亦然。

words

domain model

你以为是,域名模型,错,是业务模型。(a_a)/啊

资料

后MVC时代的前端架构

程序员必知之前端演进史

MVC,MVP 和 MVVM 的图示

前端编程方法和框架的演进

Edit this page
Last Updated: 2026/1/12 10:15
Contributors: Rowan Liu
Prev
知乎Live--前端工程师的职业规划
Next
组件的重写