[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20},"topics",[36,37],"user",{"_21":22,"_13":14,"_23":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":16,"_34":35},"loginname","cmonday","page",1,"limit",20,"total",2,"id","1908","avatar_url","http://www.gravatar.com/avatar/3f93ce3516f075df48ea4d3c65c7b5d0?s=48","githubUsername","","create_at","2012-01-03 05:24:35.756","score",5,"topic_count",0,"reply_count","is_star",false,{"_21":58,"_39":59,"_41":-5,"_42":60,"_44":61,"_46":62,"_48":35,"_49":35,"_33":63,"_51":64,"_27":65,"_54":66},{"_21":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":35,"_49":35,"_33":50,"_51":52,"_27":53,"_54":55},"86","author_id","296","tab","content","Web.js 是一个为简化 HTTP 开发而设计的 Web Framework，它致力于以最简单的语法进行开发高性能的应用。\r\n
\r\n
Web.js between client and server 是指 web.js 这个文件可以同时在客户端和服务端使用吗？\r\n
\r\n
不是的。。这个先不管。。先来看看其他“无关”的。。\r\n
\r\n
以下是 Wikipedia 对 MVC 的解释：\r\n

MVC模式（Model-View-Controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。

\r\n
\r\n
\r\n

\r\n
\r\n

先来说说前端 MVC

\r\n
现在国内来说，相对优秀的前端 MVC 架构是来自豆瓣说的 [(Backbone.js + Underscore.js) + Mustache.js + jQuery]\r\n

M - Model

\r\n
Backbone.js 和 Underscore.js 是暂时来说国内公认的最好的一组 Model 框架\r\n

高性能

强自定义度

高灵活性

…………

\r\n

$\"Backbone.js\"$

\r\n

//Model of Backbone\r\n
var Person = Backbone.Model.extent({\r\n
    sayHello: function () {\r\n
        alert('Hey, I`m ' + this.get('name') + '.');\r\n
        return this;\r\n
    },\r\n
    setName: function (name) {\r\n
        this.set({'name': name});\r\n
        alert('My name is ' + this.get('name') + '.');\r\n
        return this;\r\n
    }\r\n
});\r\n
\r\n
var Will = new Person;\r\n
\r\n
Will.setName('Will Wen Gunn')    // --> My name is Will Wen Gunn.\r\n
    .sayHello();                // --> Hey, I`m Will Wen Gunn.

\r\n
其中 Backbone.Model 可以理解为经过封装的 Class 类型，然后 Person 是一个经过 extend 拓展的自定义 Class 类型，\r\n
\r\n
Will 则是继承了 Person 的一个 Model 对象。\r\n

//Model of Underscore\r\n
$.getJSON(location.origin + '/persons')\r\n
    .done(function (data) {\r\n
        sessionStorage.persons = data;\r\n
        var persons = JSON.parse(sessionStorage.persons);\r\n
        // --> [{name: 'Will Wen Gunn'}, {name: 'Foo'}, {name: 'Bar'}]\r\n
        $('body').append(\r\n
            JSON.stringify(\r\n
                _.map(persons, function (person) {\r\n
                    if (person.name == 'Will Wen Gunn' || person.name !== 'Bar') {\r\n
                        return true;\r\n
                    }\r\n
                })\r\n
            )\r\n
        );\r\n
    });\r\n
// --> [{\"name\": \"Will Wen Gunn\"}, {\"name\": \"Foo\"}]

\r\n
与其说 Underscore.js 是 Model 框架，还不如说是 Model 操作库，Underscore.js 并没有封装 Class ，而是使用 JavaScript 原有的 Array, Object, Function 类型进行操作 (其中人们比较常用 Object 和 Function 来模拟 Class)\r\n
\r\n
这种 Model 会比利用 Object 或者 Function 来定义 Class 要实际，因为这样可以很好地对对象和对象集 (Collection) 进行管理和操作。\r\n
\r\n

\r\n
\r\n

V - View

\r\n
View 更直接点地说就是我们平时所构建的 HTML ，而 MVC 其实源自于 DHTML ，W3C 的解释是动态页面（Dynamic HTML），而我更认为是 Data to HTML。\r\n
\r\n
而这个正是Mustache.js诞生的原因\r\n

\r\n

var person,\r\n
    tmpl-persons,\r\n
    proxy = new Eventproxy(),\r\n
    persons = function (data, tmpl) {\r\n
        $('body').append(\r\n
            Mustache.to_html(tmpl, data)\r\n
        );\r\n
    };\r\n
proxy.assign('data', 'tmpl', persons);\r\n
$.getJSON(location.origin + '/persons')\r\n
    .done(function (data) {\r\n
        persons = JSON.parse(data);\r\n
        /*\r\n
         * [ {Name: \"Will Wen Gunn\", Age: 15, Sex: \"Man\"},\r\n
         *   {Name: \"Foo\", Age: 15, Sex: \"Man\"},\r\n
         *   {Name: \"Bar\", Age: 15, Sex: \"Man\"} ]\r\n
         */\r\n
        proxy.trigger('data', data);\r\n
    });\r\n
$.get(location.origin + '/tmpls/persons.html')\r\n
    .done(function (data) {\r\n
        tmpl-persons = data;\r\n
        /*\r\n
         * {{#peoples}}\r\n
         *     {{Name}}\r\n
         *     {{Age}}\r\n
         *     {{Sex}}\r\n
         * {{/peoples}}\r\n
         */\r\n
        proxy.trigger('tmpl', tmpl);\r\n
    });\r\n
/*\r\n
 * Will Wen Gunn\r\n
 * 15\r\n
 * Man\r\n
 * Foo\r\n
 * 15\r\n
 * Man\r\n
 * Bar\r\n
 * 15\r\n
 * Woman\r\n
 */

\r\n
这里使用到了朴灵小田同学的 EventProxy.js，相当好玩的一个小工具，但是发挥出来的作用很强阿。\r\n
\r\n
它能让几个异步请求并行处理，最后集中处理。\r\n
\r\n
https://github.com/JacksonTian/eventproxy\r\n
\r\n
另外也还有一个来自国外的，类似的东西，叫Step，它也让异步函数分开，但是是串列的队列式，所以会产生阻塞，小问并不建议使用。\r\n
\r\n

\r\n
\r\n

C - Controller

\r\n
这个恐怕是争议最大的一块了，有人推崇jQuery，有人推崇YUI，有人推崇MooTools……\r\n
\r\n
其实这个并没有什么太大关系，只要是有这样的能力的，哪种 JavaScript Library 都没所谓的。\r\n
\r\n
我这里用jQuery把上面的这些M，V整合起来:\r\n

var Person = Backbone.Model.extent({\r\n
        sayHello: function () {\r\n
            alert('Hey, I`m ' + this.get('name') + '.');\r\n
            return this;\r\n
        },\r\n
        setName: function (name) {\r\n
            this.set({'name': name});\r\n
            alert('My name is ' + this.get('name') + '.');\r\n
            return this;\r\n
        }\r\n
    }),\r\n
    Persons  = Backbone.Collection.extend({\r\n
        model: Person,\r\n
        sayHello: function () {\r\n
            this.each(function (Person) {\r\n
                $('body').append('Hey, I`m ' + Person.get('name') + '.');\r\n
            });\r\n
        },\r\n
        sayName: function () {\r\n
            this.each(function (Person) {\r\n
                $('body').append('My name is ' + Person.get('name') + '.');\r\n
            });\r\n
        }\r\n
    });\r\n
var CNodejs = new Persons;\r\n
var persons,\r\n
    tmpl-persons;\r\n
$.get(location.origin + '/persons')\r\n
    .done(function (data) {\r\n
        persons = JSON.parse(data);\r\n
    })\r\n
    .get(location.origin + '/tmpls/persons.html')\r\n
    .done(function () {\r\n
        tmpl-persons = JSON.parse(data);\r\n
    });\r\n
CNodejs.add(persons.peoples);\r\n
$('body').append(\r\n
    Mustache.to_html(\r\n
        tmpl-persons,\r\n
        { peoples: CNodejs.toJSON() }\r\n
    )\r\n
);

\r\n
\r\n

Node.js MVC

\r\n

M - Model, V - View

\r\n
其实 Backbone.js, Underscore.js 和 Mustache.js 在 Node.js 上的用法是和前端一模一样的，所以我就不多介绍了。\r\n

C - Controller

\r\n
来看看 Web.js 的 Router ：\r\n

var urlRouter = {\r\n
        '^(\\d{4})\\/(\\d{2})\\/(\\d{2})\\/(.*)\\.jpg': '$1-$2-$3-$4.jpg',\r\n
        'google': 'http://www.google.com',\r\n
        'iwillwen': 'http://www.iwillwen.com'\r\n
    },\r\n
    getRouter = {\r\n
        '^getsomthing': function(req, res, qs) {\r\n
            res.sendJSON(qs);\r\n
        },\r\n
        '^car': function(req, res, qs) {\r\n
            switch (qs.action) {\r\n
                case 'foo':\r\n
                    res.send('Your action is foo');\r\n
                    break;\r\n
                case 'bar':\r\n
                    res.send('Your action is bar');\r\n
                    break;\r\n
            }\r\n
        }\r\n
    },\r\n
    postRouter = {\r\n
        '^postsomthing': function(req, res, data) {\r\n
            res.sendJSON(qs);\r\n
        },\r\n
        '^car': function(req, res, data) {\r\n
            switch (data.action) {\r\n
                case 'foo':\r\n
                    res.send('Your action is foo');\r\n
                    break;\r\n
                case 'bar':\r\n
                    res.send('Your action is bar');\r\n
                    break;\r\n
            }\r\n
        }\r\n
    };\r\n
\r\n
web.run(urlRouter, 80)\r\n
    .get(getRouter)\r\n
    .post(postRouter);\r\n
\r\n
console.log('The app is running on http://localhost');

\r\n
这个和Express有点区别。\r\n
\r\n
如果结合数据库的 Node.js MVC，Web.js该怎么写呢\r\n

var web =require('webjs'),\r\n
    mongo = require('mongoskin'),\r\n
    Backbone = require('backbone'),\r\n
    Underscore = require('underscore'),\r\n
    eventproxy = require('EventProxy.js'),\r\n
    db = mongo.db('localhost:27017/blog'),\r\n
    posts = db.collection('posts'),\r\n
    metas = db.collection('metas'),\r\n
\r\n
var urlRouter = {\r\n
        '^page/(\\d)': 'page.html',\r\n
        '^(.*)': 'post.html'\r\n
    },\r\n
    getRouter = {\r\n
        'init': function (req, res, qs) {\r\n
            var proxy = new eventproxy.EventProxy(),\r\n
            init = function (title, description, posts) {\r\n
                    var obj = {\r\n
                        title: title,\r\n
                        description: description,\r\n
                        posts: posts\r\n
                    };\r\n
                    res.sendJSON(obj);\r\n
                };\r\n
            proxy.assign('title', 'description', 'posts', init);\r\n
            metas.findOne({type: 'title'}, function (err, title) {\r\n
                proxy.trigger('title', title);\r\n
            });\r\n
            metas.findOne({type: 'description'}, function (err, description) {\r\n
                proxy.trigger('description', description);\r\n
            });\r\n
            posts.findTop10(function (err, posts) {\r\n
                proxy.trigger('posts', posts);\r\n
            });\r\n
        },\r\n
        'getPost': function (req, res, qs) {\r\n
            posts.findOne(qs, function (err, post) {\r\n
                res.sendJSON(post);\r\n
            });\r\n
        }\r\n
    },\r\n
    postRouter = {\r\n
        'setMeta': function (req, res, data) {\r\n
            metas.update(\r\n
                {type: data.type},\r\n
                data,\r\n
                {upsert: true},\r\n
                function (err) {\r\n
                    if (err) return res.send('Set failed.\r\n
' + err);\r\n
                    res.send('Set successed.');\r\n
                }\r\n
            );\r\n
        },\r\n
        'post': function (req, res, data) {\r\n
            posts.update(\r\n
                {title: data.title},\r\n
                data,\r\n
                {upsert: true},\r\n
                function (err) {\r\n
                    if (err) return res.send('Post failed.\r\n
' + err);\r\n
                    res.send('Post successed');\r\n
                }\r\n
            );\r\n
        }\r\n
    };\r\n
web.run(urlRouter, 80)\r\n
    .get(getRouter)\r\n
    .post(postRouter);

\r\n
\r\n

\r\n
\r\n
最后来讲讲\r\n

Web.js between client and server

\r\n
来看看 Web.js for client (仍在编写中) 的用法\r\n

(function ($) {\r\n
    //loaded /js/web-client.js\r\n
    var getRouter = {\r\n
        'getsomething' : function () {\r\n
            var proxy = new Eventproxy(),\r\n
                post = function (data, tmpl) {\r\n
                    $('body').append(\r\n
                        Mustache.to_html(tmpl, data)\r\n
                    );\r\n
                };\r\n
            proxy.assign('data', 'tmpl', init);\r\n
            web.getData('post', {}, function (data) {\r\n
                proxy.trigger('data', data);\r\n
            });\r\n
            web.getTmpl('post', function (tmpl) {\r\n
                proxy.trigger('tmpl', tmpl);\r\n
            });\r\n
        }\r\n
    };\r\n
    web.conn(location.origin)\r\n
        .get(getRouter);\r\n
})(jQuery);

\r\n
\r\n

\r\n
\r\n
这时候大家可能会问了，Web.js 的 MVC 究竟异样在哪里呢？\r\n
\r\n
前端 MVC 的 M 其实和后端 MVC 的 M 本来是不可能一起使用的，因为如果由后端进行模板渲染，前端就没有渲染的必要，那么前端 MVC就不成立了。同理，如果让前端进行模板渲染，后端也就不存在 MVC 的概念。\r\n
\r\n
如果要前后端的 MVC 同时存在要怎么做呢，其实很简单，就是让客户端进行性能·评估。\r\n
\r\n
比如说 IE6、7 这样的低性能浏览器，Web.js for client 会让服务器先进行 Data to HTML 渲染，然后传输再到客户端，如果是Chrome，FireFox，Safari 和 Opera 等高性能浏览器，则选择在客户端进行渲染，减轻传输荷载。\r\n
\r\n
另外 Web.js 默认会开启缓存应用加速机制 (DOM Storage，Cookies，Buffer，Object……)，让一部分数据先存入缓存，让短时间内再次发出的请求从缓存中获取。减少 LAN 资源和数据库资源的损耗。\r\n
\r\n
JavaScript 是一门建立在静态页面上的动态脚本语言，Ajax的普及和发展，使它完全可以完成一些静态页面做不到的事情，比如像PHP自身的文件响应机制 (相比这也是 PHP 吸引人的一个终于优点)。\r\n
\r\n
上面的这一段代码就演示了一个静态页面通过 Web.js 进行 URL action router 识别，并向服务器请求数据和模板，然后在 DOM 中插入渲染得到的 HTML。\r\n
\r\n
$\"\"$ \r\n
\r\n
两个 Web.js 之间是可以无缝对接的，开发者无须设置太多。\r\n
\r\n
当然 Web.js for client 也是支持 Express 等其他 Server-side 开发框架的。\r\n
\r\n

\r\n
\r\n
好，最后来放一个完整的 Web.js MVC Router 代码\r\n

//server.js\r\n
var web =require('webjs'),\r\n
    mongo = require('mongoskin'),\r\n
    Backbone = require('backbone'),\r\n
    Underscore = require('underscore'),\r\n
    eventproxy = require('EventProxy.js'),\r\n
    db = mongo.db('localhost:27017/blog'),\r\n
    posts = db.collection('posts'),\r\n
    metas = db.collection('metas'),\r\n
\r\n
var urlRouter = {\r\n
        '^(.*)': 'page.html'\r\n
    },\r\n
    getRouter = {\r\n
        'init': function (req, res, qs) {\r\n
            var proxy = new eventproxy.EventProxy(),\r\n
                init = function (title, description, posts) {\r\n
                    var obj = {\r\n
                        title: title,\r\n
                        description: description,\r\n
                        posts: posts\r\n
                    };\r\n
                    if (qs.render) {\r\n
                        res.send(\r\n
                            web.render('init', obj)\r\n
                        );\r\n
                    } else {\r\n
                        res.sendJSON(obj);\r\n
                    }\r\n
                };\r\n
            proxy.assign('title', 'description', 'posts', init);\r\n
            metas.findOne({type: 'title'}, function (err, title) {\r\n
                proxy.trigger('title', title);\r\n
            });\r\n
            metas.findOne({type: 'description'}, function (err, description) {\r\n
                proxy.trigger('description', description);\r\n
            });\r\n
            posts.findTop10(function (err, posts) {\r\n
                proxy.trigger('posts', posts);\r\n
            });\r\n
        },\r\n
        'getpost': function (req, res, qs) {\r\n
            posts.findOne(qs ,function (err, post) {\r\n
                if (qs.render) {\r\n
                    res.send(\r\n
                        web.render('post', post)\r\n
                    );\r\n
                } else {\r\n
                    res.sendJSON(post);\r\n
                }\r\n
            });\r\n
        }\r\n
    };\r\n
web.run(urlRouter, 80)\r\n
    .get(getRouter)\r\n
    .set('tmplDir', 'tmpls');\r\n
\r\n
//page.html - client.js\r\n
(function ($) {\r\n
    var getRouter = {\r\n
        '/' : function () {    //init\r\n
            var proxy = new Eventproxy(),\r\n
                init = function (data, tmpl) {\r\n
                    $('body').append(\r\n
                        Mustache.to_html(tmpl, data)\r\n
                    );\r\n
                };\r\n
            proxy.assign('data', 'tmpl', init);\r\n
            web.getData('init', {}, function (data) {\r\n
                proxy.trigger('data', data);\r\n
            });\r\n
            web.getTmpl('init', function (tmpl) {\r\n
                proxy.trigger('tmpl', tmpl);\r\n
            });\r\n
        }\r\n
        '^(.*)' : function (action) {    // action --> (.*)\r\n
            var proxy = new Eventproxy(),\r\n
                post = function (data, tmpl) {\r\n
                    $('body').append(\r\n
                        Mustache.to_html(tmpl, data)\r\n
                    );\r\n
                };\r\n
            proxy.assign('data', 'tmpl', init);\r\n
            web.getData('post', {title: action}, function (data) {\r\n
                proxy.trigger('data', data);\r\n
            });\r\n
            web.getTmpl('post', function (tmpl) {\r\n
                proxy.trigger('tmpl', tmpl);\r\n
            });\r\n
        }\r\n
    };\r\n
    web.conn(location.origin)\r\n
        .get(getRouter)\r\n
})(jQuery);

","title","Web.js MVC between client and server","last_reply_at","2011-08-17 13:45:17","good","top",9,"visit_count",9875,"2011-08-07 05:48:38","author",{"_13":56,"_23":57},"willwen","http://www.gravatar.com/avatar/76f0bd67322bb88a3017b5cb4e1cd8b3?s=48","274","2607","Node开发的在线LESS编译工具\r\n[http://less.cnodejs.net/][1] \r\n\r\n\r\n![enter image description here][2]\r\n\r\n\r\n [1]: http://less.cnodejs.net/\r\n [2]: http://static.data.taobaocdn.com/up/nodeclub/2012/4f3d03239605c56a4b020e421329399097379.png","Node开发的在线LESS编译工具","2012-02-18 05:01:08.163",4,6560,"2012-02-16 13:31:13.808",{"_13":67,"_23":68},"feichang","http://www.gravatar.com/avatar/d1c524ddbf5e76014e0d219545ff04cc?size=48"]

先来说说前端 MVC

M - Model

V - View

{{Mustache}}

C - Controller

Node.js MVC

M - Model, V - View

C - Controller

Web.js between client and server