## 對前端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