前后端分离 和 MVC / MVVM

前后端分离

  • web 1.0
    页面相对比较简单,前端只负责写静态页面和一些简单的JS,大部分工作都由后端完成(JSP 前后端耦合的典型)
    前端没有工程化、模块化、可复用化思维
    代码难维护
web 1.0
  • web 2.0
    通过 Ajax 与后端进行数据交互,减少了服务端的负载和流量消耗,提升了用户体验
    有了真正意义上的前端工程师,jQuery 也是在这个时候发展壮大的
    这个期间,前端有了 MVC 设计模式思想
web 2.0
  • web 3.0
    页面、需求复杂后,降低应用结构复杂度、需要提高开发效率,通过解耦(高内聚、低耦合)进行前后端分离。
    前端使用 JS 技术,负责表现和用户交互。服务器端使用 Java、PHP 技术,负责核心业务逻辑和数据持久化。
    因为 Node.js 有了npm Webpack、Less、Sass、Gulp、Bower 以及这些工具的插件,使得前端有了工程化思想

  • 优点
    前后端职责分明
    PC、APP、平板等多端适应
    单页面模式(SPA)
    开发效率提高
    低耦合
    前端项目独立可部署
    相对于开发人员,维护成本降低
    精准的单元测试
    精准的 bug 定位和修复

  • 缺点
    不利于 SEO(搜索引擎优化)
    出现跨域问题

  • 总结
    前后端分离不是技术问题,而是工程化考量项目管理问题,Vue.js、React.js都是具体的实现方式

MV*

  • MV* 的目的是把应用程序的数据、业务逻辑和界面这三块解耦,分离关注点,不仅利于团队协作和测试,更利于维护和管理。业务逻辑不再关心底层数据的读写,而这些数据又以对象的形式呈现给业务逻辑层

MVC 单向数据绑定

  • 与后台数据交互(模型 Model)、视图展示(视图 View)、业务逻辑(控制器 Controller)。
  • MVC 通信是单向的,View 传送指令到 Controller,Controller 完成业务逻辑后,要求 Model 改变状态, Model 将新的数据发送到 View,用户得到反馈。
  • MVC 早期出现在服务端,如 Spring MVC,后来前端有了 Backbone.js,MVC 的出现为解决 Model 层和 View 层耦合问题。
  • 优点:分层清晰。
  • 缺点:数据流向混乱、较难维护(灵活性)。

MVVM 设计模式

  • 数据模型(模型 Model)、用户界面(视图 View)、业务逻辑(视图模型 ViewMode)。
  • MVVM 的 核心是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易管理和使用,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,起呈上启下作用。
  • 解决 Model 层和 View 层耦合问题,减少DOM操作,使程序员专注于业务逻辑,在保证性能的前提下提高开发效率和可读性,实现真正的前后端分离。
  • MVVM 提供了数据双向绑定。
MVVM
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 230,622评论 6 544
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 99,716评论 3 429
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 178,746评论 0 383
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 63,991评论 1 318
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 72,706评论 6 413
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 56,036评论 1 329
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 44,029评论 3 450
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 43,203评论 0 290
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 49,725评论 1 336
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 41,451评论 3 361
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 43,677评论 1 374
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 39,161评论 5 365
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 44,857评论 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 35,266评论 0 28
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 36,606评论 1 295
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 52,407评论 3 400
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 48,643评论 2 380

推荐阅读更多精彩内容