深入学习前端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是什么呢
留着下一节写