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