CodeLove 愛寫扣論壇 - 新手友善的程式設計討論區，歡迎參與討論！

🔍 搜尋結果：MVC

MVC是一個巨大誤會

我是web工程師，從剛開始學MVC就深感困惑： - 怎麼每個地方說的MVC都不太一樣？ - 有些文章講的MVC，跟我正在用的MVC，怎麼像完全不同的東西？ Model、Controller、View三者到底如何互動？真是一個定義不明、含糊不清的名詞。這讓我研究了很久。最後，發覺它是一個嚴重的誤會。這個誤會導致了學習和溝通上的代價，請聽我娓娓道來。 # 哪些是MVC？ web領域，不論前端(client-side)、後端(server-side)、不論什麼程式語言，幾乎所有framework都自稱、或被認為是「MVC」。有哪些呢？前端：Backbone.js、AngularJS、Ember.js… 後端：Ruby on Rails、CodeIgniter、Laravel、Django… 真的是這樣嗎？它們全都是MVC嗎？ # MVC是什麼？該怎麼定義MVC呢？我們先來看看維基百科怎麼說： > MVC模式（Model-View-Controller）是軟體工程中的一種軟體架構模式，把軟體系統分為三個基本部分：模型（Model）、檢視（View）和控制器（Controller）。嗯，跟大家說的一樣。我們繼續往下看： > 模型（Model）用於封裝與應用程式的業務邏輯相關的資料以及對資料的處理方法。「 Model 」有對資料直接存取的權力，例如對資料庫的存取。「Model」不依賴「View」和「Controller」，也就是說， Model 不關心它會被如何顯示或是如何被操作。但是 Model 中資料的變化一般會通過一種重新整理機制被公布。為了實作這種機制，那些用於監視此 Model 的 View 必須事先在此 Model 上註冊，從而，View 可以了解在資料 Model 上發生的改變。（比較：觀察者模式（軟體設計模式））看起來有些陌生，整段描述跟你的web開發經驗完全不同，對嗎？最大的疑問來自這句： > 那些用於監視此 Model 的 View 必須事先在此 Model 上註冊，從而，View 可以了解在資料 Model 上發生的改變。（比較：觀察者模式（軟體設計模式））後面直接叫你去看觀察者模式(observer pattern)。問題來了：你有在view跟model之間實作observer pattern嗎？也就是說，你的Model在資料改變之後，能主動通知View嗎？沒有的話，就根本不符合MVC的定義。 # 全都不是MVC？我們現在發現MVC有observer pattern這個必要條件了。事情嚴重了起來。 client-side framework或許能夠符合這個條件。以Backbone.js官網範例來說，我們可以這樣在Model上註冊： ``` book.on({ "change:title": titleView.update, "change:author": authorPane.update, "destroy": bookView.remove }); ``` 它的確實作了observer pattern。但server-side framework呢？你的Model如何能在發生改變之後去「主動通知」View？你平常開發web哪有用到server push的技術？所有server-side framework，從Ruby的Rails；PHP的CodeIgniter、Laravel；到Python的Django，他們全都不是MVC。它們實作的，是昇陽電腦在1998年提出的「Model 2」。 # 什麼是Model 2？ Model 2名氣不大，在維基百科連中文條目都沒有。我們看看英文條目怎麼講： > Model 2 is a complex design pattern used in the design of Java Web applications which separates the display of content from the logic used to obtain and manipulate the content. > In a Model 2 application, requests from the client browser are passed to the controller. The controller performs any logic necessary to obtain the correct content for display. 它針對web而設計，讓controller進行必要的程序之後，將資料塞進view去呈現。正是我們server-side框架在做的事情。也就是說，server-side目前只能實作Model 2；client-side可以實作Model 2，也可以實作MVC。 # 巨大的代價 web工程師最常碰的就是client-side跟server-side框架。結果整個業界把MVC跟Model 2混為一談，都說成MVC。這帶來了什麼後果呢？ MVC變成一個從初學者到業界工程師，永遠說不清楚、下不了定義的名詞。這件事對於學習和討論，造成了非常巨大的成本。（參考下方的Q1和Q2） # 那該怎麼辦？下次有初學者詢問「什麼是MVC」的時候，怎麼回答才不會害他回家之後「越查資料越混亂」？ [Rails is not MVC](http://andrzejonsoftware.blogspot.tw/2011/09/rails-is-not-mvc.html)的作者提出了三種解決方法： > 第一個方法是聲稱MVC已經從原始意義改變了，Model 2也可以稱為MVC。如此一來，我們可以用「傳統MVC」或「真MVC」來描述原始的MVC。這是現在普遍的作法，但我不認為改變定義是一個好主意。這幾乎是越搞越亂。 > 第二個方法是到處推廣Rails其實是Model 2，MVC就留給…MVC吧。這很困難，但至少能保持定義不變。 > 第三個是直接忽略這些混亂。管它那麼多？我個人覺得MVC這個詞已經沒救了，不管怎麼解釋都會帶給別人混亂。當對方同時學習client-side跟server-side時，混亂更強烈。我選擇這樣回答：「MVC有分很多種喔！網路上全部沒寫清楚，你一定看不懂。沒關係，你只要知道View可以抽出來就好。 C跟M先別管，你先隨便瞎搞吧。」 --- # Q&A ## Q1: 怎麼可能各大server-side framework都搞錯？確實有人腦袋清醒得很，它就是Python的Django。 Django的官方文件內根本沒有「Controller」這個名詞。看看Django官網的常見問題： > Q: Django似乎是一個MVC框架，但你們把Controller命名為「View」，把View命名為「Template」。你們幹嘛不用標準命名啊？ > A: （前略）…如果你真的很想要一個縮寫，你就說Django是一個MTV框架吧。Model、Template、View。這樣分比較有道理些。 Django不想變成搞亂MVC的幫凶，只好委屈地又發明了一個名詞「MTV」。 ## Q2: 那client-side框架有受影響嗎？有。client-side框架也必須為MVC巨大誤會浪費一堆時間解釋。看看Backbone.js官網的常見問答： > Backbone跟「傳統MVC」的關聯何在？ > …我們來比較一下Backbone跟像是Rails這種server-side MVC框架的差別… Backbone實作了「傳統MVC」，卻被迫用「傳統MVC」來描述server-side的Model 2，然後花一堆篇幅解釋。 ## Q3: 知道Model 2的存在又如何？我現在依然一片混亂！沒錯，Model 2跟MVC都用到Model、Controller、View三個名詞，所以看起來類似。但是，我們不應該再把時間花在思考「MVC怎麼如此難懂」。我們討論的重點，應該是「如何分辨MVC與Model 2」、「在server-side如何實作Model 2才漂亮」、「在client-side實作MVC跟Model 2的優劣分別何在」。 ## Q4: 好，那你現在回答我，「如何分辨MVC與Model 2」？ OK，就讓我拋磚引玉一下。分別談談Model、View、Controller吧： ### View - Model 2: 不具有行為，只是等別人塞資料進去的模板（template）。 - MVC: 具有監視Model的行為，並以此去改變呈現（presentation）。兩種View有沒有很像？跟張飛、岳飛一樣像。看看Backbone.js官網的View範例。你server-side的View哪是長這樣？ ``` var DocumentRow = Backbone.View.extend({ tagName: "li", className: "document-row", events: { "click .icon": "open", "click .button.edit": "openEditDialog", "click .button.delete": "destroy" }, initialize: function() { this.listenTo(this.model, "change", this.render); }, render: function() { ... } }); ``` ### Controller - Model 2: 接收請求與參數，轉交給Model處理，再把結果（最新的資料）塞進View。 - MVC: 接收請求與參數，轉交給Model處理。沒其他事了。兩種Controller有沒有很像？跟小狗、熱狗一樣像。 MVC的View跟Model 2的Controller可能還比較像一點。（隨便說說，千萬別這樣類比。） ### Model - Model 2: 接收Controller傳來的參數，回傳結果。 - MVC: 接收Controller傳來的參數，將結果通知View。 Model倒是有些類似。總之，Model 2跟MVC除了三個部份的名字一樣之外，沒什麼關聯了。 ## Q5: 我決定徹底鑽研MVC跟Model 2的定義了。給我一些延伸閱讀？ http://www.ithome.com.tw/node/77330 http://andrzejonsoftware.blogspot.tw/2011/09/rails-is-not-mvc.html https://docs.djangoproject.com/en/1.7/faq/general/#django-appears-to-be-a-mvc-framework-but-you-call-the-controller-the-view-and-the-view-the-template-how-come-you-don-t-use-the-standard-names http://backbonejs.org/#FAQ-mvc https://r.je/views-are-not-templates.html --- ##一些社群的看法（2015-2-28）附上幾個社群的連結，裡面有許多很棒的討論。 https://www.facebook.com/groups/javascript.tw/permalink/600136880087654/ https://www.facebook.com/groups/199493136812961/permalink/759391387489797/ https://www.facebook.com/groups/pythontw/permalink/10153760201638438/ https://www.facebook.com/mosky.liu/posts/10203964969186383 http://www.ithome.com.tw/voice/94877

