## 对前端MVV\*C框架的思考 :-:  :-:  我们知道网页是三位一体的，即由三个层面（html结构，css层叠样式，javascript逻辑/事件层）所组成的，并最终展现出来的。 传统的前端开发中，比如jquery，我们使用js直接操作DOM，应用软件就是流动的数据，根据DOM结构得出数据，或者根据数据渲染DOM，也就是说，**我们知道dom和数据是有直接联系的，但是却没有强有力的绑定，也没有任何规范，一切都太随意了（谁都可以更改dom，并且是不易察觉的），所以使得我们开发必须很严谨，这样的开发方式就很难构建大型项目。** 而MVV\*C的出现就是为了解决这个问题的，是为了构建大型项目的。 在这类框架中，我们不必为dom与数据的关系而伤神费脑，数据到DOM，事件的管理（事件是跟DOM有关的，所以事件的生命周期和DOM的生命周期相关），这些繁杂的事，都有框架接管了，我们只需要关注与业务逻辑，关注与数据的流动，而视图层，即DOM，会以最优的方式更新，我们无需操心了，这样我们就从传统混乱的开发者解脱了。 以上就是我对MVV\*C框架的思考。 [Web研发模式演变史 -- 简明现代魔法](http://www.nowamagic.net/librarys/veda/detail/2589) > 1、**前端开发重度依赖开发环境** > 2、**前后端职责依旧纠缠不清** [玉伯：前端的现状之痛及未来趋势](https://mp.weixin.qq.com/s/N5ybdlVle82ZjcNEkgCUtQ) [SolidJS硬气的说：我比React还react](https://mp.weixin.qq.com/s/Shkkz-m0ErC2Koguk8kdGQ) [React 是怎样炼成的](https://mp.weixin.qq.com/s/6i7x8ZgOBU5EijGweXfqdA) [极致 Web 性能 —— SPA 性能指南](http://mp.weixin.qq.com/s/EQ2uDrgmqFe2wTXGrg6N7w) [你真的理解了MVC, MVP, MVVM吗？](http://mp.weixin.qq.com/s/EzxfJLb5Hjxyw0_S5rThvg) [DOM操作成本到底高在哪儿？](http://mp.weixin.qq.com/s/bS2Sb-angQSoyOr9qggCTQ) [沪江前端由H5页面引起的一场前端数据结构讨论 - 掘金](https://juejin.im/post/593fc3d2fe88c2006a3bbb5b) > 数据结构应该与样式分离，这样才能多端适应。所见所得那种，样式写死到内容上了，确实缺少灵活性。 [那些前端MVVM框架是如何诞生的](https://mp.weixin.qq.com/s/UNud9JF23Ba5ncSGxz7fmg) * * * * * 做大型复杂项目时才能体会到，数据变动时，需要更新相应的dom的痛苦，一处逻辑变动，要改动很多地方（所有跟数据操作相关DOM的地方都要改），出现问题难以排查测试。 而用现代前端框架，只需要关注数据，定义好数据与视图模板的关系映射就可以了，此后只需要关系数据就可以了，而无需关系dom了。这样我们就更能专注于业务逻辑了。 （来自做 `faxianzhe开单页面` 的体会） * * * * * [不好意思！耽误你的十分钟，让MVVM原理还给你 - 掘金](https://juejin.im/post/5abdd6f6f265da23793c4458) > 发布订阅主要靠的就是数组关系，订阅就是放入函数，发布就是让数组里的函数执行 * * * * * [\[译\] 现代 js 框架存在的根本原因](https://mp.weixin.qq.com/s/fFROCMZ9xOpjqKE5t6tnhQ) **有时从数据映射到dom（根据数据创建dom），有时又从dom映射到数据，我们经常需要在这两者之间往返（根据dom得到特定的数据），而这一切竟然没有严格的规则可以遵循**，怎么做完全取决于怎么方便好实现，这太可怕了，这种不稳定性，让完成一项功能有无数种实现，不同的人可能写出各种奇怪的代码，当项目中都是一坨一坨这样的代码，并且组件之间相互关联的复杂页面，可想而知，维护状态和UI的对应关系有多麻烦，是一件多么让人痛苦的事情。 [tmodjs/why-tmodjs.md at master · aui/tmodjs](https://github.com/aui/tmodjs/blob/master/doc/why-tmodjs.md) > 早期，开发人员都是直接在 js 文件中采用最原始的方式直接拼接 HTML 字符串，这种方式刚开始在一两个简单的页面中还是比较灵活的，但弊端也十分明显：UI 与逻辑代码混杂在一起，阅读起来会非常吃力。一旦随着业务复杂起来，或者多人维护的情况下，几乎会失控。 [如何选择 Web 前端模板引擎？](https://mp.weixin.qq.com/s/Zg7csHutELI-7PcnafMGJw) > 有的使用者认为这个应用场景有字符串模板就满足了需求，轻量够用。 > > 有的使用者认为字符串拼接技术的模板引擎不够强壮，不够时代感。 [为什么要从众多的前端框架中选择React?](https://mp.weixin.qq.com/s/t8i84_UorGbzBpmy4FBf1A) > react将你从ui细节中解放出来，让你只需要关心状态和最终ui就可以了，它会自动维护状态和ui的映射关系。 * * * * * 有时候不要随便说谁会取代谁，要想一下它们是什么关系。就像不要问轮船会不会取代汽车，刨丝刀会不会取代菜刀，小麦会不会取代稻谷一样。 * * * * * 为什么react要手动 setState 为什么react没有数据监听 [React和Vue对比 - 前端小码农 - SegmentFault 思否](https://segmentfault.com/a/1190000012479834) [【前端前沿看点】React和Vue深度对比 - CSDN博客](https://blog.csdn.net/chaunceyw/article/details/77895964) [react.js - reactjs怎么实现监听数据对象 - SegmentFault 思否](https://segmentfault.com/q/1010000012052996?sort=created) > React不监听数据对象，而是通过手动调用setState()方法来触发virtueDiff，以此对比前后来个状态的不同，然后针对性的更改变化了的DOM结构实现数据更新。这是我的理解，欢迎大神拍砖。 > [【React】为什么我不再使用setState？ - 掘金](https://juejin.im/post/59df1b536fb9a0452935c1d8) [FB大规模重构React Native，Airbnb宣布回归原生，前端巨变来临？](https://mp.weixin.qq.com/s/xbVNGGoH6mlmx6T0YL-r1w) [关于 Vue 和 React 区别的一些笔记](https://mp.weixin.qq.com/s/aKZ1_M6ITOpR7-ebKdfPrA) > 为什么 React 不精确监听数据变化呢？这是因为 Vue 和 React 设计理念上的区别，**Vue 使用的是可变数据，而React更强调数据的不可变。** 所以应该说没有好坏之分，Vue更加简单，而React构建大型应用的时候更加鲁棒。 > > 这些都是vue创建组件实例的时候隐式干的事。由于vue默默帮我们做了这么多事，所以我们自己如果直接把组件的声明包装一下，返回一个高阶组件，那么这个被包装的组件就无法正常工作了。 [Vue3 的响应式和以前有什么区别，Proxy 无敌？ - 掘金](https://juejin.im/post/5e92d863f265da47e57fe065) [Vue.js是如何做到数据响应的？](https://mp.weixin.qq.com/s/1wPePhAoBtsb0XcUzFSfug) [jQuery的没落和技术发展的一般规律](https://mp.weixin.qq.com/s/ochmIC4GzUpDewc0yiSqnA) > dom操作是业务无关的逻辑，不应该出现在业务的代码中，虽然使用jq简化了很多，但是代码依然是难以维护和复用的，直到mvvm的出现，把数据和视图的绑定变成了自动化的操作，进而把dom操作从业务代码中移除。业务代码因此变得更加的纯粹，也更容易复用。 [月下载量千万的 npm 包被黑客篡改，Vue 开发者可能正在遭受攻击](https://mp.weixin.qq.com/s/IaOWxG0XLvn2znvvP1dmwA) （开源与安全） [jQuery 3.4.0 发布！全力准备 jQuery 4.0：15篇前端热文回看](https://mp.weixin.qq.com/s/5nWPXbHGzPUUi9XlH7zzRQ) [Bootstrap 5 要和 jQuery 说再见，将移除对其依赖](https://mp.weixin.qq.com/s/_KPlyMNxaNQ2d6I7RGJnxQ) [Vue 进阶系列之响应式原理及实现](https://mp.weixin.qq.com/s/X3s4ysLfwclEOXIuKzOK2g) [从零开始写一个 wepy 转 Vue 的工具](https://mp.weixin.qq.com/s/i0QzZdF6AN2UQZfzrsej7Q) [前端开发进化史，你经历过哪几个时期？\](https://mp.weixin.qq.com/s?\_\_biz=Mzg2MjEwMjI1Mg==&mid=2247487023&idx=1&sn=064eb8ea4f5390b23088829b7f6eecfd&source=41#wechat\_redirect) [当 Flutter 遇见 Web，会有怎样的秘密？](https://mp.weixin.qq.com/s/pejZcTtYoJUlNWVHg0EYBQ) [ReactJS ：我就是想把代码和HTML混在一起！](https://mp.weixin.qq.com/s/wJlogDgwXENtWVvEVceXFA) [Vue 和微信小程序的区别、比较](https://mp.weixin.qq.com/s/wgeylPyKkS4FQjWI48H2Tw) [DOM 操作成本到底高在哪儿？](https://mp.weixin.qq.com/s/39i5ZMa2JaS4I_3TcT522A) [你真的了解回流和重绘吗?](https://mp.weixin.qq.com/s/MdY0hIMVE73SEQ2CSU9mbQ) [Promise实现原理（附源码）]([https://mp.weixin.qq.com/s?\_\_biz=Mzg3NTExMTg2Mw==&mid=2247484764&idx=1&sn=d74e455b11c616bbce2cf961fdc19eca&source=41#wechat\_redirect](https://mp.weixin.qq.com/s?__biz=Mzg3NTExMTg2Mw==&mid=2247484764&idx=1&sn=d74e455b11c616bbce2cf961fdc19eca&source=41#wechat_redirect)) [Hybrid App技术解析 -- 原理篇](https://mp.weixin.qq.com/s/x-mmH0g3Y0AaFDqmIDzdhQ) [图解 React](https://mp.weixin.qq.com/s/DebP97uVxH1dmQr3wTZbjg) [渐进式Web应用（PWA）入门教程（上）](https://mp.weixin.qq.com/s/LRxyuLe8cCE_S917yOkMbA) [渐进式Web应用（PWA）入门教程（下）](https://mp.weixin.qq.com/s/Bx-BMPX_kFOCG80Pue1mXg) 应用复杂后，直接操作 DOM 意味着手动维护状态，当状态复杂后，变得不可控。 http://debugx5.qq.com/?from=groupmessage [加快构建 DOM: 使用预解析, async, defer 以及 preload]([https://mp.weixin.qq.com/s?\_\_biz=MzA5NzkwNDk3MQ==&mid=2650585412&idx=1&sn=7ec58c14a414b967e77dc84f79cdb8a5&source=41#wechat\_redirect](https://mp.weixin.qq.com/s?__biz=MzA5NzkwNDk3MQ==&mid=2650585412&idx=1&sn=7ec58c14a414b967e77dc84f79cdb8a5&source=41#wechat_redirect)) [极客搜索为什么能够快如闪电](https://mp.weixin.qq.com/s/9qviaQMoyVWm3qvR-M-Zuw) [为什么虚拟DOM更胜一筹 - 文章](https://weibo.com/p/1001603915568079095157?) > 使用innerHTML刷新某个容器!注意,这里其实可以优化,但由于是手动,是体力活,都是使用很粗放型的innerhTML了事(使用jQuery的html方法性能会更差,不过好处是它处理了IE下的innerHTML BUG及全平台的无法执行内部的script标签的BUG) [组件演进史：从Mixin到HOC，再到Hook](https://mp.weixin.qq.com/s/7oUNOuZ2QW8C4h99G8uquw) [无代码开发，站到了程序员鄙视链顶端](https://mp.weixin.qq.com/s/wcwpxY054VJtKVXLtkM32A) > 无代码只适应特定领域行业，比如企业网站，新闻网站，电商小程序，表单收集，流程审批程序，直播模块，秒杀模块，也就是针对特定业务封装的模块， 所以这样注定不会和传统软件开发有冲突，无代码只是事先定制好功能模块，显然这种积木式的软件在面对特殊需求和定制化需求时是无能为力的，不过也只有把大众需求抽出来单独做才能把 开发从重复无挑战的项目中解放出来，毕竟有很多需求都很普遍通用并且简单，而且市场很大，那些领域不需要什么炫酷的技术，只有重复的工作，巨头正是看到了这点才在这上面发力吧。 [什么是Low Code ? 居然能威胁到专业程序员？](https://mp.weixin.qq.com/s/tDSDtNO79ASS3JqLc2piYg) > 这个“无代码”和“配置”有点像，我们对“配置”寄予的期望就是通过简单的调整配置就可以改变系统行为，就不用改代码了。这个机制是如此的好用，不知不觉就会产生很多的配置项，然后有一天你会发现配置系统进化成了另外一种“语言”，你仍然不得不用写代码的思维才能处理这种流程，运气不好的话，这种过于“健壮”的配置体系反而增加了系统复杂度，“无代码”可能会走向这个结局 [熟用 Vue 后，带给我的改变](https://mp.weixin.qq.com/s/AWTjf3Vt3ouLHz7FSMlBAw) [14W 行代码量的前端页面长什么样](https://mp.weixin.qq.com/s/3J8kKArFGjjDFOr4aryNIg) [「科普」前端工程师简史](https://mp.weixin.qq.com/s/iBTQcYtljnNM_vQryiZ2jg) [微前端框架是怎么导入加载子应用的](https://mp.weixin.qq.com/s/DDvVo08cBugv8gKFe4Iw_g) [Facebook 前端技术栈重构分享](https://mp.weixin.qq.com/s/JnSnqHiHxc8D6BswNuEv3w) [从零实现 react-redux](https://mp.weixin.qq.com/s/Kfd_aZY9Z2DgFhOCXVa-gg) [你的博客用不着什么JavaScript框架](https://mp.weixin.qq.com/s/ZUscdVBY0E5r_uTAlzdMgw) > React 是用于构建 Web 应用的，这种应用需要有响应用户输入或实时获取数据的交互式 UI；而博客只是一个网站而已。 [谈谈 React 新出的 Server Components](https://mp.weixin.qq.com/s/qLV0IoPlkkZfiwpzAiQaqQ) [2020 年大前端技术趋势解读](https://mp.weixin.qq.com/s/DVQWF1CokNV07JLidHsFtg) [新兴前端框架 Svelte 从入门到原理](https://mp.weixin.qq.com/s/7GTTAYNf28IvIe2bpfVHuQ) [五分钟了解互联网Web技术发展史](https://mp.weixin.qq.com/s/HUknNfaxNULc4Yvf5ajRBA) [JS 语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性](https://mp.weixin.qq.com/s/velIAEG7QG8TcQxyKPgOWA) [Vue2.x 的双向绑定原理及实现](https://mp.weixin.qq.com/s/wgLkfNUWHmq2qSyH4Q6LZw) https://github.com/uncss/uncss (去除没有用到的css) [30分钟学会前端模块化开发 - 张果 - 博客园](https://www.cnblogs.com/best/p/10076782.html#_label3_4_4_0) [island205/Single-Page-App-Break: 单页应用开发权威指南](https://github.com/island205/Single-Page-App-Break) [island205/HelloSea.js: 专注Sea.js，深入浅出分析Sea.js模块机制](https://github.com/island205/HelloSea.js) [http://avalonjs.coding.me/home.html](http://avalonjs.coding.me/home.html) > 作者：puyu wang 链接：https://www.zhihu.com/question/384157840/answer/1125704793 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 avalon 是一个简单易用迷你的MVVM框架，它最早发布于2012.09.15， 为解决同一业务逻辑存在各种视图呈现而开发出来的。 事实上，这问题其实也可以简单地利用一般的前端模板加jQuery 事件委托 搞定， 但随着业务的膨胀， 代码就充满了各种选择器与事件回调，难以维护。 因此彻底的将业务与逻辑分离，就只能求助于架构。 最初想到的是MVC，尝试过backbone，但代码不降反升，很偶尔的机会，碰上微软的WPF， 优雅的MVVM架构立马吸引住我，我觉得这就是我一直寻找的解决之道。 avalon将所有前端代码彻底分成两部分，视图的处理通过绑定实现（angular有个更炫酷的名词叫指令）， 业务逻辑则集中在一个个叫VM的对象中处理。我们只要操作VM的数据，它就自然而然地神奇地同步到视图。 显然所有神秘都有其内幕，C#是通过一种叫访问器属性的语句实现，那么JS也有对应的东西。 感谢上帝，IE8最早引入这东西（`Object.defineProperty`），可惜有BUG，但带动了其他浏览器实现它， IE9+便能安全使用它。 对于老式IE，我找了好久，实在没有办法，使用VBScript实现了。 Object.defineProperty或VBS的作用是将对象的某一个属性，转换一个setter与getter， 我们只要劫持这两个方法，通过Pub/Sub模式就能偷偷操作视图。为了纪念WPF的指引， 我将此项目以WPF最初的开发代号avalon来命名。 它真的能让前端人员脱离DOM的苦海，来到数据的乐园中！ ---- [框架究竟解决了啥问题？我们可以脱离它们吗？](https://mp.weixin.qq.com/s/-bJ7Abx9d02Eor-lsRoCGQ) > 声明式编程是一种在不指定控制流的情况下定义逻辑的范例。我们描述的是结果需要是什么，而不是我们需要采取什么步骤。 > 在声明式框架的早期，大约在 2010 年，DOM API 非常冗长，使用命令式 JavaScript 编写 Web 应用程序需要大量的样板代码。 ---- last update：2018-6-14 11:09:50