全栈工程师修炼指南
熊燚(四火)
Oracle首席软件工程师
立即订阅
2286 人已学习
课程目录
已更新 43 讲 / 共 40 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 从成长角度看,为什么你应该成为全栈工程师?
免费
学习路径 | 怎样成为一名优秀的全栈工程师?
导读 | 如何学习这个专栏?
第一章 网络协议和 Web 接口 (6讲)
01 | 网络互联的昨天、今天和明天:HTTP 协议的演化
02 | 为HTTP穿上盔甲:HTTPS
03 | 换个角度解决问题:服务端推送技术
04 | 工整与自由的风格之争:SOAP和REST
05 | 权衡的艺术:漫谈Web API的设计
06 | 特别放送:北美大厂如何招聘全栈工程师?
第二章 欢迎来到 MVC 的世界 (7讲)
07 | 解耦是永恒的主题:MVC框架的发展
08 | MVC架构解析:模型(Model)篇
09 | MVC架构解析:视图(View)篇
10 | MVC架构解析:控制器(Controller)篇
11 | 剑走偏锋:面向切面编程
12 | 唯有套路得人心:谈谈Java EE的那些模式
13 | 特别放送:选择比努力更重要
第三章 从后端到前端 (7讲)
14 | 别有洞天:从后端到前端
15 | 重剑无锋,大巧不工:JavaScript面向对象
16 | 百花齐放,百家争鸣:前端MVC框架
17 | 不一样的体验:交互设计和页面布局
18 | 千言万语不及一幅画:谈谈数据可视化
19 | 打开潘多拉盒子:JavaScript异步编程
20 | 特别放送:全栈团队的角色构成
第四章 数据持久化 (7讲)
21 | 赫赫有名的双刃剑:缓存(上)
22 | 赫赫有名的双刃剑:缓存(下)
23 | 知其然,知其所以然:数据的持久化和一致性
24 | 尺有所短,寸有所长:CAP和数据存储技术选择
25 | 设计数据持久层(上):理论分析
26 | 设计数据持久层(下):案例介绍
27 | 特别放送:聊一聊代码审查
第五章 寻找最佳实践 (6讲)
28 | Ops三部曲之一:配置管理
29 | Ops三部曲之二:集群部署
30 | Ops三部曲之三:测试和发布
31 | 防人之心不可无:网站安全问题窥视
32 | 和搜索引擎的对话:SEO的原理和基础
33 | 特别放送:聊一聊程序员学英语
第六章 专题 (7讲)
34 | 网站性能优化(上)
35 | 网站性能优化(下)
36 | 全栈开发中的算法(上)
37 | 全栈开发中的算法(下)
38 | 分页的那些事儿
39 | XML、JSON、YAML比较
40 | 全栈衍化:让全栈意味着更多
全栈工程师修炼指南
登录|注册

16 | 百花齐放,百家争鸣:前端MVC框架

四火 2019-10-16
你好,我是四火。
我在上一章讲到了 MVC 的原理,今天我来讲讲前端的 MVC 框架。这部分发展很快,它们比后端 MVC 框架出现得更晚,但是社区普遍更活跃。
我们在学习的过程中,需要继续保持深度和广度的均衡,既要对自己熟悉的那一款框架做深入了解,知道它的核心特性,明白其基本实现原理,对于其优劣有自己的想法;也要多了解了解这个技术的百花园,看看别的框架是什么,想想有什么优势和缺点,拓宽视野,为自己能够做出合理的技术选型而打下扎实的基础。

前端 MVC 的变革

