模仿ASP.Net MVC的node.js MVC实现

　　本文提供了一个模仿ASP.Net MVC的node.js MVC框架，基本实现了ASP.Net MVC的Model(模型)、View(视图)和Controller(控制器)的这三项基本功能，并且基于这个MVC框架的编码方式、程序结构和文件组织，同ASP.Net  MVC基本相同。

 

一：为什么要做这个东西

　　首先声明，我对ASP.Net MVC研究不深，对node.js更是仅知皮毛。

　　多年来我主要做ASP.Net WebForm的开发，近来偶然接触了MVC，令人耳目一新。感觉MVC同WebForm有很大的区别，源代码更简洁、目标代码更干净、系统运行速度更快。虽然还没有找到类似于WebForm的可视化开发的方法，不过对我这种已经习惯手写代码的程序员而言，却没什么障碍。

　　近来又接触了node.js，这真是一个神奇的东西：JavaScript做服务器端开发、代码及其简洁、（据说）速度也奇快。不过......不过对我这种已经习惯了ASP.Net开发方式的程序员，node.js仅提供基础功能支持，这对我们却是一种折磨。

　　灵机一动，或者说，是为了以后的懒惰做准备，决定写一个简单的MVC框架。基本原则是：其使用方法同ASP.Net MVC基本相同（为了让我们少耗费一些脑细胞）。

　　这个MVC框架我已经基本写完(草稿)，本文就仅对已有的实现做简要说明，中间的挫折统统忽略吧。

　　另外，这个MVC框架用到了一些第三方组件，这里提供其官方地址，若需要下载或对其有疑问，直接导航过去看：

• underscore：一个实用的JavaScript工具库，提供很多对集合、数组、对象的快捷操作方法，地址：http://documentcloud.github.com/underscore/
• underscore.string：另一个实用的JavaScript工具库，提供对字符串的快捷操作方法(实际上同underscore没有任何关系)，地址：https://github.com/epeli/underscore.string
• ejs：一个强大的JavaScript模板支持库，地址：https://github.com/visionmedia/ejs

　　先具体说一下导致我产生这个想法的具体原因。

