公司整个前端体系不太完善，很难保证效率和质量。 彼此缺乏沟通，导致重复劳动。相同的东西被写过很多遍，不能发挥集体智慧。诚然在这种模式下就算个人做的再好，也无法提升整体的效率。除非每个人都意识到并且按照一定的标准去执行，才会往更加良性的方向发展。以下是我基于对目前的前端体系所设计的整体架构，具体功能均为实现，只是提供一个实现思路。当然有时间我会一个个实现的。
朱雀：性能日志 + 错误日志
背景：
项目开发完成后，没有一个完善的日志系统，我们很难了解到发布出去的代码在用户机器上执行是否正确，所以需要建立前端代码性能相关的监控系统。100用户出现问题，可能只有10个会向我们反馈，而剩下的会对我们好感度降低，很可能直接不用。 而且就算这10个用户，也需要我们花费好久去了解一些信息，譬如浏览器版本，重现过程什么的，颇为繁琐
设计思路：
设计一种独立的系统，该系统作为中间服务器存在，与具体项目解耦。 也就是说任何想用我服务的，只需要前端加上几行代码，就可以实现日志上传。需要查看信息的时候，只要登录我的平台(盘古：http://pangu.rd.800best.com/dashboard),然后点击朱雀-前端日志收集平台，就可以看到自己所属项目的详细收集信息（以下操作类似，不赘述）。
实现：
要实现这一功能。
第一要搭建一个后端服务器，这里考虑直接使用express亦或koa。用于接收http请求并持久化。
第二要制作一个管理界面。 界面可以根据类型（性能日志，错误日志），时间，账号，浏览器等筛选
使用方式：
const PERFORMANCE_URL = "http://zhuque.800best.com/performance/post";
const CRASH_URL = "http://zhuque.800best.com/error/error/post";
const data = {
msg: errorMessage,url: errorUrl,userAgent: userAgent,time: new Date()
}
fetch.post({
URL: CRASH_URL,data: data
})
const perf = (window.webkitPerformance ? window.webkitPerformance : window.msPerformance ),const timing = pref.timing;
perf = perf? perf : window.performance;
if( perf&& timing ) {
let perfData = {};
for (let key in timing) {
if (Object.prototype.hasOwnProperty.call(timing,key)) {
perfData.[key] = (timing[key] - navigationStart);
}
}
fetch.post({
URL: PERFORMANCE_URL,data: perfData
})
}
如果把这个代码进一步改进，可以变成这样的：
import bestLog from 'bestLog'; // bestLog 构造函数，接受两个参数一个是PERFORMANCE_URL 另一个是CRASH_URL // 不指定会使用默认的，指定会覆盖，然后请求会发到指定的url function init() { bestLog({ PERFORMANCE_URL: 'bestsmart.800best.com' }); } // 这样浏览器只要挂了，并且error 没有被catch 就会触发window.onerror事件，进一步执行我的代码
玄武：直出中间件（ssr + prefetch + prerender）
背景：
360海淘目前尝试使用了服务端渲染，还开了一个关于服务端渲染的技术分享， 这种精神和活动确实值得发扬。 但是现在的结果依然不是很理想，其他项目组需要使用服务端渲染依然要重新开始填坑。另外具体实现和业务镶嵌比较深入，移植相对困难。 基于此，一种基于服务端渲染和资源预加载的中间件呼之欲出。 如果我需要使用服务端渲染，直接稍加修改即可。
设计思路：
任何项目组如果需要用到服务端渲染，直接接入，稍微修改代码，就可以享受服务端渲染带来的直出体验。
实现：
一：搭建中间服务器
二：服务端监听请求，收到请求，根据项目名找到对应的路由信息。
三：根据路由信息，生成html，将html 和 state一同返回前端。
使用方法：
由于服务端渲染的特殊性，所以需要配置没那么简单。
主要有两点 1： 事件挂载 => 服务端的生命周期只走到componentWillMount，而客户端则会有完整的生命周期，因此部份事件可以挪到componentDidMount中处理
2： 自定义构建配置： 不构建css等
苍龙：组件平台
这里可以查看其它项目组的组件库，可以编辑自己组件库。
参考：http://my.oschina.net/wanjubang/blog/673683#OSC_h2_3
白虎：自动化集成平台
背景：
参考：http://my.oschina.net/wanjubang/blog/683635#OSC_h2_3
设计思路：
项目成员每次提交代码都会在平台跑一遍测试。 如果不需要执行 --disable 。 然后可以登录到白虎平台查看代码覆盖率和 测试是否通过等信息。 项目成员只需要编写测试用例就可以了。管理员可以用来查看项目的代码质量。
实现：
系统采用典型的master/slave架构。 采用doker容器进行部署。 项目需要使用直接安装client端，然后连接我们的白虎服务器就可以了。
使用方法：
客户端:
reliable server -m <reliable-master:port> --verbose
伏虎: 文档服务器 （集成mock）
参考：http://my.oschina.net/wanjubang/blog/673683#OSC_h2_1