[{"_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",[37,38],"user",{"_21":22,"_13":14,"_23":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36},"loginname","xiaoz","page",1,"limit",20,"total",2,"id","2414","avatar_url","http://www.gravatar.com/avatar/865dac7c8d4a20347a29d75393e97a60?size=48","githubUsername","","create_at","2012-02-07 08:56:25.058","score",60,"topic_count",5,"reply_count",7,"is_star",false,{"_21":59,"_40":60,"_42":-5,"_43":61,"_45":62,"_47":63,"_49":36,"_50":36,"_33":51,"_52":64,"_27":65,"_55":66},{"_21":39,"_40":41,"_42":-5,"_43":44,"_45":46,"_47":48,"_49":36,"_50":36,"_33":51,"_52":53,"_27":54,"_55":56},"97","author_id","74","tab","content","

前言

\r\n
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。\r\n
\r\n
SeaJS的作者是淘宝前端工程师玉伯。\r\n
\r\n
SeaJS本身遵循KISS（Keep It Simple, Stupid）理念进行开发，其本身仅有个位数的API，因此学习起来毫无压力。在学习SeaJS的过程中，处处能感受到KISS原则的精髓——仅做一件事，做好一件事。\r\n
\r\n
本文首先通过一个例子直观对比传统JavaScript编程和使用SeaJS的模块化JavaScript编程，然后详细讨论SeaJS的使用方法，最后给出一些与SeaJS相关的资料。\r\n
\r\n
前言\r\n
\r\n
传统模式 vs SeaJS模块化\r\n
\r\n
传统开发\r\n
\r\n
SeaJS模块化开发\r\n
\r\n
使用SeaJS\r\n
\r\n
下载及安装\r\n
\r\n
SeaJS基本开发原则\r\n
\r\n
模块的定义及编写\r\n
\r\n
模块的载入及引用\r\n
\r\n
SeaJS的全局配置\r\n
\r\n
SeaJS如何与现有JS库配合使用\r\n
\r\n
SeaJS项目打包部署\r\n
\r\n
一个完整的例子\r\n
\r\n
主要参考文献&SeaJS学习资源\r\n

传统模式 vs SeaJS模块化

\r\n
假设我们现在正在开发一个Web应用TinyApp，我们决定在TinyApp中使用jQuery框架。TinyApp的首页会用到module1.js，module1.js依赖module2.js和module3.js，同时module3.js依赖module4.js。\r\n

传统开发

\r\n
使用传统的开发方法，各个js文件代码如下：\r\n

\r\n

//module1.js\r\n
var module1 = {\r\n
    run: function() {\r\n
        return $.merge(['module1'], $.merge(module2.run(), module3.run()));\r\n
    }\r\n
}\r\n
\r\n
//module2.js\r\n
var module1 = {\r\n
    run: function() {\r\n
        return ['module2'];\r\n
    }\r\n
}\r\n
\r\n
//module3.js\r\n
var module3 = {\r\n
    run: function() {\r\n
        return $.merge(['module3'], module4.run());\r\n
    }\r\n
}\r\n
\r\n
//module4.js\r\n
var module4 = {\r\n
    run: function() {\r\n
        return ['module4'];\r\n
    }\r\n
}

\r\n

\r\n
此时index.html需要引用module1.js及其所有下层依赖（注意顺序）：\r\n

\r\n

\r\n
\r\n
\r\n
\r\n
TinyApp\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n

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

\r\n

\r\n
随着项目的进行，js文件会越来越多，依赖关系也会越来越复杂，使得js代码和html里的script列表往往变得难以维护。\r\n

SeaJS模块化开发

\r\n
下面看看如何使用SeaJS实现相同的功能。\r\n
\r\n
首先是index.html：\r\n

\r\n

\r\n
\r\n
\r\n
\r\n
TinyApp\r\n
\r\n
\r\n

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

\r\n

\r\n
可以看到html页面不再需要引入所有依赖的js文件，而只是引入一个sea.js，sea.js会处理所有依赖，加载相应的js文件，加载策略可以选择在渲染页面时一次性加载所有js文件，也可以按需加载（用到时才加载响应js），具体加载策略使用方法下文讨论。\r\n
\r\n
index.html加载了init模块，并使用此模块的initPage方法初始化页面数据，这里先不讨论代码细节。\r\n
\r\n
下面看一下模块化后JavaScript的写法：\r\n

\r\n

//jquery.js\r\n
define(function(require, exports, module) = {\r\n
\r\n
    //原jquery.js代码...\r\n
\r\n
    module.exports = $.noConflict(true);\r\n
});\r\n
\r\n
//init.js\r\n
define(function(require, exports, module) = {\r\n
    var $ = require('jquery');\r\n
    var m1 = require('module1');\r\n
\r\n
    exports.initPage = function() {\r\n
        $('.content').html(m1.run());\r\n
    }\r\n
});\r\n
\r\n
//module1.js\r\n
define(function(require, exports, module) = {\r\n
    var $ = require('jquery');\r\n
    var m2 = require('module2');\r\n
    var m3 = require('module3');\r\n
\r\n
    exports.run = function() {\r\n
        return $.merge(['module1'], $.merge(m2.run(), m3.run()));\r\n
    }\r\n
});\r\n
\r\n
//module2.js\r\n
define(function(require, exports, module) = {\r\n
    exports.run = function() {\r\n
        return ['module2'];\r\n
    }\r\n
});\r\n
\r\n
//module3.js\r\n
define(function(require, exports, module) = {\r\n
    var $ = require('jquery');\r\n
    var m4 = require('module4');\r\n
\r\n
    exports.run = function() {\r\n
        return $.merge(['module3'], m4.run());\r\n
    }\r\n
});\r\n
\r\n
//module4.js\r\n
define(function(require, exports, module) = {\r\n
    exports.run = function() {\r\n
        return ['module4'];\r\n
    }\r\n
});

\r\n

\r\n
乍看之下代码似乎变多变复杂了，这是因为这个例子太简单，如果是大型项目，SeaJS代码的优势就会显现出来。不过从这里我们还是能窥探到一些SeaJS的特性：\r\n
\r\n
一是html页面不用再维护冗长的script标签列表，只要引入一个sea.js即可。\r\n
\r\n
二是js代码以模块进行组织，各个模块通过require引入自己依赖的模块，代码清晰明了。\r\n
\r\n
通过这个例子朋友们应该对SeaJS有了一个直观的印象，下面本文具体讨论SeaJS的使用。\r\n

使用SeaJS

\r\n

下载及安装

\r\n
要在项目中使用SeaJS，你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置。\r\n
\r\n
SeaJS项目目前托管在GitHub上，主页为https://github.com/seajs/seajs/。可以到其git库的build目录下（https://github.com/seajs/seajs/tree/master/build）下载sea.js（已压缩）或sea-debug.js（未压缩）。\r\n
\r\n
下载完成后放到项目的相应位置，然后在页面中通过\r\n
\r\n
\r\n
\r\n
这种写法会令html更加简洁。\r\n

require

\r\n
require是SeaJS主要的模块加载方法，当在一个模块中需要用到其它模块时一般用require加载：\r\n

\r\n

var m = require('/path/to/module/file');

\r\n

\r\n
这里简要介绍一下SeaJS的自动加载机制。上文说过，使用SeaJS后html只要包含sea.js即可，那么其它js文件是如何加载进来的呢？SeaJS会首先下载入口模块，然后顺着入口模块使用正则表达式匹配代码中所有的require，再根据require中的文件路径标识下载相应的js文件，对下载来的js文件再迭代进行类似操作。整个过程类似图的遍历操作（因为可能存在交叉循环依赖所以整个依赖数据结构是一个图而不是树）。\r\n
\r\n
明白了上面这一点，下面的规则就很好理解了：\r\n
\r\n
传给require的路径标识必须是字符串字面量，不能是表达式，如下面使用require的方法是错误的：\r\n

\r\n

require('module' + '1');\r\n
\r\n
require('Module'.toLowerCase());

\r\n

\r\n
这都会造成SeaJS无法进行正确的正则匹配以下载相应的js文件。\r\n

require.async

\r\n
上文说过SeaJS会在html页面打开时通过静态分析一次性记载所有需要的js文件，如果想要某个js文件在用到时才下载，可以使用require.async：\r\n

\r\n

require.async('/path/to/module/file', function(m) {\r\n
    //code of callback...\r\n
});

\r\n

\r\n
这样只有在用到这个模块时，对应的js文件才会被下载，也就实现了JavaScript代码的按需加载。\r\n

SeaJS的全局配置

\r\n
SeaJS提供了一个seajs.config方法可以设置全局配置，接收一个表示全局配置的配置对象。具体使用方法如下：\r\n

\r\n

seajs.config({\r\n
    base: 'path/to/jslib/',\r\n
    alias: {\r\n
      'app': 'path/to/app/'\r\n
    },\r\n
    charset: 'utf-8',\r\n
    timeout: 20000,\r\n
    debug: false\r\n
});

\r\n

\r\n
其中base表示基址寻址时的基址路径。例如base设置为”http://example.com/js/3-party/”，则\r\n

\r\n

var $ = require('jquery');

\r\n

\r\n
会载入”http://example.com/js/3-party/jquery.js”。\r\n
\r\n
alias可以对较长的常用路径设置缩写。\r\n
\r\n
charset表示下载js时script标签的charset属性。\r\n
\r\n
timeout表示下载文件的最大时长，以毫秒为单位。\r\n
\r\n
debug表示是否工作在调试模式下。\r\n

SeaJS如何与现有JS库配合使用

\r\n
要将现有JS库如jQuery与SeaJS一起使用，只需根据SeaJS的的模块定义规则对现有库进行一个封装。例如，下面是对jQuery的封装方法：\r\n

\r\n

define(function() {\r\n
\r\n
//{{{jQuery原有代码开始\r\n
/*!\r\n
 * jQuery JavaScript Library v1.6.1\r\n
 * http://jquery.com/\r\n
 *\r\n
 * Copyright 2011, John Resig\r\n
 * Dual licensed under the MIT or GPL Version 2 licenses.\r\n
 * http://jquery.org/license\r\n
 *\r\n
 * Includes Sizzle.js\r\n
 * http://sizzlejs.com/\r\n
 * Copyright 2011, The Dojo Foundation\r\n
 * Released under the MIT, BSD, and GPL Licenses.\r\n
 *\r\n
 * Date: Thu May 12 15:04:36 2011 -0400\r\n
 */\r\n
//...\r\n
//}}}jQuery原有代码结束\r\n
\r\n
return $.noConflict();\r\n
});

\r\n

SeaJS项目的打包部署

\r\n
SeaJS本来集成了一个打包部署工具spm，后来作者为了更KISS一点，将spm拆出了SeaJS而成为了一个单独的项目。spm的核心思想是将所有模块的代码都合并压缩后并入入口模块，由于SeaJS本身的特性，html不需要做任何改动就可以很方便的在开发环境和生产环境间切换。但是由于spm目前并没有发布正式版本，所以本文不打算详细介绍，有兴趣的朋友可以参看其github项目主页https://github.com/seajs/spm/。\r\n
\r\n
其实，由于每个项目所用的JS合并和压缩工具不尽相同，所以spm可能并不是完全适合每个项目。在了解了SeaJS原理后，完全可以自己写一个符合自己项目特征的合并打包脚本。\r\n

一个完整的例子

\r\n
上文说了那么多，知识点比较分散，所以最后我打算用一个完整的SeaJS例子把这些知识点串起来，方便朋友们归纳回顾。这个例子包含如下文件：\r\n
\r\n
index.html——主页面。\r\n
\r\n
sea.js——SeaJS脚本。\r\n
\r\n
init.js——init模块，入口模块，依赖data、jquery、style三个模块。由主页面载入。\r\n
\r\n
data.js——data模块，纯json数据模块，由init载入。\r\n
\r\n
jquery.js——jquery模块，对 jQuery库的模块化封装，由init载入。\r\n
\r\n
style.css——CSS样式表，作为style模块由init载入。\r\n
\r\n
sea.js和jquery.js的代码属于库代码，就不赘述，这里只给出自己编写的文件的代码。\r\n
\r\n
html：\r\n

\r\n

\r\n
\r\n
\r\n
    \r\n
    \r\n
\r\n
\r\n
\r\n
    
\r\n
    Blog
\r\n
<\r\n
\r\n
\r\n
\r\n

\r\n

\r\n
javascript：\r\n

\r\n

//init.js\r\n
define(function(require, exports, module) {\r\n
    var $ = require('./jquery');\r\n
    var data = require('./data');\r\n
    var css = require('./style.css');\r\n
\r\n
    $('.author').html(data.author);\r\n
    $('.blog').attr('href', data.blog);\r\n
});\r\n
\r\n
//data.js\r\n
define({\r\n
    author: 'ZhangYang',\r\n
    blog: 'http://leoo2sk.cnblogs.com'\r\n
});

\r\n

\r\n
css：\r\n

\r\n

.author{color:red;font-size:10pt;}\r\n
.blog{font-size:10pt;}

\r\n

\r\n
运行效果如下：\r\n
\r\n
$\"image\"$ \r\n

主要参考文献&SeaJS学习资源

\r\n
[1] SeaJS主页 – http://seajs.com\r\n
\r\n
[2] SeaJS的GitHub库（可获取源码） – https://github.com/seajs/seajs\r\n
\r\n
[3] SeaJS作者玉伯的博客 - http://lifesinger.wordpress.com/","title","使用SeaJS实现模块化JavaScript开发","last_reply_at","2014-07-31 10:46:37.441","good","top",9,"visit_count",22217,"2011-06-29 07:30:21","author",{"_13":57,"_23":58},"zhangyang","http://www.gravatar.com/avatar/63fc09f93a4996df87b2543ea27879a0?s=48","34","19","有同学肯定觉得只看了静态文件服务器是不过瘾的。必须来点动态服务器才行，甚至MVC框架之类的才能摆上台面。但是冰冻三尺，非一日之寒；千寻之塔，也是起于砂石啊。所以这一章的目的是用来构建一个动态服务器的基础，下一章会在这个基础上，构建一个MVC框架。\r\n
\r\n
一门后端动态语言要达到Web的可用水平需要满足那些条件呢。让我们来想想，通常的PHP或是ASP/ASP.NET，甚至是JSP。一些基本的东东是什么呢。\r\n

Get/Post 数据获取，这个是最基本的

Cookie你都不支持，你让Session如何混。

Session，对于无状态的HTTP协议，Session的实现帮助后端太多了。

\r\n
以上这些支持几乎是必须的。缺少一部分，这个服务器都会缺胳膊少腿的。那么有了这些需求之后，我们就来实现吧。\r\n
\r\n
Anyway，架子搭起来先。我们的动态服务器并不是在静态服务器的基础上再增强的，所以需要一个全新的架子。\r\n

var http = require(\"http\");\r\n
\r\n
var server = http.createServer(function (request, response){\r\n
    response.setHeader(\"Content-Type\", \"text/plain\");\r\n
    response.writeHead(200, \"Ok\");\r\n
    // TODO\r\n
    // response.write(\"\");\r\n
    response.end();\r\n
});\r\n
\r\n
server.listen(8000);

\r\n
嗯，还是很简单很朴素的感觉。\r\n

Get/Post支持

\r\n
HTTP请求协议主要包含以下几种请求类型：\r\n

POST

HEAD

DELETE

OPTIONS

TRACE

\r\n
其中最常见的就是GET和POST了。其次，PUT和DELETE在RESTful请求中也是十分常见的。在这里，我们只讨论GET和POST方法。客户端向服务端传递数据也是主要通过这两种方法。那么我们来进一步剖析GET和POST方法吧。\r\n
\r\n
GET方法最为常见，其形式大致如下：\r\n

http://localhost:8000/?foo=bar

\r\n
用CURL工具来查看下协议的细节吧:\r\n

curl  -v http://localhost:8000/?foo=bar

\r\n
看看请求头是什么样子：\r\n

GET /?foo=bar HTTP/1.1\r\n
\r\n
User-Agent: curl/7.20.1 (i686-pc-cygwin) libcurl/7.20.1 OpenSSL/0.9.8r zlib/1.\r\n
Host: localhost:8000\r\n
Accept: */*

\r\n
Get支持只需要分析问号后面的foo=bar部分就ok的。在写出我们Node的代码之前，可以少许的看看PHP和ASP.NET是如何调用的。\r\n
\r\n
PHP：\r\n

$_GET[\"name\"]

\r\n
ASP.NET：\r\n

Request.QueryString(\"name\")

\r\n
嗯，接口不错，那我们为Node也写一个接口吧，保持简单，request.get(name)就可以了。Node在处理这个问题上，提供了URL模块和QueryString模块，用于解析URL和QueryString部分（参见：http://nodejs.org/docs/v0.6.1/api/http.html#request.url）。\r\n
\r\n
引入url和querystring模块吧。\r\n

var url = require(\"url\");\r\n
var qs = require(\"querystring\");

\r\n
对于URL的解析，由于每一个请求进来，并不是每个程序员都需要获取query上的值的。这种场景下，我们没必要为其浪费解析URL的CPU时间，所以延迟解析吧。\r\n

var _urlMap;\r\n
\r\n
request.get = function (key) {\r\n
    if (!_urlMap) {\r\n
        urlMap = url.parse(request.url, true);\r\n
    }\r\n
    return urlMap.query[key];\r\n
};

\r\n
只有后续有代码调用到了get方法，才会解析一次。如果没有用到，这里就不占用空间和CPU时间了。\r\n
\r\n
接下来搞定Post方法，接口依然保持一致，那就是request.post(name)。POST请求与GET请求略有不同在于GET请求是不用向服务端发送body部分的报文的。这里有点类似条件请求的响应，如果是304，只有头信息，没有body信息；如果是200，才会将body和头信息一起发回给客户端。这里反之，get请求不用发送body信息，只有post才会发送body信息。所以这里对于前端来说，如果不发送数据到服务端，用get方法可以节省一些带宽的。对于小数据量的发送，通过URL请求发送时携带就足够了。（URL的最大长度在IE下是2k，超过此额度，请用post吧）。\r\n
\r\n
具体参见YSlow的这条Rule：http://developer.yahoo.com/performance/rules.html#ajax_get。\r\n
\r\n
一般而言，POST请求都是通过表单发送出来的。浏览器会自动的将数据编码为foo=bar&baz=xxx这样的格式。而且与get方法不同的是，在接受数据的时候，需要通过监听data事件接受所有数据，因为客户端可能是通过chunk方式逐步发送过来的。\r\n

if (request.method === \"POST\") {\r\n
    var _postData = \"\",\r\n
        _postMap = \"\";\r\n
\r\n
    request.on('data', function (chunk) {\r\n
        _postData += chunk;\r\n
    })\r\n
    .on(\"end\", function () {\r\n
        request.postData = _postData;\r\n
        request.post = function (key) {\r\n
            if (!_postMap) {\r\n
                _postMap = qs.parse(_postData);\r\n
            }\r\n
            return _postMap[key];\r\n
        };\r\n
    });\r\n
}

\r\n
之所以有request.postData = _postData这样一句，因为客户端上传的并不一定是key=value&key=value的方式，或者是一个json对象，或者是一个xml文档。这个时候这个数据留给程序员自己去再解析。\r\n
\r\n
相同的，一切为了性能，所以延迟解析，并且只在请求方法为POST的时候才有这些方法。\r\n
\r\n
最终的代码大致如下：\r\n

var server = http.createServer(function (request, response) {\r\n
    var handle = function () {\r\n
        response.setHeader(\"Content-Type\", \"text/plain\");\r\n
        response.writeHead(200, \"Ok\");\r\n
        response.write(request.get(\"foo\"));\r\n
        response.write(request.post(\"foo\"));\r\n
        response.end();\r\n
    };\r\n
\r\n
    var _urlMap;\r\n
    request.get = function (key) {\r\n
        if (!_urlMap) {\r\n
            urlMap = url.parse(request.url, true);\r\n
        }\r\n
        return urlMap.query[key];\r\n
    };\r\n
\r\n
    if (request.method === \"POST\") {\r\n
        var _postData = \"\",\r\n
            _postMap = \"\";\r\n
\r\n
        request.on('data', function (chunk) {\r\n
            _postData += chunk;\r\n
        })\r\n
        .on(\"end\", function () {\r\n
            request.postData = _postData;\r\n
            request.post = function (key) {\r\n
                if (!_postMap) {\r\n
                    _postMap = qs.parse(_postData);\r\n
                }\r\n
                return _postMap[key];\r\n
            };\r\n
            handle();\r\n
        });\r\n
    } else {\r\n
        handle();\r\n
    }\r\n
});

\r\n
我们通过curl来模拟一次同时带有post数据和get数据的请求吧：\r\n

curl --data \"foo=postdata\" http://localhost:8000/?foo=getdata

\r\n
看看响应：\r\n

getdata\r\n
postdata

\r\n
嗯，完全满足需求。（注意：处理文件上传的请求会更复杂，再次不做讨论，如需深入，请移步http://cnodejs.org/blog/?p=2207）\r\n

Cookie支持

\r\n
尽管身为前端工程师，对Cookie有着相当多的怨言。比如不方便调用；每次都会附带在请求中，占用带宽。一个经典的面试题目是，假如客户端禁用了Cookie，Session是否有效？如何有效？\r\n
\r\n
不知各位是否有答案。关于Cookie与Session之间的关系，我们下一节再来详述。先来解释下Cookie是如何工作的吧，在协议里是怎么传递的。\r\n

请求传递Cookie\r\n
如果当前域名下存在Cookie，浏览器在每次发起HTTP请求的时候，都会在请求头中带上这样一项：\r\n
Cookie: UserCookie=AgiTOOpJet; RegisteredUserCookie=PXLgvDECVD; JSESSIONID=BF0844821;\r\n
注意，是每次。

响应传递Cookie

\r\n
如果服务端设置了Cookie，则会在相应头里发出这样一项：\r\n
\r\n
Set-Cookie:JSESSIONID=D211F624077921CEACD202C1ACDD30C6; Path=/\r\n
注意，这里只是单次的，有需求才发送。浏览器端在接受到这个header之后，会将这项存在客户端，下次发送请求时会带在请求头中。\r\n
\r\n
那么我们要在Node中取得客户端发送过来的cookie就很简单了，从header中读取cookie就ok。\r\n
\r\n
var cookieStr = request.headers.cookie || \"\";\r\n
\r\n
再次看看别的语言中是如何做cookie获取和调用的:\r\n

PHP:\r\n
```
$_COOKIE[\"user\"];
```
\r\n

ASP:\r\n
```
Request.Cookies(\"firstname\")
```
\r\n

\r\n
中和一下，那么我们要的API就是：request.cookie(key)。\r\n

var _cookieMap;\r\n
\r\n
request.cookie = function (key) {\r\n
    if (!_cookieMap) {\r\n
        _cookieMap = cookie.parse(request.headers.cookie || \"\");\r\n
    }\r\n
    return _cookieMap[key];\r\n
};

\r\n
嗯，还是延迟解析的老把戏。等等，cookie.parse从哪里来的？\r\n

var cookie = require(\"./cookie\");

\r\n
嗯，没有枪，没有炮，我们自己造。在写这个具体的parse函数之前，有必要研究一下cookie的格式。老规矩，还是按标准协议（http://www.w3.org/Protocols/rfc2109/rfc2109）来：\r\n

av-pairs        =       av-pair *(\";\" av-pair)\r\n
av-pair         =       attr [\"=\" value]        ; optional value\r\n
attr            =       token\r\n
value           =       word\r\n
word            =       token | quoted-string

\r\n
如果你看不懂以上这段描述的话，我来简单介绍吧。\r\n

通过;分割多个属性/值对。

属性值对由属性，等号，和值构成。等号和值是可选的，也就是说可能只有属性，没有值。

\r\n
嗯，仅此而已。那么实现吧。\r\n

exports.parse = function (cookie) {\r\n
    var map = {};\r\n
    var pairs = cookie.split(\";\");\r\n
    pairs.forEach(function (pair) {\r\n
        var kv = pair.split(\"=\");\r\n
        map[kv[0]] = kv[1] || \"\";\r\n
    });\r\n
\r\n
    return map;\r\n
};

\r\n
由于Node使用的是V8，所以可以放心大胆的用这些来自ES5的方法。\r\n
\r\n
在之前的代码中加入响应Cookie：\r\n

response.write(request.cookie(\"foo\") + \"\\n\\r\");

\r\n
然后通过curl伪装cookie测试一下吧：\r\n

curl -i --cookie \"foo=cookiedata\" --data \"foo=postdata\" http://localhost:8000/?foo=getdata

\r\n
响应：\r\n

HTTP/1.1 200 Ok\r\n
Content-Type: text/plain\r\n
Connection: keep-alive\r\n
Transfer-Encoding: chunked\r\n
\r\n
getdata\r\n
postdata\r\n
cookiedata

\r\n
嗯，just so so。\r\n
\r\n
再来看看响应cookie吧。同样先对比下API吧：\r\n

ASP.NET\r\n

Response.Cookies(\"firstname\")=\"Alex\"

\r\n

PHP\r\n

setcookie(name, value, expire, path, domain);

\r\n

\r\n
对比了一下，取个中间的而且符合JavaScript的接口吧：response.setCookie(name, value, expire, path, domain)。\r\n
\r\n
然后再看看响应的cookie头在协议标准里是怎样定义的呢。\r\n

set-cookie      =       \"Set-Cookie:\" cookies\r\n
   cookies         =       1#cookie\r\n
   cookie          =       NAME \"=\" VALUE *(\";\" cookie-av)\r\n
   NAME            =       attr\r\n
   VALUE           =       value\r\n
   cookie-av       =       \"Comment\" \"=\" value\r\n
                   |       \"Domain\" \"=\" value\r\n
                   |       \"Max-Age\" \"=\" value\r\n
                   |       \"Path\" \"=\" value\r\n
                   |       \"Secure\"\r\n
                   |       \"Version\" \"=\" 1*DIGIT

\r\n
继续用我们能够看懂的语言解释吧：\r\n

响应头是Set-Cookie做key的，值由多个cookie组成。

每个cookie的必须包含的部分是name和value。

每个cookie还有一部分选项对，选项对之间通过;来分割。这些选项包含：\r\n
1. Comment，注释【可选】
2. Domain，域【可选】
3. Max-Age，标明这个cookie在客户端的最大存活时间，单位时间是秒。如果是0，则直接被禁掉【可选】
4. Path，标明在域下的那些路径下有效【可选，默认为当前路径】
5. Secure，这个比较特殊的选项标明的是否是https。【可选】
6. Version，版本号。【必选】
\r\n

\r\n
看到这么多可选项，看起来假定的接口要去适配这么多可选参数，是有点麻烦了（JavaScript没有那么方便的重载函数呀）。那么JSON搞起吧。\r\n

response.setCookie(cookie);

\r\n
这个cookie对象必选值是name和value。那么我们为这个cookie生成需要的字符串写一个stringify函数吧。\r\n
\r\n
最后要申明一下的是现行的Cookie格式，貌似几乎不包含Comment，Version之类的了。我参考了一些实现后，最后给出的实现是如下这样的。\r\n

exports.stringify = function (cookie) {\r\n
    var buffer = [cookie.key, \"=\", cookie.value];\r\n
    if (cookie.expires) {\r\n
        buffer.push(\" expires=\", (new Date(cookie.expires)).toUTCString(), \";\");\r\n
    }\r\n
\r\n
    if (cookie.path) {\r\n
        buffer.push(\" path=\", cookie.path, \";\");\r\n
    }\r\n
\r\n
    if (cookie.domain) {\r\n
        buffer.push(\" domain=\", cookie.domain, \";\");\r\n
    }\r\n
\r\n
    if (cookie.secure) {\r\n
        buffer.push(\" secure\", \";\");\r\n
    }\r\n
\r\n
    if (cookie.httpOnly) {\r\n
        buffer.push(\" httponly\");\r\n
    }\r\n
\r\n
    return buffer.join(\"\");\r\n
};

\r\n
包装了工具方法之后，对于response.setCookie方法就比较简单了：\r\n

response.setCookie = function (cookieObj) {\r\n
    response.setHeader(\"Set-Cookie\", cookie.stringify(cookieObj));\r\n
};

\r\n
由于一次请求可能会设置多个cookie，那个这个代码需要增强一下：\r\n

var _setCookieMap = {};\r\n
\r\n
response.setCookie = function (cookieObj) {\r\n
    _setCookieMap[cookieObj.key] = cookie.stringify(cookieObj);\r\n
    var returnVal = [];\r\n
    for(var key in _setCookieMap) {\r\n
         returnVal.push(_setCookieMap[key]);\r\n
    }\r\n
    response.setHeader(\"Set-Cookie\", returnVal.join(\", \"));\r\n
};

\r\n
Have a try：\r\n

response.setCookie({key: \"username\", value: \"Jackson\"});\r\n
response.setCookie({key: \"password\", value: \"xxxxxx\"});

\r\n
用浏览器的网络工具或者curl看看响应头：\r\n

Set-Cookie: username=Jackson, password=xxxxxx

\r\n
再刷新浏览器检查是否将这两个cookie存储了（存储之后，下次请求会在request头中包含）。\r\n
\r\n
至此，Cookie的底层实现和包装都完成了。\r\n
\r\n
注意：由于Cookie的协议较多，有RFC2109，RFC2965，Netscape标准等，这里主要参考RFC2109标准，然后再根据现有浏览器和服务器的做法再中和实现的，在Chrome下测试通过。\r\n

Session支持

\r\n
上一节提到的如果Cookie被禁用了，那么Session是否可用这个问题。不知各位是否有答案。之所以有这样的一个面试题，其主要的原因是因为大多数的Session的实现，都是依赖Cookie的。而Cookie的作用，很大部分的功劳可以解决HTTP协议是种无状态协议，无法追踪和保持与用户的会话功能。这也是我们要先实现Cookie的一个原因。\r\n
\r\n
下面我们来看一眼截取自某网站的一段响应头：\r\n

Set-Cookie: sid=qwSsRlaZcQqFWC11ojBKW7Jc.vCqINHUqTnWEsH7VB4throHfZnNONt%2FKXwFx5xObRkA; path=/; expires=Tue, 15 Nov 2011 14:21:36 GMT; httpOnly

\r\n
实际上这段响应头被人拿到手里，甚至是可以构成帐号攻击的，具体细节不解释。\r\n
\r\n
还是继续老规矩吧，看看别的语言中Session的调用接口吧：\r\n

PHP\r\n

$_SESSION['views']\r\n
unset($_SESSION['views']);\r\n
session_destroy();

\r\n

ASP\r\n

Session(\"date\")=\"2001/05/05\"\r\n
Session.Contents.Remove(\"test2\")\r\n
Contents.RemoveAll()\r\n
Session.Abandon

\r\n

\r\n
那么我们的调用API也是很简单的：session.get(name)/session.set(name, value)/session.remove(name)/session.removeAll()/session.abandon()。所以在session.js文件中创建如下内容吧。\r\n

exports.Session = function () {\r\n
    this._map = {};\r\n
};\r\n
\r\n
Session.prototype.set = function (name, value) {\r\n
    this._map[name] = value;\r\n
};\r\n
\r\n
Session.prototype.get = function (name) {\r\n
    return this._map[name];\r\n
};\r\n
\r\n
Session.prototype.remove = function (key) {\r\n
    delete this._map[key];\r\n
};\r\n
\r\n
Session.prototype.removeAll = function () {\r\n
    delete this._map;\r\n
    this._map = {};\r\n
};

\r\n
再回顾一下Session的一些特性：\r\n

服务器与每一个用户之间保持一个Session。

两个用户之间的Session不会被共享。

Session有过期时间。如果在过期时间之前没有更新会话时间，则会超时。

\r\n
所以我们需要一个Session的管理器来维护客户端与服务端的联系，以及处理超时。像大多数服务器一样，我们的timeout也是可配置的。\r\n

exports.Timeout = 20 * 60 * 1000;

\r\n
SessionManager因为需要管理全局的Session，所以算是服务器级别的。而Session存在于请求级别中，可以供程序员后续调用。\r\n

$\"\"$

\r\n
Session Manager干的事情，其实就是检查session，如果不存在或者已经过期了，就重新创建一个新的session，给后续调用。以下是这个流程图的代码实现：\r\n

var sessionId = request.cookie(session.SESSIONID_KEY);\r\n
var curSession;\r\n
\r\n
if (sessionId && (curSession = sessionManager.get(sessionId))) {\r\n
    if (curSession.isTimeout()) {\r\n
        sessionManager.remove(sessionId);\r\n
        curSession = sessionManager.renew(response);\r\n
    } else {\r\n
        curSession.updateTime();\r\n
    }\r\n
} else {\r\n
    curSession = sessionManager.renew(response);\r\n
}

\r\n
至于获取session，判断session是否timeout，以及重新创建一个session的方法实现，直接看代码吧：\r\n

var SessionManager = function (timeout) {\r\n
    this.timeout = timeout;\r\n
    this._sessions = {};\r\n
};\r\n
\r\n
SessionManager.prototype.renew = function (response) {\r\n
    var that = this;\r\n
    var sessionId = [new Date().getTime(), Math.round(Math.random() * 1000)].join(\"\");\r\n
    var session = new Session(sessionId);\r\n
    session.updateTime();\r\n
    this._sessions[sessionId] = session;\r\n
    var clientTimeout = 30 * 24 * 60 * 60 * 1000;\r\n
    var cookie = {key: SESSIONID_KEY, value: sessionId, path: \"/\", expires: new Date().getTime() + clientTimeout};\r\n
    response.setCookie(cookie);\r\n
    return session;\r\n
};\r\n
\r\n
SessionManager.prototype.get = function (sessionId) {\r\n
    return this._sessions[sessionId];\r\n
};\r\n
\r\n
SessionManager.prototype.remove = function (sessionId) {\r\n
    delete this._sessions[sessionId];\r\n
};\r\n
\r\n
SessionManager.prototype.isTimeout = function (session) {\r\n
    return (session._updateTime + this.timeout) < new Date().getTime();\r\n
};

\r\n
业务逻辑代码上起来，常常session的味道吧：\r\n

var handle = function (session) {\r\n
    response.setHeader(\"Content-Type\", \"text/plain\");\r\n
    response.writeHead(200, \"Ok\");\r\n
    if (!session.get(\"username\")) {\r\n
        session.set(\"username\", request.get(\"username\"));\r\n
    }\r\n
    response.write(\"Hi, \" + session.get(\"username\") + \"\\n\\r\");\r\n
    response.end();\r\n
};

\r\n
我们首先访问http://localhost:8080/，看看有什么响应：\r\n

Hi, undefined

\r\n
继续访问http://localhost:8080/?username=jacksontian ：\r\n

Hi, jacksontian

\r\n
再继续访问http://localhost:8080/，看看是否成功：\r\n

Hi, jacksontian

\r\n
其实如果你用Chrome来测试这一段的话，也许是不成功的。因为浏览器会同时发送2个请求到服务端，你不知道的那一个是/favicon.ico。为了不影响你的测试，首先干掉这个调皮鬼吧：\r\n

if (request.url == \"/favicon.ico\") {\r\n
    response.writeHead(404, \"Not Found\");\r\n
    response.end();\r\n
    return;\r\n
}

\r\n
至此，session部分打造完毕。\r\n
\r\n
最后值得注意的是，由于Cookie不能被不同的浏览器共享，所以服务端每次给不同的客户端分配的Session ID是不同的，导致多个浏览器之间不能共享会话。也因为服务端与同一个客户端只根据一个Session ID来做判断，所以通常一个站点不能支持多帐号在一个客户端中同时登陆。\r\n

动态服务器与静态服务器对比

\r\n
一般而言，一个服务器是能够Handle所有的动态静态请求的，比如Apache（添加了PHP模块支持的）。但是我们还是可以简单的分析一下动静态服务器之间的需求差别的。\r\n
\r\n
静态文件服务器:\r\n

不需要Cookie，Session之类来保证状态

不需处理GET，POST方法上传的数据

通常具可备缓存性

版本有效性

\r\n
动态服务器：\r\n

需要追踪状态，验证身份

需要处理请求上传的数据，来动态响应

响应不具备可缓存性

永远只有现在一个版本

\r\n
所以对于Cookie，Session一类的检测和判断，完全不必要放到静态文件服务器上。而动态服务器也是不需要304之类的条件请求和Expires之类的头的。为了提高各自的性能，所以彼此之间不必交叉满足所有需求。\r\n
\r\n
下一章节将会在这部分Get/Post处理，cookie处理，session处理的基础上介绍如何搭建一个MVC框架。\r\n
\r\n
本文代码可于https://github.com/JacksonTian/ping/zipball/dynamic_server 下载\r\n
\r\n
项目地址：https://github.com/JacksonTian/ping 项目改名字为ping了。","构建动态服务器基础","2012-05-14 06:30:58.5",17793,"2011-12-07 04:29:32",{"_13":67,"_23":68},"JacksonTian","https://avatars.githubusercontent.com/u/327019?v=4"]