1. 程式人生 > >深入學習前端MVC和MVVM(一)

深入學習前端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是什麼呢
留著下一節寫

相關推薦

深入學習前端MVCMVVM

MVC是一種開發模式,就是一種模型—檢視—控制器(MVC)模式。 在php專案中,nodejs專案中,很容易實現MVC。比如一個nodeJS的MVC: 先說後臺的MVC 一、model層 模型層:模型中的邏輯嚴重依賴永續性。 這裡用的是mongoose

深入學習前端MVCMVVM

上一節說了後臺的MVC,現在開始講重點,前端的MVC又是一個什麼鬼。 很長一段時間我都沒有搞清楚MVC和MVVM。 一直在說ng是MVC,react和Vue是MVVM,MVVM我用過了,用過vue和react,他們的資料繫結,那麼MVC究竟是什麼樣子呢?

深入學習Make命令Makefile

make是Linux下的一款程式自動維護工具,配合makefile的使用,就能夠根據程式中模組的修改情況,自動判斷應該對那些模組重新編譯,從而保證軟體是由最新的模組構成。本文分為上下兩部分,我們將緊緊圍繞make在軟體開發中的應用展開詳細的介紹。 一、都是原始檔太多惹得禍

深入學習Make命令Makefile1

        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深入之其實你可能根本不認識marginpadding

1.我們來解析官方的margin是怎麼個說法 margin屬性可以為給定元素設定所有四個(上下左右)方向的外邊距屬性。四個外邊距屬性設定分別是: margin-top, margin-right, margin-bottom 和 margin-left 。指定

設計模式學習之設計模式原則:單一職責原則里氏替換原則

學習設計模式,以《設計模式之禪》為藍本進行總結與學習,今天先記錄設計模式六大原則的兩個原則:單一職責原則(SRP)和里氏替換原則(LSP)。 單一職責原則 Single Responsibilit

輕輕鬆鬆學習SpringBoot2:第十六篇: SpringBootJPAmysql

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因為其有全球開發者建立了數量眾多的庫,使得開發

支援seaJsrequireJs的前端模組開發方案:方案介紹

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 分享 使用 地址映象:是將每一個虛存單元按某種規則裝入實存,即建立多用戶虛地址與實存地址之間的相應關系。 地址變換:是程序依照這樣的映象關系裝入實存後。在運行時,多用戶虛地址怎樣變換成相應的實存地址。 頁面爭用(實頁沖突