nodejs实现简易MVC

　相信大家对于nodejs应该不会陌生，如果真的比较陌生的请访问：http://nodejs.org或者http://cnodejs.org/了解。

　　这个简易MVC的结构如下图：

　　　　

　　首先需要一个http服务来监听来自客户端的请求，大致代码如下：

var m_http = require('http');
var m_querystring = require('querystring');

var m_requestHandler = require('./requestHandler');

exports.run = function (port) {
    port || (port = 80);

    m_http.createServer(function (req, res) {
        req.setEncoding('utf8');

        var postData = [];

        req.on('data', function (chunk) {
            postData.push(chunk);
        }).on('end', function () {
            req.post = m_querystring.parse(postData.join(''));

            m_requestHandler.handle(req, res);
        });

    }).listen(port);

    console.log('服务器启动!');
};

　　以上req.on('data', ...)内，使用的是一个postData的数组来保存请求的数据，但是当数据量大的时候，会出现一些问题，这个我们暂时不管，博友么可以自己去完善，^_^

　　接收了请求之后，需要通过请求的url和method去查找与之相匹配的Contoller，并调用Controller相应的Action，大致代码如下：

var m_route = require('./route');
var m_controllerBase = require('./controllerBase');
var m_invalidHandler = require('./invalidHandler');

var m_getRequestArgs = { ... };

exports.handle = function (req, res) {
    var method = req.method ? req.method.toLowerCase() : 'get';
    var route = m_route.find(req.url, method);

        var controller = require(m_util.format('./controllers/%s', route.controller));
        if (controller[route.action]) {
            try {
                controller[route.action].call(
                    new m_controllerBase(req, res),
                    m_getRequestArgs.hasOwnProperty(method) ? m_getRequestArgs[method](req) : {});
            }
            catch (e) {
                m_invalidHandler.handle500(req, res);
            }
        }
        else {
            m_invalidHandler.handle404(req, res);
        }
};

　　在这里引用了另外3个模块，route.js会根据请求的url和method去获取对应的controller和action信息，代码如下：

//缓存映射信息
var m_cache = {};

exports.addMap = function (map) {
    if (!(map && map.rule && map.controller))
        return;

    var method = (map.method || 'get').toLowerCase();
    m_cache[method] || (m_cache[method] = []);

    m_cache[method].push({
        rule: map.rule,
        controller: map.controller,
        action: map.action || 'index'
    });
};

exports.find = function (url, method) {
    var route = { controller: null, action: null };

    var routes;
    if (!(m_cache.hasOwnProperty(method) && (routes = m_cache[method]).length))
        return route;

    for (var i = 0, r; r = routes[i]; i++) {
        if (r.rule.test(url)) {
            route.controller = r.controller;
            route.action = r.action;
            break;
        }
    }
    return route;
};

　　而controllerBase相当于是所有Controller的基类，会提供诸如缓存，输出html、json、script等方法，代码如下：

function controllerBase(req, res) {
    this.req = req;
    this.res = res;
};
//添加缓存
controllerBase.prototype.addCache = function (key, value) {
    m_cache[key] = value;
};
//添加缓存
controllerBase.prototype.getCache = function (key) {
    return m_cache[key];
};
//返回html
controllerBase.prototype.html = function (viewName) {
        //coding
};
//根据模板生成的，可以使用其他模板来实现
controllerBase.prototype.template = function (viewName, obj) {
        //coding
};
//返回json
controllerBase.prototype.json = function (obj) {
        //coding
};

module.exports = controllerBase;

　　但是在处理这些操作的事情，可能会出现错误，因此就需要一个invalidHandler来处理一些原因导致请求无法返回的情况，代码大致如下：

//简单实现了404和500 对于其他http状态码大家可以根据情况实现

exports.handle404 = function (req, res) {
    res.writeHead(404, {});
    res.end();
};

exports.handle500 = function (req, res) {
    res.writeHead(500, {});
    res.end();
};

　　当我做到这里的时候，我突然发现并不是所有的请求都会触发Controller和Action，有的仅仅是请求一些如图片、js、css等方面的静态文件，所以我们在处理请求的时候，应该增加一个处理静态文件的，代码如下：

exports.handle = function (req, res) {
    var url = m_parseURL(req.url);
        //当请求的文件是网站图标时，不映射到静态文件夹下
    var filePath = url.pathname == m_config.FAVICON ? m_path.join(__dirname, url.pathname) :
        m_path.join(__dirname, m_config.STATIC_FILE_DIR, url.pathname);

    m_fs.exists(filePath, function (exists) {
        if (!exists) {
            m_invalidHandler.handle404(req, res);
            return;
        }

        m_fs.readFile(filePath, FILE_ENCODING, function (err, file) {
            if (err) {
                m_invalidHandler.handle500(req, res, err);
                return;
            }

            var ext;
            ext = (ext = m_path.extname(filePath)) ? ext.slice(1) : 'html';
            res.writeHead(200, { 'Content-Type': m_config.CONTENT_TYPE[ext] || m_config.CONTENT_TYPE.html });
            res.write(file, FILE_ENCODING);
            res.end();
        });
    });
};

　　写到这里已经将简易的MVC完成了，最后再增加几个功能来跑起来看看吧，代码如下：

//base.js
exports.index = function () {
    this.view('index.html');
};

exports.login = function (data) {
    this.addCache('user', data.name);
    this.json({ success: true });
};


//user.js
exports.load = function () {
    var msg = this.getCache('user') || '未登录';
    this.template('main.html', { msg: msg });
};

//index.html
<div>用户名：<input id="txtName" type="text" value="admin" /></div>
<input id="btn" type="button" value="登录" />

//main.html
欢迎你来到建议MVC,{#msg}!

　　以上增加了controllers和对应的action以及html页面，运行起来发现没效果，检查了代码原来是还没有配置对应route规则，于是我们再添加一些规则，代码如下：

m_route.addMap({
    rule: /^/$/,
    controller: 'base'
});
m_route.addMap({
    method: 'post',
    rule: /^/login/,
    controller: 'base',
    action: 'login'
});
m_route.addMap({
    rule: /^/user/load$/,
    controller: 'user',
    action: 'load'
});

　　整个mvc的效果如下：

　　

　　

　　使用用户名登录

　　

　　直接访问/user/load

　　

　　简易mvc就完成啦，如有什么错误和建议请给我留言