让我们来回想一下,在 [第 07 讲] 中,介绍过的 MVC 架构。实际上,我们可以把前端的部分大致归纳到视图层内,可它本身,却还可以按照 MVC 的基本思想继续划分。这个划分,有些遵循着 MVC 两个常见形式之一,有些则遵循着 MVC 的某种变体,比如 MVVM。
我们都知道前端技术的基础是 HTML、CSS 和 JavaScript,可随着技术的发展,它们在前端技术分层中的位置是不断变化的。
在前端技术发展的早期,Ajax 技术尚未被发明或引进,页面是一次性从服务端生成的,即便有视图层的解耦,页面聚合也是在服务端生成的(如果忘记了服务端的页面聚合,请回看 [第 09 讲])。也就是说,整个页面一旦生成,就可以认为是静态的了。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《全栈工程师修炼指南》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(11)

  • pyhhou
    1. 使用过 React,前端的 MVC 框架的出现带动了整个前端的发展,现在前端可以和后端分离开来设计与实现,对比之前,前端页面的聚合需要后端,这些框架的出现,在大的层面上看也算是进行了一次前后端的解耦吧;不好的地方就是前端的技术变得非常的多,而且杂,并且很多前端技术的生命周期都很短,这增加了普通工程师的学习难度的同时,前端在技术层面上也没有一个大的 “统一”

    2. 这让我回想起了我们之前讲过的一个话题,就是 “MVC 框架的控制逻辑的配置是写在单一的文件中,还是利用注解的方式写在控制逻辑处?”,放在这里也是可以类比的,把行为从 HTML 里面分离出去,单独管理,可以使得行为和 HTML 显示分开,达到解耦,同样,以 Angular 这种方式,让行为跟着具体的 HTML 显示模块走,让行为和 HTML 显示对照起来,这也是解耦,只不过前者是代码横向分层解耦,后者是代码纵向分层解耦,不能完全说哪一个好,还是得具体场景,具体分析。

    这里有一个小问题,就是上面提到说 “Reducer 是无状态的,它是一个纯函数”,我们上一篇文章中提到纯函数是安全的,也是幂等的,但是这里 Reducer 是会改变 store 的,而且对一个 Reducer 一次调用和多次调用会导致 store 里面的状态变得不一样,或者说我这里是不是误解了什么,还请老师指教

    PS: 过滤器标题下面那句话有 typo,Angular 写成了 React

    作者回复: 第2点讲得非常好,👍。
    关于你的问题,Reducer返回的是新状态,而不是改变原有状态(新状态会放到这个store里面),这点请注意,你可以参见 https://redux.js.org/basics/reducers#handling-actions。
    typo 我已经知会编辑修改,感谢!

    2019-10-17
    3
  • 咕叽咕叽
    问题一:使用过backbone,spine,最大的好处是分层和复用,坏处是模型之间的通信会复杂一点,需要借助发布订阅模式。vue,react和angular,最大的好处是框架完成了数据和UI的同步。并且采用声明式的写法,写起来就像写配置文件一样,简洁清晰。坏处是debug更复杂,不清楚各个组件的状态,不过已经有插件辅助了。
    问题二:作用域是不一样的。原始的写法:<img onclick="setImage()">,setImage是全局的。anglular的写法:<img ng-click="setImage()">,把setImage的作用域限制在了组件内,不会污染全局。angular的写法使代码结构变的更好,把逻辑单元封装在组件里。

    作者回复: 说得很好。

    2019-10-24
    1
  • 零维
    1. 使用 MVC 的好处个人认为是思维模式的转变,现在思考的方式都是以数据为主,不用去考虑去操作 DOM,坏处是越来越依赖框架了,很多相对基础的都忘记了。
    2. 感觉 angular 那样更好,因为像绑定事件这些,如果都放到 control 层 ,会更难理解和维护。之前用 jQuery 写的时候,一大堆事件放在一块,过一段时间再看代码就不太好看懂了。并且这样写是不是也是更像声明式的语法?

    作者回复: 关于第2点你的问号:是的。
    当然,有利有弊,你提到的好的地方,Angular这样做也带来一些问题,也可以想一想。

    2019-10-22
    1
  • 丁丁历险记
    我是个后端,用过vue element ui
    做后台用。 之前是jq + bootstrap
    天生对前端没兴趣,会用够用就好,很明显同样超出本职的玩docker k8s 时兴趣更大。
    2019-11-26
  • 丁丁历险记
    我是个后端,在使用vue 的element-admin 去改善后台的丑陋,以及让后端独立写接口。
    2019-10-22
  • sky
    我是直接从使用vue开始前端之路的。总体上来说感觉还是利大于弊的。
    2019-10-21
  • sky
    三驾马车没有讲vue,老师对这个框架没有什么想说的吗?

    作者回复: 框架有很多,我挑了两个有代表性的,讲清楚我想要传达的内容就可以了。:)

    2019-10-21
  • 没带就是没写
    jquery现在已经不流行了,除非是维护老项目。开发比较大的新项目用不到,但是它的理念是很有启发性的,write less,do more.
    2019-10-16
  • 靠人品去赢
    我觉得是更好,看到这个我就知道这个被绑定了,找后面的代码处理逻辑也好找。
    JQuery确实是解耦了,你定义好属性,后面各种选择器对应起来,但是感觉不好管理。根据ID我不小心又加了两个逻辑和之前的逻辑有冲突,可能达不到你之前预想。类选择器更是坑爹,可能我只是要个样式而已,结果你还顺便帮忙做了点别的。
    2019-10-16
  • leslie
    打卡吧:程序的东西学起来太苦了,现在的框架完全不是早年的那些了、、、慢慢实践慢慢补、、、
    2019-10-16
  • 我叫徐小晋
    一直以来没有用框架。都是用jquery。。。老师如果要选择一个框架。那个入门会好一点?

    作者回复: “新三驾马车”任一都可以,最好是你项目中能用到的那一个

    2019-10-16
    1
收起评论
11
返回
顶部