模仿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

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

 

　　全文完！

---

 

　　初次寫博客，水平有限。若對同學們能有略微幫助，不甚榮幸。