0個讚 1留言 197瀏覽

我愛JS · 04月25日

[好文轉載]哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？

[【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？](https://ithelp.ithome.com.tw/articles/10312056) ## 前情提要如果說蟑螂怕拖鞋，老鼠愛大米，任何事物都有相生相剋的道理，那麼前端最害怕什麼呢？恐怕就是todo-list。這應該是前端的四大惡夢之一，並不是因為太難了，而是因為太簡單而且太無聊了，不只無聊，還是每次教學都必須寫的一個磨難，簡直是瞬間殺死靈魂中隊前端的愛。今天要來用不同風格寫出todo-list，把代辦事項寫出新滋味。 body裡面一行都沒有也能搞？就是可以搞，讓我們馬上來欣賞這段有特別滋味的玩法！ε(*´･∀･｀)зﾞ ## 程式碼 ``` <!DOCTYPE html> <html> <head> <title>Todo List</title> </head> <body></body> <script> //渲染DOM AddHtml(); //資料內容 function AddHtml() { const Data = { h1: "Todo List", button: "Add", }; //主體的DOM const html = `<h1>${Data.h1}</h1> <input type="text" id="input" /> <button onclick="CheckNull()">${Data.button}</button> <ul id="list"></ul>`; //渲染至畫面上 document.body.innerHTML += html; } //邏輯確認:是否有輸入值 function CheckNull() { if (!input.value.trim("")) { return; } else { AddItem(); } } //新增代辦事項 function AddItem() { const li = `<li>${document.getElementById("input").value}</li>`; document.getElementById("list").innerHTML += li; input.value = ""; } </script> </html> ``` [可以貼到try it的地方執行看看效果](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_submit) ## 觀念筆記所謂MVC架構就是模型、視圖、控制，背後其實有一個元素貫串任何程式，那就是：「邏輯」每當你要下手寫一個程式卻不知道怎麼開始動手，那就是邏輯沒有通順。網頁不外乎就是畫面，以及資料，還有使用者的操作。對於todo-list來說就是一個簡單的input畫面，使用者輸入的資料，點下按鈕送出的操作。這段程式特地不寫任何一行body裡面的東西，玩弄了一般人對於程式區分的概念。用模板符的特性讓所有一切交給變數與函式處理，最後三個function： AddHtml、CheckNull、AddItem完美演繹了代辦清單這個網頁所需要構成的底層邏輯。必須先加入畫面，然後確認使用者操作的條件，最後新增資料。這樣子的流程對於新手或許不習慣，但是以邏輯面來看比一般人的寫法清晰許多。這也是未來框架導入後，對資料流更敏感的培養練習。 ## 心得無聊的todo-list竟然可以搞成這樣！？真的是太有趣了(๑╹◡╹๑)！原來前端的惡夢也可以變成寫不同風格的天堂，沒錯，寫程式就是這麼千變萬化！重點是背後的邏輯抓到了，那麼想要怎麼寫，真的就是藝術的發揮。請繼續關注，跟著我們這個系列繼續動手玩創意！！未來還有更多更新鮮的花招呢(｡◕∀◕｡)

3個讚 2留言 143瀏覽

站長阿川 · 12月28日

初次轉職寫程式：作品集有用嗎？要做什麼作品？面試官會看嗎？

很多朋友轉職寫程式，在補習班或者線上課程，告一段落之後，開始找工作之前，會整理作品集關於作品集，簡單給大家一些建議 ## 作品集有用嗎？公司在徵人的時候，其實來應徵的人五花八門滿多人看起來，根本不會寫程式，連最基本的小網頁或者小程式都寫不出來連基本技能都沒有準備好，感覺是到處碰碰運氣、履歷亂誇大就到處丟。公司面試時，最怕遇到這種狀況作品集，至少代表，你寫得出基本東西。很多人根本寫都不會寫，就去應徵了，作品集至少可以讓公司避免踩雷話說回來，如果你的作品集，只是補習班的幾個分組專案，糊裡糊塗地完成了，就跟在學校敷衍交報告一樣，你對細節其實不了解，那這種作品集，當然幫助不大，對你的信心也沒有多少幫助 ## 要做什麼作品？所以該做什麼作品呢？最好做一些你真的需要的「應用程式」，寫起來才有動力、才好玩，內容也才扎實簡單舉例，如果你在受訓的過程是這些： ### 前端工程師做個待辦事項清單工具吧！按照自己的喜好設計，做完之後找地方上線在找工作的這幾個星期，實際拿這個工具來做紀錄，投履歷時、面試時，很自然可以分享你的心得跟小熱情對面試官來說，看到面試者有即戰力（即便是有一點點）、對自己的程式有熱情（即便只有一點點），都會加分不少請參考 https://todomvc.com/ 這是各種前端工具寫的 todo list 應用程式，你還可以比較自己的程式碼，與社群所寫的差異 ### 後端工程師我鼓勵後端的入行者，寫一個「個人專屬部落格」這個部落格要有以下功能 - 首頁列出文章清單 - 能簡單單篇文章瀏覽 - 自己可以登入後台 - 在後台可以新增、編輯、刪除文章有餘力的話，還可以加個留言功能這種部落格，會實際做完資料的 CRUD 基本功能，還有簡易的註冊、登入、驗證找地方把這個部落格上線，或者買網址、租主機，實際上線在找工作的這幾個星期，實際拿這個部落格，來寫文章、技術筆記、經驗分享面試官絕對會覺得你是積極的人、有備而來（錄取之後就停止寫網誌的習慣也沒關係） ### 全端工程師我鼓勵全端的入行者，寫一個「個人行事曆工具」並且是 single page application (SPA) 這個行事曆要有以下功能 - 有一個行事曆頁面 - 有個按鈕可以新增活動 - 點擊行事曆內的活動，可以編輯、刪除 - 有一個清單業面，可以用條列式顯示全部活動 - 全程使用 ajax，不能整個刷新頁面這種行事曆，會實際做完資料的 CRUD 基本功能，還有基本的 SPA routing 在找工作的這幾個星期，實際拿這個行事曆，紀錄生活是像、活動面試時分享，面試官絕對會覺得你是積極的人、是個即戰力 ## 結論除此之外，做個人履歷表的網頁也不錯可以搜尋 'Portfolio website examples' 看看各種漂亮設計實際把履歷做成網頁，也可稍微證明自己能力在工程師生涯，不斷地做自己的 side project 是一個有趣、進步的好習慣甚至有一天，你做的某個 side project 大受歡迎，還可能變成一個獨立的小產品呢有空可以逛逛 https://www.producthunt.com/ 看看大家都在做什麼 side project 或許模仿其中一些，做個簡易版本，你會學到很多的～！ --- 您有沒有什麼好的點子、推薦的 side project 點子給初心者呢？歡迎留言分享！

4個讚 2留言 868瀏覽