网易在2012年底推出的聚合阅读界面很炫，我想研究学习下
聚合阅读网址：http://tag.163.com
说道研究前端源码，有几点小心得：
定制下自己的数据系列和数据内容，或者定制颜色，定制数据模板，更深度的定制比如布局算法。。。
最终今天下午实现的效果如下：
下面一一实现：
1，数据系列 index2.js 和 index.html
2 window.tagConfig.navConfig = {
1 currentPos : ‘news‘,
2 dataNames : [‘tagDataNews‘, ‘tagDataMoney‘, ‘tagDataTech‘, ‘tagDataSports‘, ‘tagDataAuto‘, ‘tagDataEnt‘],
3 hashReg : /news|money|tech|sports|auto|ent/
4 }
<span id="nav_current"><i></i></span>
<a target="_self" hidefocus="true" href="#news" class="news"><i></i><label>新闻</label></a>
<a target="_self" hidefocus="true" href="#money" class="money"><i></i><label>财经</label></a>
<a target="_self" hidefocus="true" href="#tech" class="tech"><i></i><label>科技</label></a>
<a target="_self" hidefocus="true" href="#sports" class="sports"><i></i><label>体育</label></a>
<a target="_self" hidefocus="true" href="#auto" class="auto"><i></i><label>汽车</label></a>
<a target="_self" hidefocus="true" href="#ent" class="ent"><i></i><label>娱乐</label></a>
数据内容 index.html
<script type="text/javascript" src="http://tag.163.com/news/tagwall24.js"></script> <script type="text/javascript" src="http://tag.163.com/ent/tagwall24.js"></script> <script type="text/javascript" src="http://tag.163.com/sports/tagwall24.js"></script> <script type="text/javascript" src="http://tag.163.com/auto/tagwall24.js"></script> <script type="text/javascript" src="http://tag.163.com/tech/tagwall24.js"></script> <script type="text/javascript" src="http://tag.163.com/money/tagwall24.js"></script>
2，定制每一个tag的模板，index.html
<script id="tag_template" type="text/x-micro-template">
<%
var doctitle = data.doctitle,
title = doctitle || ‘‘;
%>
<a href="<%=data.url%>?from=tagwall" title="<%=title%>" >
<span class="inner"><%=data.name%>
<% if(doctitle) { %>
<span class="doc-title"><%=doctitle%></span>
<% } %>
</span><i></i>
</a>
</script>
这个tag很有意思，在index2.js里面有一段用正则替换的代码，将这些script转换为纯javascript
5 "var p=[];" +
~ 4
3 // Introduce the data as local variables using with(){}
2 "p.push(‘" +
~ 1
0 // Convert the template into pure JavaScript
1 str
2 .replace(/[\r\t\n]/g, " ")
3 .split("<%").join("\t")
4 .replace(/((^|%>)[^\t]*)‘/g, "$1\r")
5 .replace(/\t=(.*?)%>/g, "‘,$1,‘")
6 .split("\t").join("‘);")
7 .split("%>").join("p.push(‘")
8 .split("\r").join("\\‘")
9 + "‘);return p.join(‘‘);");
3，定制颜色，看index2.min.js里面的 window.tagConfig.colorPatterns = []
4，定制布局，看index2.min.js里面的 window.tagConfig.pageLayout = [] 和 window.tagConfig = []
原创文章，转载请注明：http://www.cnblogs.com/phpgcs
研究源码会另外写一篇文章： ”网易聚合阅读“的前端研究【源码篇】
有几个地方要千万小心，
1，一般会自定义数据系列的名字，这个名字的定义在index2.js的部分是：
1 window.tagConfig.navConfig = { 0 currentPos : ‘news‘, 4 dataNames : [‘tagData_news‘, ‘tagData_newspaper‘, ‘tagData_news_local‘, ‘tagData_newspaper_local‘, ‘tagData_weibo‘, ‘tagData_foreign_media‘], 5 hashReg : /news|newspaper|news_local|newspaper_local|weibo|foreign_media/ 6 }
上面的数据定义没有错，但是要小心后面的正则匹配会导致很难发现的错误
buttonPosition = location.hash.match(window.tagConfig.navConfig.hashReg),
hashReg里面的第一个news就导致了跟后面的newspaper,newspaper_local,的混淆；要避免这样有相同substring的hashReg
正确的写法应该是
1 window.tagConfig.navConfig = {
0 currentPos : ‘news_all‘,
4 dataNames : [‘tagData_news‘, ‘tagData_newspaper‘, ‘tagData_news_local‘, ‘tagData_newspaper_local‘, ‘tagData_weibo‘, ‘tagData_foreign_media‘],
5 hashReg : /news_all|newspaper|news_local|newspaper_local|weibo_all|foreign_media/
6 }
这样用以个 news_all 就避免了跟后面的 newpaper 混淆
2，还有一个亟待解决的问题，就是画图程序读取数据的问题。
163网站本身是加载了现成的js文件，将数据注册到全局变量，不存在这个问题。
<script type="text/javascript" src="http://tag.163.com/news/tagwall24.js"></script> <script type="text/javascript" src="http://tag.163.com/ent/tagwall24.js"></script> <script type="text/javascript" src="http://tag.163.com/sports/tagwall24.js"></script> <script type="text/javascript" src="http://tag.163.com/auto/tagwall24.js"></script> <script type="text/javascript" src="http://tag.163.com/tech/tagwall24.js"></script> <script type="text/javascript" src="http://tag.163.com/money/tagwall24.js"></script>
其中第一个文件如下：
var tagDataNews={"1":[{"doctitle":"湖南一公务员晒工作餐：2荤1素1汤花费4元","name":"公务员工作餐","url":"http://tag.163.com/news/116/116571/1.html"},{"doctitle":"南京官员夫妇殴打护士现场视频曝光","name":"南京护士被打","url":"http://tag.163.com/news/116/116502/1.html"},{"doctitle":"外企女经理地铁口晕倒后死亡 卧地长达50分钟","name":"外企女经理","url":"http://tag.163.com/news/116/116518/1.html"},{"doctitle":"韩媒：朝鲜发射4枚短程导弹 射程200公里以上","name":"朝鲜发射短程导弹","url":"http://tag.163.com/news/116/116555/1.html"},{"doctitle":"贵阳观山湖区一公交车起火(图)","name":"贵阳公交车起火","url":"http://tag.163.com/news/116/116534/1.html"},{"doctitle":"山西省委副书记金道铭被查 曾长期任职中纪委","name":"金道铭被查","url":"http://tag.163.com/news/116/116450/1.html"},{"doctitle":"深圳36岁女子面若少女 被称"天山童姥"附体(图)","name":"天山童姥附体","url":"http://tag.163.com/news/116/116525/1.html"},{"doctitle":"深圳地铁说明女高管猝死:工作人员不能贸然救助","name":"深圳女高管","url":"http://tag.163.com/news/116/116553/1.html"},{"doctitle":"公安部摧毁4个特大网络贩婴团伙","name":"特大贩婴团伙被摧毁","url":"http://tag.163.com/news/116/116588/1.html"},{"doctitle":"美国夫妇遛狗捡千枚金币","name":"美国夫妇古金币","url":"http://tag.163.com/news/116/116473/1.html"},{"doctitle":"乌克兰克里米亚地区政府议会大楼被占领","name":"乌克兰克里米亚","url":"http://tag.163.com/news/116/116629/1.html"},{"doctitle":"乌克兰一名女示威者与防暴警察坠入爱河(图)","name":"防暴警察女示威者","url":"http://tag.163.com/news/116/116117/1.html"},{"doctitle":"亚努科维奇曾短暂停留官邸 问警卫员:谁想一起走","name":"谁想一起走","url":"http://tag.163.com/news/116/116206/1.html"},{"doctitle":"两会将实行矿泉水"实名制" 不再提供沏茶服务","name":"两会矿泉水实名制","url":"http://tag.163.com/news/116/116472/1.html"}],"2":[{"name":"城乡居民养老险合并","url":"http://tag.163.com/news/116/116433/1.html"},{"name":"连战南锣鼓巷","url":"http://tag.163.com/news/116/116581/1.html"},{"name":"新舟60申请停飞","url":"http://tag.163.com/news/116/116332/1.html"},{"name":"小松鼠开飞机模型","url":"http://tag.163.com/news/116/116623/1.html"},{"name":"瑞典大臣吐槽雾霾","url":"http://tag.163.com/news/116/116221/1.html"},{"name":"北大附中停课","url":"http://tag.163.com/news/116/116390/1.html"},{"name":"京津冀协同发展","url":"http://tag.163.com/news/116/116680/1.html"},{"name":"国足新帅就是他","url":"http://tag.163.com/news/116/116304/1.html"},{"name":"中国公务员760万","url":"http://tag.163.com/news/116/116142/1.html"},{"name":"国内油价今起上调","url":"http://tag.163.com/news/116/116500/1.html"},{"name":"印度教科书错误","url":"http://tag.163.com/news/116/116537/1.html"},{"name":"中国设立国家公祭日","url":"http://tag.163.com/news/116/116546/1.html"},{"name":"监察公厕女保洁","url":"http://tag.163.com/news/116/116100/1.html"},{"name":"举报贪腐获刑","url":"http://tag.163.com/news/116/116255/1.html"}],"3":[{"name":"同事走廊医生","url":"http://tag.163.com/news/116/116517/1.html"},{"name":"北京重污染预警","url":"http://tag.163.com/news/116/116539/1.html"},{"name":"佳木斯发生灭门","url":"http://tag.163.com/news/116/116507/1.html"},{"name":"网络安全信息化小组","url":"http://tag.163.com/news/116/116569/1.html"},{"name":"城管野蛮别车","url":"http://tag.163.com/news/116/116570/1.html"},{"name":"合肥情妇停职","url":"http://tag.163.com/news/116/116401/1.html"},{"name":"绝症丈夫托妻赠房","url":"http://tag.163.com/news/116/116240/1.html"},{"name":"土耳其爆发抗议游行","url":"http://tag.163.com/news/116/116305/1.html"},{"name":"复旦投毒被告上诉","url":"http://tag.163.com/news/116/116551/1.html"},{"name":"中国首艘国产航母","url":"http://tag.163.com/news/116/116399/1.html"},{"name":"违建占河道","url":"http://tag.163.com/news/116/116467/1.html"},{"name":"3男子杀人躲20年","url":"http://tag.163.com/news/116/116341/1.html"}],"4":[{"name":"印度神庙供奉老鼠","url":"http://tag.163.com/news/116/116342/1.html"},{"name":"女子五年卖3亲生","url":"http://tag.163.com/news/116/116334/1.html"},{"name":"李克强漫画","url":"http://tag.163.com/news/116/116425/1.html"},{"name":"澳大利亚巨型番茄","url":"http://tag.163.com/news/116/116242/1.html"},{"name":"故宫猫保安","url":"http://tag.163.com/news/116/116348/1.html"},{"name":"明报前总编遇袭","url":"http://tag.163.com/news/116/116375/1.html"},{"name":"北京重现蓝天","url":"http://tag.163.com/news/116/116437/1.html"},{"name":"打工青年自制飞机","url":"http://tag.163.com/news/116/116533/1.html"},{"name":"月球撞击","url":"http://tag.163.com/news/116/116299/1.html"},{"name":"越级上访","url":"http://tag.163.com/news/116/116368/1.html"}]}
结构如图：
这个 tagDataNews 变量是直接加载在全局 的，被画图程序读到，并且画图。
而我现在觉得从数据库读出数据再生成到js文件不方便，我想直接处理完数据之后将变量注册到window
其实，最好还是生成文件比较好，这样相当于是文件缓存了，速度也快，比如163这种新闻网站，一天数据一变的。
但是，如果数据变化频繁，比如要按用户输入的关键词来检索数据，并呈现成今天这个解决方案，保存成文件并不见得好。
这里也是为了探讨下方法--数据动态生成的情况在这里要怎么来实现在画图之前数据的完全加载？
不怕见笑，其实，我的js水平也就是1年。。。
原创文章，转载请注明：http://www.cnblogs.com/phpgcs
看看163网站本身的核心js画图文件为：
<script src="http://img4.cache.netease.com/service/combo?3.7.3/build/yui/yui-min.js&3.7.3/build/loader/loader-min.js" charset="utf-8"></script> <script type="text/javascript" src="http://img1.cache.netease.com/product/tag/2.2/js/index2.min.js"></script>
假设我们处理数据的文件为 custom.js，当然要放在上面的2行代码之前，因为要先有数据才可以做图
<script src="http://localhost/juhe/js/custom.js"></script> <script src="http://img4.cache.netease.com/service/combo?3.7.3/build/yui/yui-min.js&3.7.3/build/loader/loader-min.js" charset="utf-8"></script> <script type="text/javascript" src="http://img1.cache.netease.com/product/tag/2.2/js/index2.min.js"></script>
1 $.getJSON(url, {"kdval":kdval}, function (data) {
0 var result = [];
1 for(var type in data){
2 var rawdata = data[type];
3 result[type] = [];
4 result[type][1] = rawdata.slice(0, 14);
5 result[type][2] = rawdata.slice(14, 28);
6 result[type][3] = rawdata.slice(28, 40);
7 result[type][4] = rawdata.slice(40, 50);
8 var arr = result[type];
9 var rv = {};
10 for (var i = 1; i < arr.length; ++i)
11 {
12 rv[i] = arr[i];
13 }
14 tagData = rv;
15 window[‘tagData‘+‘_‘+type] = tagData;
16 console.log(tagData);
17 }
18 });
通过这段代码，就把数据读取出来并且也处理成了14，14，12，10的对象，并且注册到 window[‘tagData_news‘],window[‘tagData_newspaper‘],.....可以在console控制台直接打印看看window.tagData_news......
看似是没有问题的，但是其实会报错，因为.getJSON请求了http是耗时间的，在请求返回数据之前，做图程序就会报错。
文章明天继续更新。
”网易聚合阅读“的前端研究【实现篇】,布布扣,bubuko.com
原文：http://www.cnblogs.com/phpgcs/p/tag_163_frontEnd_realization.html