MVC 學(xué)習(xí)使用及總結(jié)

djfml 發(fā)布于2019-08-26 12:15 / 3248人閱讀

摘要：中間的一層，就是控制層，它負(fù)責(zé)根據(jù)用戶從視圖層輸入的指令，選取數(shù)據(jù)層中的數(shù)據(jù)，然后對其進(jìn)行相應(yīng)的操作，產(chǎn)生最終結(jié)果。這三層之間緊密聯(lián)系，又互相獨立，每層內(nèi)部的變化不影響其他層。用做簡歷學(xué)習(xí)了思想后，用思想做了簡歷的留言板。

模塊化

什么是模塊化？就是把一個東西分成幾個塊（模塊），塊與塊之間互相獨立。

在臺式機(jī)時代，很多人都自己主裝過電腦，選購自己喜歡的顯示器，鼠標(biāo)，鍵盤，主機(jī)，配備性能強(qiáng)勁的cpu、顯卡、內(nèi)存等主成最強(qiáng)配置，這些單個物體都是模塊，互相獨立，可以根據(jù)自己的愛好選擇。

模塊化主要解決合作問題

自己與自己合作

自己與以前的自己合作

自己與別人合作

MVC

MVC 是一種代碼組織形式，他不是任何一種框架，也不是任何一種技術(shù)，它就是一種組織代碼的思想，我們要做到事情就是把 M 和 V 傳給 C，C 負(fù)責(zé)初始化 M，然后對 V 進(jìn)行操作。
畫成圖就是這樣：

MVC具體是什么呢？阮一峰老師給了我們很好的解答：

1）最上面的一層，是直接面向最終用戶的"視圖層"（View）。它是提供給用戶的操作界面，是程序的外殼。2）最底下的一層，是核心的"數(shù)據(jù)層"（Model），也就是程序需要操作的數(shù)據(jù)或信息。
3）中間的一層，就是"控制層"（Controller），它負(fù)責(zé)根據(jù)用戶從"視圖層"輸入的指令，選取"數(shù)據(jù)層"中的數(shù)據(jù)，然后對其進(jìn)行相應(yīng)的操作，產(chǎn)生最終結(jié)果。

這三層之間緊密聯(lián)系，又互相獨立，每層內(nèi)部的變化不影響其他層。

用 MVC 做簡歷

學(xué)習(xí)了 MVC 思想后，用 MVC 思想做了簡歷的留言板。

我沒有自己買服務(wù)器，用了線上免費的服務(wù)器——leancloud，具體的使用方法可以看它的使用文檔，這里就不在贅述了。

先上圖，靜態(tài)頁面是仿造網(wǎng)易云音樂做的，做完下來發(fā)現(xiàn)有點丑。

我做這個大概要實現(xiàn)的功能是：

用戶可以留言，必須要輸入用戶名和留言內(nèi)容（留言區(qū)左邊方框本來是頭像，我把它做成輸用戶名的地方）

點擊發(fā)表后，留言會立馬出現(xiàn)在留言墻上

評論條數(shù)實時更新

顯示日期

點贊功能

回復(fù)功能

本想全部用原生 JS 做的，無奈自己水平太次，有些地方使用的 jQuery。

目前做好的功能是1、2、3，剩余三個做了一部分，其中點贊功能在我實踐下來，貌似實現(xiàn)不了，數(shù)據(jù)傳送到后臺，不能累計，所以只做了靜態(tài)的更新，一刷新就沒了。

顯示日期功能，自己對原生 JS 掌握的不好，沒有做成我們常用的日期格式。

回復(fù)功能，今天來不及做了，因為還需要做兩套樣式，一套是回復(fù)時的輸入框，以及上墻后的樣式（這點最后再來做吧）。

今天花時間比較多的地方是動態(tài)創(chuàng)建 DOM 元素，還沒有效果，用原生 JS 真的好難實現(xiàn)，我剛開始全部用createElement創(chuàng)建標(biāo)簽，然后在一個個appendChild到頁面中，長長的寫了一坨，還不能復(fù)用，突然就想到自己能不能實現(xiàn)jQuery的html方法，果然很傻很天真，jQuery源代碼看了半天沒看懂。算了，果斷放棄，還是老老實實使用它吧。

框架

MVC 的 V，頁面可視區(qū)域document.querySelector(".messages")，所有操作都是在它內(nèi)部。

MVD 的 M，操作服務(wù)器，獲取和保存數(shù)據(jù)，只負(fù)責(zé)操作服務(wù)器，至于返回數(shù)據(jù)的操作統(tǒng)一由 C 完成

初始化 AV 對象 initAV

請求數(shù)據(jù) fetch

保存數(shù)據(jù) save

2 和 3 都是返回 Promise 對象，可以直接在后面進(jìn)行then操作。

MVC 的 C，負(fù)責(zé)監(jiān)聽 V、調(diào)用 M；M 和 V 都在初始化的時候傳遞給 C，C 內(nèi)部不直接操作 M 和 V。

常用的變量

init：初始化變量和各操作

綁定事件：目前只做了留言功能

進(jìn)入頁面后，加載留言

留言后發(fā)送服務(wù)器，并上墻

用 MVC 思想的，每個模塊里面也都是各個獨立的，每個方法只做該部分該做的事情，這次我做的不是很好，還是有很多混在了一起。

C 部分除了上面講的的 DOM 操作外，還有兩個比較費時的地方。

第一個是，我需要的數(shù)據(jù)是用戶名，留言內(nèi)容和時間，這三個數(shù)據(jù)放在了兩個屬性里面，如果我要自己實現(xiàn)動態(tài)創(chuàng)建 DOM 的話，這數(shù)據(jù)很難拿到，需要反復(fù)的遍歷后臺返回的對象，這就會造成新能很差。后來想到了一種方法——把他們以對象的形式分別push到數(shù)組，出現(xiàn)了一個問題，數(shù)組的下標(biāo)全是偶數(shù)，并不是0,1,2,3,4 這樣排列的，這兩個卡在了一起，后來用了 jQuery 之后配合 ES6 語法，很輕松就搞定了（偷懶了）。

第二個是留言上墻時，留言總數(shù)實時更新，數(shù)據(jù)拿到之后，怎么弄都不能加1，老當(dāng)成字符串解析，但用 typeof 檢測返回的又是 number ，搞的頭都暈，試到最后才想起parseInt，我艸，好了，我的天。typeof 果然是個大坑。

總之今天收貨挺大的，發(fā)現(xiàn)自己有好多問題，主要兩點：代碼思路不清晰，出錯了會卡很久；做之前沒考慮全，做到最后才發(fā)現(xiàn)最關(guān)鍵的數(shù)據(jù)拿不到，白白浪費時間。