网络的信息纷繁复杂，用户获取到有用的信息往往需要花费大量的时间，也许未来我们自己的浏览器就可以像我们自己的操作系统一样，像安装软件一样任意订阅自己想要的网站内容，个性化上网就是为了实现这个目标而做的尝试，目前提供个性化上网的网站有不少，3721.com便是其中之一。
关于个性化上网，请参考我的博客文章：《个人信息门户——web3.0的雏形或是未来互联网兵家必争之地？》。

3721.com是一个简单的个性化上网门户，我花了点时间解读他的代码，小有心得，不敢私藏，拿出来与大家分享。

3721.com首页源码下载：3721首页源码

解读完之后的成果，是我将其部分功能做了改造，增加了RSS订阅和本地cookie保存机制，用来丰富助易网网站的内容，效果请参考助易网首页：www.cmshelp.com.cn，接下来我们一起阅读代码，这是第一部分，有时间继续解读其余部分。

3721.com的个性化门户是通过ajax实现的，如果对javascript熟悉的朋友，其实解读并不是一件困难的事情。其主要原理是通过数组“json_3721”来记录页面中所有模块的各种状态（包括ID、位置、标题、内容、是否显示、顺序等），通过f3721.js中的各种函数，完成模块拖拽，json_3721数组重新生成，各个模块的内容定制等操作，一旦页面中的模块信息发生改变，例如位置变化、内容变化、状态变化，系统通过setjson3721value函数构造新的数组json_3721，通过程序保存到用户的cookie中，直接推送到页面上，这就是其实现的大致原理。让我们先一起了解一下json_3721这个数组。

var json_3721 ={”ver”:”2006-11-01 13:18″,”title”:{”id”:”title”,”t”:”问候语”,”s”:”1″,”h”:”0″,”u”:”1″,”r”:”0″,”e”:”1″,”c”:”0″},”clew”:{”id”:”clew”,”t”:”通知栏”,”s”:”0″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”0″,”c”:”0″},”columns”:[{”cname”:”col1″,”w”:”30%”,”win”:[{”id”:”weather”,”t”:”美丽今日”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″},{”id”:”navigation_myweb”,”t”:”我的网站”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″},{”id”:”navigation_mail”,”t”:”E-mail”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″},{”id”:”navigation_native”,”t”:”本地站点”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″},{”id”:”navigation_download”,”t”:”热门下载”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″}]},{”cname”:”col2″,”w”:”40%”,”win”:[{”id”:”search”,”t”:”搜索”,”s”:”0″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”0″,”c”:”0″},{”id”:”navigation_class”,”t”:”分类站点”,”s”:”0″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”0″,”c”:”0″},{”id”:”navigation_blog”,”t”:”博客 Show”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″}]},{”cname”:”col3″,”w”:”30%”,”win”:[{”id”:”cnsminad”,”t”:”最新通告”,”s”:”0″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”0″,”c”:”0″},{”id”:”countdown”,”t”:”倒计时”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″},{”id”:”picture”,”t”:”读图时代”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″},{”id”:”navigation_tool”,”t”:”实用工具”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″},{”id”:”pad”,”t”:”即时贴”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″}]}]};

千万别看晕了，其实就是一个普通的多维数组而已。我们最为关心的是“columns”的部分，在这维数组中，定义了三个col，分别为col1、col2和col3，代表页面中左中右三列布局，每列中的模块通过“win”数组来保存，每个数据内容的顺序位置就是模块在页面中的位置顺序，提出第一列来看看：

[{”id”:”weather”,”t”:”美丽今日”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″},{”id”:”navigation_myweb”,”t”:”我的网站”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″},{”id”:”navigation_mail”,”t”:”E-mail”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″},{”id”:”navigation_native”,”t”:”本地站点”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″},{”id”:”navigation_download”,”t”:”热门下载”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″}]
你可以尝试，更换一下数组的内容顺序：
[{”id”:”navigation_myweb”,”t”:”我的网站”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″},{”id”:”navigation_mail”,”t”:”E-mail”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″},{”id”:”navigation_native”,”t”:”本地站点”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″},{”id”:”navigation_download”,”t”:”热门下载”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″},{”id”:”weather”,”t”:”美丽今日”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″}]

保存，刷新，你会发现天气预报的模块已经被放置到了，左列的底部，现在觉得模块移动和位置的保存不是秘密了吧。

接下来继续看每个模块的内容，我们把“我的网站”模块拿出来，如下：
{”id”:”navigation_myweb”,”t”:”我的网站”,”s”:”1″,”h”:”0″,”u”:”0″,”r”:”0″,”e”:”1″,”c”:”0″}

有些要素其实是显而易见的：
id:navigation_myweb 代表这个模块的ID编码，这个值在整个页面中需要保持唯一
t:我的网站 模块的标题显示，可以更改为你自己喜欢的名称
h:0 模块是否隐藏，1代表隐藏，0代表显示
r:0 是否显示刷新按钮，1代表显示，0代表不显示（实际上程序并没有给出模块刷新的代码，你可以自己补充完成）
e:1 是否显示定制按钮，1代表显示，0代表不显示
c:0 是否显示关闭按钮，1代表显示，0代表不显示

你可以根据自己的喜好进行初始化设置，要注意的是，当你把模块隐藏了，你可以随时通过“个性化定制”的按钮打开这个模块。今天先解读到这里，另原本程序没有提供模块关闭的代码，我在下面补充了一下，你可以直接复制放到f3721.js文件当中，然后设定c:1，就能看到效果了。

本文原创，转载本文请注明出处：肥龙龙博客http://www.blog-dragon.com/

如有疑问，请加QQ群48608218交流。