深入學習前端MVC和MVVM(一)
MVC是一種開發模式,就是一種模型—檢視—控制器(MVC)模式。
在php專案中,nodejs專案中,很容易實現MVC。比如一個nodeJS的MVC:
先說後臺的MVC
一、model層
模型層:模型中的邏輯嚴重依賴永續性。
這裡用的是mongoose來定義模型。
其實模型層就是對資料的封裝,下面是我的model.js
var mongoose=require('mongoose');
var Orders=require('./orders.js');
var customerSchema=mongoose.Schema({
firsrName:String,
lastName:String ,
email:String,
address1:String,
state:String,
saleNotes:[{
date:Date,
salepersonId:Number,
notes:String
}]
})
customerSchema.methods.getOrders=function (argument) {
return Orders.find({customerId:this._id})
}
var Customer=mongoose.model('Customer',customerSchema)
module.export=Customer
二、檢視模型(ViewModel)
檢視模型介於檢視和模型之間,
用於遮蔽掉一部分模型資料,
或者是提供一些規格化的資料給檢視
viewModel.js
var Customer = require('./model.js');
//聯合各域的輔助函式
function smartJoin(arr, separator) {
if (!separator) separator = ' ';
return arr.filter(function(elt) {
return elt !== undefined && elt !== null && elt.toString().trim() !== '';
}).join(separator)
}
module.export = function(customerId) {
var customer = Customer.findById(coustomerId);
if (!customer) return {
erro: 'Unknow customer ID: ' + req.params.coustomerId
}
var orders = customer.getOrders().map(function(order) {
return {
orderNumer: order.orderNumer,
date: order.date,
status: order.status,
url: '/orders/' + order.orderNumber
}
});
return {
firsrName: customer.firstName,
lastName: customer.lastName,
name: smartJoin([customer.firstName, customer.lastName]),
address1: customer.address1,
state: customer.state,
orders: customer.getOrders().map(function(order) {
return {
orderNumber: order.orderNumber,
date: order.date,
status: order.status,
url: '/orders/' + order.orderNumber
}
})
}
}
三、控制器
控制器負責處理和使用者間的互動
並根據使用者互動選擇恰當的檢視來顯示
控制器和路由很像
區別:控制器會把相關功能歸組
var Customer=require('./model.js');
var customerViewModel=require('./viewModel.js');
exports={
registerRoute:function (app) {
app.get('/customer/:id',this.home);
app.get('/customer/:id/preferences',this.preference);
app.get('/orders/:id',this.orders);
app.post('/customer/:id/update',this.ajaxUpdate);
}
home:function (req,res,next) {
// body...
}
preferences:function (req,res,next) {
// body...
}
orders:function (req,res,next) {
// body...
}
ajaxUpdate:function (req,res) {
// body...
}
}
以上就是後臺Nodejs實現的一個MVC模式。
後臺的MVC其實最好理解:
M就是資料底層,用於定義資料的格式,方法等,感覺是和資料庫打交道;
V即檢視模型,用於資料展示的,因為我們後臺的資料不可能全部給使用者看到,自然要經過處理之後才展現給使用者。 View和Model相關。
C即操作層,就是管理操作的。和路由確實很像,接受客戶的控制,比如下單操作、刪除操作、編輯操作等。C必須要與Model和View層相關;
這是百度百科上面拷過來的一張圖,生動形象的說明了什麼是MVC:
我覺得後臺開發的MVC模式非常清楚,那麼前端MVC是什麼呢
留著下一節寫
相關推薦
深入學習前端MVC和MVVM(一)
MVC是一種開發模式,就是一種模型—檢視—控制器(MVC)模式。 在php專案中,nodejs專案中,很容易實現MVC。比如一個nodeJS的MVC: 先說後臺的MVC 一、model層 模型層:模型中的邏輯嚴重依賴永續性。 這裡用的是mongoose
深入學習前端MVC和MVVM(二)
上一節說了後臺的MVC,現在開始講重點,前端的MVC又是一個什麼鬼。 很長一段時間我都沒有搞清楚MVC和MVVM。 一直在說ng是MVC,react和Vue是MVVM,MVVM我用過了,用過vue和react,他們的資料繫結,那麼MVC究竟是什麼樣子呢?
深入學習Make命令和Makefile(上)
make是Linux下的一款程式自動維護工具,配合makefile的使用,就能夠根據程式中模組的修改情況,自動判斷應該對那些模組重新編譯,從而保證軟體是由最新的模組構成。本文分為上下兩部分,我們將緊緊圍繞make在軟體開發中的應用展開詳細的介紹。 一、都是原始檔太多惹得禍
深入學習Make命令和Makefile(上)(1)
make是Linux下的一款程式自動維護工具,配合makefile的使用,就能夠根據程式中模組的修改情況,自動判斷應該對那些模組重新編譯,從而保證軟體是由最新的模組構成。本文分為上下兩部分,我們將緊緊圍繞make在軟體開發中的應用展開詳細的介紹。
深入學習Make命令和Makefile(上)(4)
七、makefile中的巨集 在makefile中可以使用諸如XLIB、UIL等類似於Shell變數的識別符號,這些識別符號在makefile中稱為“巨集”,它可以代表一些檔名或選項。巨集的作用類似於C語言中的define,利用它們來代表某些多處使用而又可能發生變化的
SVN的學習和使用(一)——SVN簡介
一、SVN簡介 Apache Subversion 通常被縮寫成 SVN,是一個開放原始碼的版本控制系統,Subversion 在 2000 年由 CollabNet Inc 開發,現在發展成為 Apache 軟體基金會的一個專案
整合學習之boosting,Adaboost、GBDT 和 xgboost(一)
在前面的部落格(https://blog.csdn.net/qq_16608563/article/details/82878127) 介紹了整合學習的bagging方法及其代表性的隨機森林。此次接著介紹整合學習的另一個方法boosting以及boosting系列的一些演算法,具體包括 Ad
MVC,MVP 和 MVVM(轉載)
1 什麼是MVC MVC的目的是為了把資料(Model)和檢視(View)分離開來,然後用控制器(Controller)作膠水來粘合M和V之間的關係。 這樣做的目的是為了實現注意點分離這樣一個更高層次的設計理念,也就是讓專業的物件做專業的事情,View就只負責檢視相關的東西,Mode
Android重新學習記錄和心得(一)--Handler
1.關於Handler,MessageQueue,Looper,Message 主要講了Handler的message傳送,訊息的同步非同步。以前只知道Handler可以傳送訊息,然後一般通過handlerMessage方法來接收各種訊息,發現其實Handler還可設定
Tomcat的學習和使用(一)
一、Tomcat伺服器埠的配置 Tomcat的所有配置都放在conf資料夾之中,裡面的server.xml檔案是配置的核心檔案。 如果想修改Tomcat伺服器的啟動埠,則可以在server.xml配置檔案中的Connector節點進行的埠修改 例如:將Tomcat伺服器的啟動埠由預設
CSS深入之其實你可能根本不認識margin和padding(一)
1.我們來解析官方的margin是怎麼個說法 margin屬性可以為給定元素設定所有四個(上下左右)方向的外邊距屬性。四個外邊距屬性設定分別是: margin-top, margin-right, margin-bottom 和 margin-left 。指定
設計模式學習之設計模式原則(一):單一職責原則和里氏替換原則
學習設計模式,以《設計模式之禪》為藍本進行總結與學習,今天先記錄設計模式六大原則的兩個原則:單一職責原則(SRP)和里氏替換原則(LSP)。 單一職責原則 Single Responsibilit
輕輕鬆鬆學習SpringBoot2:第十六篇: SpringBoot和JPA(一)(mysql)
Spring操作資料庫的方式有很多種,這一遍我們講解的是jpa(Java Persistence API)一:建立資料庫testcreate database test二:引入maven配置檔案<dependency> <groupId>mys
HTML學習之塊級元素和行內元素的特徵和區別(一)
這幾天在學習HTML,這裡總結一下塊級元素和行內元素的特徵和區別,本文也是來自於其他同行的一些文章,在這裡感謝一下那些作者,下面先把這些原文粘貼出來 http://www.cnblogs.com/Ja
EF學習和使用(一)Database First
上篇部落格中介紹了ORM思想,可以說ORM思想在資料互動方面給我們帶來了一次變革。他能夠自動實現Entity實體的屬性與關係型資料庫欄位的對映,增刪改查的sql指令碼由ORM來自動生成,使我們編碼時不用
小甲魚《零基礎學習Python》課後筆記(一):我和Python的第一次親密接觸
0. Python是什麼型別的語言? Python是指令碼語言。Python相比C和Java,它實現一個功能可能10行,而Java要100行,C要1000行,這只是一個比喻,不過也說明Python是一種高階的語言。Python因為其有全球開發者建立了數量眾多的庫,使得開發
支援seaJs和requireJs的前端模組開發方案(一):方案介紹
1.前言 本系列文章將介紹本人開發並在使用一套前端模組化開發方案,支援seaJs和requireJs兩種模組模式。方案適合多前端人員同時開發協作,也適合個人單獨使用。 方案不算複雜,但是不太習慣CSDN的編輯器,並且本人不善寫文,有些地方可能格式交亂或者表達不夠清晰,如有不
機器學習 | 深入SVM原理及模型推導(一)
本文始發於個人公眾號:**TechFlow**,原創不易,求個關注 今天是**機器學習專題**的第32篇文章,我們來聊聊SVM。 SVM模型大家可能非常熟悉,可能都知道它是面試的常客,經常被問到。它最早誕生於上世紀六十年代。那時候雖然沒有機器學習的概念,也沒有這麼強的計算能力,但是相關的模型和理論已經
Spring MVC新手教程(一)
erp -s sil troy .html 解釋 rand rtu wire 直接幹貨 model 考慮給用戶展示什麽。關註支撐業務的信息構成。構建成模型。 control 調用業務邏輯產生合適的數據以及傳遞數據給視圖用於呈獻; view怎樣對數據進行布局,以
地址映象和變換(一)之主存虛存
規則 根據 pan 命中率 實現 -s tro 分享 使用 地址映象:是將每一個虛存單元按某種規則裝入實存,即建立多用戶虛地址與實存地址之間的相應關系。 地址變換:是程序依照這樣的映象關系裝入實存後。在運行時,多用戶虛地址怎樣變換成相應的實存地址。 頁面爭用(實頁沖突