　　为了学习node.js，从官方网站(http://www.nodejs.org/)下载程序包，执行安装。(安装完成后，可执行文件node.exe放在C:\Program Files\nodejs中，如果不习惯的话，可以把整个文件夹拷贝到其他的位置。)

　　首先，从Hello Word开始。在nodejs文件夹中新建一个文本文件，起名为index.js，用任意文本编辑器编辑： 

var http = require('http');
http.createServer(function (req, res) {
    res.end('Hello World\n');
}).listen(81, "127.0.0.1");
console.log('Server running at http://127.0.0.1:81/');

　　然后在Dos窗口执行: node index.js。用浏览器打开:http://127.0.0.1:81，马上就能看到文本：Hello World。

　　是不是很简单？不过怨念也就在这里了：我们做传统的Web开发，每个请求需要建立不同的文件，并使用不同的http地址来请求；而node.js，所有的请求都指向到这个根文件夹的index.js，这就需要我们经常性的在这个文件中添加代码，即使是使用伟大的express也不例外。这是express的一个样例，一般起名为app.js：　

var express = require('express ');

var app = express.createServer();

app.get('/', function(req, res){
  res.send('root index');
});

app.get('/user/', function(req, res){
  res.send('user's index');
});

app.listen(82);
console.log('listening on port 82');

　　当然，我不会去说express不好(因为这确实是个强大的组件)，只是我不习惯；可能express有很好的方法，我不知道而已。

　　于是我决定用node.js做一个类似于ASP.Net MVC的框架，以方便我以后继续学习使用node.js，或许也可以帮助到其他初学node.js的同学们。

二：这个东西应该是什么样子的

　　既然是计划模仿ASP.Net MVC，那么就要尽量模仿的像一点。

　　为什么我要模仿ASP.Net MVC，而不去模仿ASP.Net WebForm: 因为MVC够简单，而WebForm太复杂了，尤其是那一大堆服务器端控件，除非一个传奇级的任务，可不敢想象怎么去做。

　　首先是ASP.Net MVC的目录结构。这个图片就是一个经典的ASP.Net MVC站点的目录结构(VS自动创建的，做ASP.Net MVC的同学应该非常熟悉) ：

　　在这个图片中，有几个东西是我们需要关注的：

• Content文件夹：用于放置静态文件，包括images、styles等等
• Controllers文件夹：用于放置控制器程序文件
• Models文件夹：用于放置数据模型文件
• Views文件夹：用于放置视图文件（就是页面或控件模板）

　　上述的四个文件夹是我们需要模仿的，而App_Start、Global.asax、Web.config等等的，或许到了后期会发现也需要做，现在就先算了。至于Scripts文件夹的内容，在我看来应该放到Content\Scripts子文件夹中 。

　　作为适应这个框架工作方式的结果，或者说是我们的node.js MVC的目的：

• 全部静态文件放入Content文件夹，并可以通过HTTP地址直接访问，而不用增加任何程序代码
• 全部控制器文件放入Controllers文件夹，一个Controller文件包含有多个Action，每个Action的访问方式为：http://.../<controller>/<action>/...
• 全部视图文件放入Views文件夹，并且每个Controller在这里对应有一个同名的子文件夹
• ASP.Net MVC的全部视图文件放入Models文件夹，不过node.js是基于javascript动态语言的，模型定义似乎并不重要，这里就忽略了

　　为实现上述目的，我们就先建立一个基本的目录结构，之后的工作都围绕这个目录结构：

　　在这个框架中：

• index.js文件永远不用修改
• contents文件夹一般会包含images、script、styles等子文件夹，任何文件放进去就可以用，并且可以包含任意规格的子文件夹
• controllers文件夹包含全部的服务器端javascript文件
• views文件夹包含全部的服务器端模板文件，且每一个controler在此文件夹中对应一个同名的子文件夹

三：这个框架都实现了什么

　　这个框架的程序基本程序逻辑如下图所示：

　　

　　根据以上逻辑图可以看出，此框架只有三个简单的分支：

• 静态请求直接输出
• 动态请求由控制器处理
• 若需要输出页面则调用模板引擎处理

　　这里先说明一下：在此框架中，任何有文件后缀的请求均被认为是静态请求。

　　为实现此框架编写了一系列的程序文件，以实现以下功能：

• 请求入口：即index.js文件，实现请求分发和简单的安全管理
• 静态页处理：读取contents文件夹中的静态文件
• 动态请求处理：处理动态请求并返回动态结果
• Session支持：提供Web应用中的用户级缓存支持(等同于ASP.Net中的Session)
• Cache支持：提供Web应用中的全局缓存支持(等同于ASP.Net中的Cache或Application)
• 模板处理：处理包含Html页面或板块的文件，并支持嵌入式开发
• 嵌入式代码支持：为嵌入式开发提供扩展支持，包括ASP.Net MVC中的Html语法
• 路由：用于支持除了“/<controller>/<action>/...”之外的其他浏览器请求(暂未实现)

　　全部文件夹和文件结构如下表所示：

index.js：请求入口
- contents：静态内容文件夹
　　- css
　　- images
　　- scripts
- controllers：动态内容程序文件夹
- views：动态内容模板文件夹
- node_modules：node.js类库文件夹
　　- ejs：第三方模板处理组件
　　- mvc：我们的MVC框架文件夹
　　　　base.js：进行动态请求初始化操作，例如准备session等
　　　　cache.js：支持全局缓存
　　　　html.js：支持模板处理和嵌入式开发
　　　　index.js：无功能，仅用于nodejs
　　　　mvc.js：请求分发和处理
　　　　routes.js：请求路由
　　　　session.js：支持用户缓存
　　　　utils.js：部分常用工具函数
　　- underscore：第三方类库
　　- underscore.string：第三方类库

 

四：MVC框架实现代码

　　注意：我假定阅读本文的同学:

• 对javascript比较熟悉（不能是生手，否则可能看不懂这些代码）
• 对node.js已经有了初步的了解，比如require、module.exports等的用法

1. 请求入口(index.js)

 　　作为一个标准的node.js程序，一个根文件夹下的index.js是必须的。这个文件仅包含如下代码： 

var http = require('http');
var mvc = require('mvc');

http.createServer(function (req, res) {
    new mvc.startRequest(req, res);
}).listen(88, "127.0.0.1");

console.log('Server running at http://127.0.0.1:88/');

 　　在这个文件中，第6行的listen方法的参数(及第8行的日志)需要根据实际情况进行修改，其他的可以总是保持不动。当然若实现了类似ASP.Net的web.config支持之后，这个index.js文件就再也不用修改了。

　　在index.js文件中仅做了一件事，即调用mvc.startRequest方法以开始一个请求处理。其他的代码同node.js中的hello world样例程序没啥区别。

2. 分发与请求处理 (mvc.js)

　　mvc.js程序是此框架的核心，主要实现了请求分发和处理入口。

　　首先，采用node.js推荐的方法引入外部程序：

var url = require('url');
var path = require('path');
var fs = require('fs');
var querystring = require('querystring');
var _ = require('underscore');
var _s = require('underscore.string');
var utils = require('./utils');
var routes = require('./routes');
var base = require('./base');

 

　　其中，1-4是node.js系统类库，5-6是第三方类库，7-9是我们的框架中的将被用到的类库（后面我们在详细介绍）。

　　然后我们看看在index.js用到的mvc.startRequest方法，在这个方法中我们简单地根据有无文件后缀来区分是否是动态请求。

module.exports.startRequest = function(req, res) {
    //在处理请求前先在控制台打印日志
    if (req.url!='/favicon.ico') { //favicon.ico文件一般情况下是浏览器自动请求的，对我们没用
        console.log(_s.sprintf('Start request: %s\t%s', utils.dateString(new Date()), req.url));
    }
    //初始化一个请求处理引擎实例
    var handler = new RequestHandler(req, res)
    var u = url.parse(req.url);
    var ext = path.extname(u.pathname);
    if (ext) { //如果请求的文件有后缀则认为是静态请求
        handler.responseContent(u.pathname);
    }
    else { //否则是动态请求
        handler.handleDynamicRequest();
    }
}

 

　　注：为方便起见，代码说明我尽量都卸载代码注释中。

　　上述代码中我们用到了一个RequestHandler类，用于处理请求。以下是这个类的定义：

function RequestHandler(req, res) {
    this.request = req;
    this.response = res;
}

　　我们使用RequestHander.responseContent方法来处理任何静态请求，即存储在/contents/文件夹中的文件。思路是：找到文件、读取文件、输出文件。

RequestHandler.prototype.responseContent = function(filename) {
    if (!filename) { //如果参数缺失，则直接提示错误(不过这种情况应该不会出现)
        this.responseNoFound();
    }
    else {
        filename = _s.trim(filename,' \/\\'); 

        var self = this;
        var filepath = path.resolve('./contents/', filename);
        fs.readFile(filepath, function (err, data) {
            if (err) { //如果文件不存在或无法访问，则提示错误
                self.responseNoFound();
            }
            else { //否则输出文件内容到客户端
                self.response.write(data);
            }
            self.response.end(); //输出完成之后必须调用response.end方法
        });
    }
}

 

　　我们使用RequestHandler.handleDynamicRequest方法来处理动态请求。思路是：获取请求参数，调用控制器来处理请求。

RequestHandler.prototype.handleDynamicRequest=function() {
    var params = null;
    var self = this;
    if (self.request.method == 'POST') { //如果是post方式的请求，则需要异步读取请求参数
        var buf = [];
        self.request.addListener('data', function(chunk){ 
            buf.push(chunk);
        })  
        .addListener('end', function(){
            params = querystring.parse(buf.join('')); 
            self.handleController(params);
        })  
    }
    else { //如果不是post方式（是get方式）的请求，则直接使用url参数
        params = self.request.url.query;
        if (_.isString(params)) 
            params = querystring.parse(params);
            
        self.handleController(params);
    }
}

 

　　上述代码中的RequestHandler.handleController方法，用于装载控制器，并执行action:

RequestHandler.prototype.handleController=function(params) {
    var controllerInfo = routes.parseControllerInfo(this.request); //分析请求url，拆分出controller,action,parameters
    
    if (controllerInfo
        && controllerInfo.controllerName && controllerInfo.methodName
        && !_s.startsWith(controllerInfo.controllerName, '_')
        && !_s.startsWith(controllerInfo.methodName, '_')) {

        var instance = this.createControllerInstance(controllerInfo.controllerName); //装载控制器

        if (instance
            && _.has(instance, controllerInfo.methodName) 
            && _.isFunction(instance[controllerInfo.methodName])) { //若存在action定义，则执行该action
            try { //注意：这里必须加try...cache，以防止action发生错误导致我们的网站崩溃
                var res = instance[controllerInfo.methodName](controllerInfo.parameters, params);
                this.response.end(res + "");
            }
            catch (err) {
                console.log(_s.sprintf("Execute a controller method failed: %s", err));
                utils.responseError(this.response, 500);
            }
        }
        else {
            this.responseNoFound();
        }
    }
    else {
        console.log(_s.sprintf('parse controller failed: %s', _.keys(controllerInfo)));
        console.log(_s.sprintf('%s', _.values(controllerInfo)));
        this.responseNoFound();
    }
}

 

　　装载控制器的RequestHandler.createControllerInstance方法的定义是：

RequestHandler.prototype.createControllerInstance = function(controllerName) {
    var instance = null;

    try {
        var controller = require(path.resolve('./controllers/', controllerName)); // 使用require方法装载控制器
        
        if (controller && _.isFunction(controller)) {
            instance = new controller(this.request, this.response);
        }
    }
    catch (err) {
        utils.responseError(this.response, 500);
    }

    return instance;
}

 　　在RequestHandler中还定义了两个额外的方法：

//初始化页面基类
module.exports.controller = function(req, res) {
    return new base(req, res);
}


//当文件不存在时记录日志并提示错误
RequestHandler.prototype.responseNoFound = function() {
    if (this.request.url!='/favicon.ico') {
        console.log(_s.sprintf('No found url: %s', this.request.url));
    }
    utils.responseError(this.response, 404);
}

  

3. 动态请求初始化(base.js)

　　在请求分发处理成功之后，我们就需要开始实际的业务处理，包括session、页面、模板等等。这些功能我们集中定义在base.js中：

var Cache = require('./cache');
var Session = require('./session');
var Html = require('./html');
var routes = require('./routes');

var BaseController = module.exports = function (req, res) {
    this.request = req;
    this.response = res;
    
    this.cache = Cache; //全局缓存
    this.session = Session.current(req, res); //用户缓存
    this.html = new Html(this); //视图处理及嵌入式开发引擎
    
    this.controllerInfo = routes.parseControllerInfo(req);
}

//处理一个视图（模板）,并返回结果内容
BaseController.prototype.renderView = function(options) {
    return this.html.renderView(options);
}

//处理一个视图（模板）,直接输出到客户端
BaseController.prototype.responseView = function(options) {
    this.response.end(this.renderView(options));
}

  

 4. 用户缓存处理 (session.js)

　　Session是Web应用程序中一个非常重要的东西。对node.js来说，Session处理其实就是一个全局的数据集合的处理：

var _ = require('underscore');
var _s = require('underscore.string');

//全部Session的存储空间
var SessionPool = {};

//全局的Session过期时间
Session.prototype.expireTime = 20; //缺省20分钟

//新建一个SessionID
function newSessionID() {
    var buff = [];
    var chars = '0123456789abcdefghijklmnopqrstuvwxyz';
    for (var i=0; i<32; i++) {
        buff.push(chars[Math.floor(Math.random() * 36)]);
    }
    return buff.join('');
}

//一个Session的定义
var Session = function() {
    var self = this;
    self.sessionId = newSessionID();
    self.sessionItems = {};
    self._expireTime = Session.prototype.expireTime; 
    self._expireHandle = setInterval(function () { //每一分钟检查一次是否过期
        self._expireTime -= 1;
        if (self._expireTime <= 0) {
            clearInterval(self._expireHandle);
            self.dispose(); //过期则自动清除
        }
    }, 60000);
}

//清理一个Session
Session.prototype.dispose = function() {
    if (this._expireHandle) {
        clearInterval(this._expireHandle);
        this._expireHandle = null;
    }
    
    for (var key in this.sessionItems) {
        delete this.sessionItems[key];
    }
    this.sessionItems = null;
    
    delete SessionPool[this.sessionId];
}

　　然后我们定义一些常用的Session操作方法：

//判断Session项是否存在
Session.prototype.has = function(key) {
    return _.has(this.sessionItems, key);
};

//添加或更新一个Session项
Session.prototype.set = function(key, value) {
    if (key) {
        this.refresh();
        
        if (this.has(key) && this.sessionItems[key] == value) {
            return;
        }

        this.sessionItems[key] = value;
    }
}

//获取一个Session项
Session.prototype.get = function(key) {
    this.refresh();

    if (key && this.has(key)) {
        return this.sessionItems[key];
    }
    
    return null;
}

//删除一个Session项
Session.prototype.remove = function(key) {
    this.refresh();
    
    if (key && this.has(key)) {
        delete this.sessionItems[key];
    }
}

//刷新过期时间，
Session.prototype.refresh = function() {
    this._expireTime = Session.prototype.expireTime; 
}

44 module.exports = Session;

　　用户Session应该能被自动创建和恢复，这里我们使用大部分浏览器都支持的cookie(如果你的浏览器不支持cookie那么就需要另想它法了)。

module.exports.current = function(req, res) {
    //从Request的header中存储的cookie中查找当前正在使用的SessionID
    var headers = req.headers;
    var sessionId = null, session = null;
    var cookie = null;
    if (_.has(headers, 'cookie')) {
        cookie = headers['cookie'];
        if (_s.startsWith(cookie, 'SessionID=')) { //此处可能不是很严谨，需要优化
            sessionId = cookie.substr(10, 36);
        }
    }

    //激活Session池中的一个session
    if (sessionId && _.has(SessionPool, sessionId)) {
        session = SessionPool[sessionId];
    }

    //如果是新session，则自动创建一个，并写回cookie中
    if (!session) {
        session = new Session();
        SessionPool[session.sessionId] = session;

        res.setHeader('set-cookie', 'SessionID=' + session.sessionId); 
    }
    
    return session;
}

 

 　　这个Session.current方法将在BaseController.js第11行被自动调用，然后在任何动态请求中就都可以所以用session了。 

 

5. 系统缓存处理 (cache.js)

　　Cache同样是Web应用开发中的一个很重要的东西。它对应于ASP.Net中的Application集合，以及System.Web.Caching.Cache集合(ASP.Net中这两个东西可都可以实现全局缓存)。对node.js来说，Cache处理同Session差不多同样就是一个全局的数据集合的处理，不过它比Session要简单得多。

var _ = require('underscore');

var CachePool = {};

var Cache = function() {};

//判断Cache是否存在
Cache.prototype.has = function(key)
{
    return _.has(CachePool, key);
};

//添加或更新一个Cache项
Cache.prototype.set = function(key, value)
{
    if (key) {
        CachePool[key] = value;
    }
}

//获取一个Cache项
Cache.prototype.get = function(key)
{
    if (key && Cache.prototype.has(key)) {
        return CachePool[key];
    }
    
    return null;
}

//移除一个Cache项
Cache.prototype.remove = function(key) {
    if (Cache.prototype.has(key)) {
        delete CachePool[key];
    }
}

//建立一个全局的Cache容器
module.exports = new Cache();

　　注意：上述代码的第39行直接建立了一个类实例，即保证整个应用中只有一个Cache实例，以保证全局的唯一性。

　　这个Cache将在BaseController.js第10行被自动调用，然后在任何动态请求中就都可以所以用cache了。 

 

6. 视图处理 (html.js)

　　MVC构架中一个重要的功能点就是视图，简单地说就是模板处理。这里我们定义一个Html类（对应于ASP.Net MVC中的Html类）来实现这个功能。

　　基本思路是：装载模板文件、调用EJS处理模板。

var fs = require('fs');
var path = require('path');
var _ = require('underscore');
var _s = require('underscore.string');
var ejs = require('ejs');

var Html = module.exports = function (controller) {
    this.controller = controller;
};

//处理一个模板返回结果内容
Html.prototype.renderView = function(options) {
    //确定模板文件，若未指定，则缺省与控制器相同
    var options = options || {};
    if (!options.path || !options.name) {
        options.path = options.path || this.controller.controllerInfo.controllerName;
        options.name = options.name || this.controller.controllerInfo.methodName;
    }
    options.path = _s.trim(options.path,' \/\\');
    //模板文件必须存在于views文件夹中
    var viewPath = path.resolve(path.resolve('./views/', options.path + '/'), options.name);
    if (options.name.indexOf('.')<0) {
        options.extname = options.extname || '.htm';
        if (!_s.startsWith(options.extname,'.')) viewPath += '.';
        viewPath += options.extname;
    }

    try { //这里必须加try...cache，以防止文件操作及视图处理错误
        var tmpl = this.controller.cache.get(viewPath); //首先从缓存中读取模板，以提高效率
        if (!tmpl) { 
            tmpl = fs.readFileSync(viewPath);

            if (!_.isString(tmpl)) {
                tmpl = tmpl.toString();
            }

            this.controller.cache.set(viewPath, tmpl)
        }
        
        //使用EJS引擎处理模板，并将一些可能需要的参数传入引擎
        var res = ejs.render(tmpl, {
            filename: viewPath,
            model: options.data,
            html: this.controller.html,
            session: this.controller.session
        });

        return res;
    }
    catch (err)    {
        console.log(_s.sprintf('Html.renderView error: %s', err));

        return null;
    }
}

　　Q: 为什么我要使用EJS来处理模板，而不使用更稳定更流行underscore或jade等引擎?

　　A: 在选择模板处理引擎时，我重点考虑到了嵌入式开发的需求，即我应该可以将任何参数任何数据传入到模板引擎中，并参与模板的处理；而这个需求ejs做得更好。

6. 嵌入式开发 (html.js)

 　　嵌入式开发，即在网页文件中，嵌入并运行程序代码。例如，以下的来自于ASP.Net MVC自动生成的一份代码：

<%
    if (Request.IsAuthenticated) {
%>
        欢迎使用 <b><%: Page.User.Identity.Name %></b>!
        [ <%: Html.ActionLink("注销", "LogOff", "Account") %> ]
<%
    }
    else {
%> 
        [ <%: Html.ActionLink("登录", "LogOn", "Account") %> ]
<%
    }
%>

　　这其中包含三个关键点：

• 在页面中可以签入程序脚本，例如if...else...
• 页面中可以引用外部程序传入的数据对象，例如request, page, model，以及自定义对象等
• 支持Html.method的方式来创建页面控件

　　而这些，使用ejs都可以实现。

　　首先看上节代码中的第42-45行，我们在这里传入任何所需要的数据对象。同时，我们传入了一个Html对象，用于支持创建页面控件。

　　Html对象除了上节代码中定义的一个基本方法renderView之外，还需要定义更多的方法（具体需要哪些方法，请参见MSDN的在线帮助System.Web.Mvc.HtmlHelper对象）。

　　首先，我们需要定义一个生成控件的基本方法：　　

Html.prototype.element = function(tag, attributes) {
    var buf = [], text=null;
    
    buf.push('<');
    buf.push(tag);
    if (attributes) {
        for (var key in attributes) {
            if (_.has(attributes, key)) {
                var value = attributes[key];
                if (key.toLowerCase() === 'text')
                    text = value;
                else if (value) 
                    buf.push(" " + key + '="' + _.escape(value) + '"');
            }
        }
    }
    if (!_.isNull(text)) {
        buf.push('>');
        buf.push(text);
        buf.push('</'+tag+'>');
    }
    else {
        buf.push('/>');
    }

    return buf.join('');
}

　　这个方法没什么好说的，根据数据构造一个字符串而已。

　　后面我们要做的，就是一个个编写控件生成代码。(下面是一些常用控件的生成代码)

Html.prototype.textBox = function(attributes) {
    var multi = attributes.multi || attributes.multiline || attributes.multiLine;
    var others = {};
    if (!multi) {
        attributes.value = attributes.value || attributes.text;
        delete attributes.text;
        if (attributes.password) {
            attributes.type = 'password';
            delete attributes.password;
            return this.element('input', attributes);
        }
        else {
            attributes.type = 'text';
            return this.element('input', attributes);
        }
    }
    else {
        attributes.text = attributes.text || attributes.value || '';
        delete attributes.value;
        delete attributes.multi;
        delete attributes.multiline;
        delete attributes.multiLine;
        return this.element('textarea', attributes);
    }
}

Html.prototype.checkBox = function(attributes) {
    attributes.type = 'checkbox';
    attributes.checked = attributes.checked ? 1 : 0;
    delete attributes.text;
    return this.element('input', attributes);
}

Html.prototype.radioBox = function(attributes) {
    attributes.type = 'radio';
    attributes.checked = attributes.checked ? 1 : 0;
    delete attributes.text;
    return this.element('input', attributes);
}

Html.prototype.button = function(attributes) {
    attributes.value = attributes.value || attributes.text;
    delete attributes.text;
    
    if (!attributes.type || !(attributes.type == 'reset' || attributes.type == 'submit' || attributes.type == 'button' || attributes.type == 'image')) {
        attributes.type = 'button;'
    }

    return this.element('input', attributes);
}

Html.prototype.listBox = function(attributes) {
    var innerHTML= '';
    if (attributes.options) {
        if (_.isFunction(attributes.options)) {
            try {
                attributes.options = attributes.options();
            }
            catch (err) {
                attributes.options = [];
            }
        }
        
        var self=this;
        _.each(attributes.options, function(item) {
            if (item.value && item.value == attributes.value
                || item.text && item.text == attributes.text) {
                item.selected = '1';
            }
            innerHTML += self.element('option', item);
        });
        
        attributes.text = innerHTML;
        delete attributes.options;
    }
    
    return this.element('select', attributes);
}

Html.prototype.hidden = function(attributes) {
    attributes.type = 'hidden';
    attributes.value = attributes.value || attributes.text;
    delete attributes.text;
    return this.element('input', attributes);
}

Html.prototype.label = function(attributes) {
    if (attributes.for) {
        return this.element('label', attributes);
    }
    else {
        return this.element('span', attributes);
    }
}

Html.prototype.link = function(attributes) {
    return this.element('a', attributes);
}

Html.prototype.actionLink = function(attributes) {
    return this.link(attributes);
}

Html.prototype.image = function(attributes) {
    return this.element('img', attributes);
}

 

 7. 路由 (routes.js)

　　路由功能是一个完整的框架必须实现的，并且框架的强壮性同此息息相关。

      但是呢，要实现一套完成的路由功能，难度确实也不低。这里，就只实现了最简单的路由功能，以解析这样的Url:

　　~/<Controller>/<Action>/<parameter1>/<parameter2>/...

var url = require('url');

module.exports._routes=[];

//Parse the controller name and method name and additional parameters
module.exports.parseControllerInfo = function(req) {
    var controllerName = null, methodName = null, parameters = null;
    
    //this section must be optimized in future.
    var paths = url.parse(req.url).pathname.split('/');
    if (paths.length >= 1) 
        controllerName = paths[1];
    if (paths.length >= 2) 
        methodName = paths[2];
    if (paths.length >=3) {
        parameters = paths.slice(3);
    }
    
    return {
        controllerName : controllerName,
        methodName : methodName,
        parameters : parameters
    }
}

 

五：模型（Model）的实现

　　在MVC中，Model是一个不可或缺的成分。而本文所描述的框架，在Controller和View方面做了较多的努力，但是对Model则没有太多涉及。

　　这意味着这个框架没能实现MVC的Model吗？当然不是。

　　在我理解，MVC的Model所实现的功能是：

• 后台程序将数据对象传入View中，由视图使用
• 浏览器回传的时候，自动把传入数据(post或get)打包成对象，由后台程序使用

　　针对上述需求，此框架是这样处理的：

• Html.renderView方法中调用了ejs.render方法来处理模板，并传入了任何可能使用的数据
• RequestHandler.handleDynamicRequest方法，把客户端传入的任何数据，打包成了一个可以直接使用的数据集合

 　当然这点儿Model实现是过于简单了（不过以后可以扩展嘛）。

 

六：应用示例

　　好了，以上就是本文所介绍的基于node.js的一个MVC框架的全部内容，虽然很简陋，不过确实能用。

　　这里做一个简单的示例来补充一下。

　　首先在controllers文件夹下新建一个test.js文件：　　

var _ = require('underscore');
var _s = require('underscore.string');
var mvc = require('mvc');

module.exports = function(req, res) {
    _.extend(this, mvc.controller(req, res));
    
    this.done = function(params, model) {
        var data = {
            users: [
              { name: 'tj' },
              { name: 'mape' },
              { name: 'guillermo' }
            ],
            utils: {
                caption: function (str) {
                    return _s.capitalize(str);
                }
            },
            listOptions: function() {
                var res=[];
                for (var i=0;i<10;i++) {
                    res.push({value: i+'', text: (i*10)+''});
                }
                return res;
            }
        };
        _.extend(data, model);
        this.responseView({name: 'done.htm', data : data});
    }
}

　　注意，第3,6,28行代码是必须的，其它的根据实际需求写。

　　然后在views文件夹下新建一个test文件夹，在其中新建一个done.htm文件：

<html>
<body>
<form method="post">
<% if (model.users && model.users.length) { %>
  <ul>
    <% model.users.forEach(function(item){ %>
      <li> <%= model.utils.caption(item.name)%>: <%= item.name %></li>
    <% }) %>
  </ul>
<% } %>
<div>
TextBox1: <%- html.textBox({name: "txtTest1", value: model.txtTest1}) %><br>
TextBox2: <%- html.textBox({name: "txtTest2", value: model.txtTest2, multi: true}) %><br>
CheckBox1: <%- html.checkBox({name: "chkTest1", value: "dd", checked: model.chkTest1}) %><br>
CheckBox2: <%- html.checkBox({id: "chkTest2", name: "chkTest2", value: "dd", checked: model.chkTest2}) %><%- html.label({for: "chkTest2", text: "Text for Check box"}) %><br>
DropDownList: <%- html.listBox({name: "lstTest1", value: model.lstTest1, options: [{value:1, text:"aa"},{value:2, text:"dd"}]}) %><br>
List Box: <%- html.listBox({name: "lstTest2", value: model.lstTest2, size: 4, options: model.listOptions}) %><br>
<%- html.button({type: "submit"}) %>
</div>
</form>
</body>
</html>

　

　　启动node.js：node index.js，在浏览器中输入地址：http://localhost:88/test/done

　　然后就可以看到如下结果：　　

 

　　全文完！

---

 

　　初次写博客，水平有限。若对同学们能有略微帮助，不甚荣幸。