太极生两仪，两仪生四象。

    公司整个前端体系不太完善，很难保证效率和质量。 彼此缺少沟通，致使重复劳动。相同的东西被写过不少遍，不能发挥集体智慧。诚然在这种模式下就算我的作的再好，也没法提高总体的效率。除非每一个人都意识到而且按照必定的标准去执行，才会往更加良性的方向发展。如下是我基于对目前的前端体系所设计的总体架构，具体功能均为实现，只是提供一个实现思路。固然有时间我会一个个实现的。

朱雀：性能日志 + 错误日志

背景：

项目开发完成后，没有一个完善的日志系统，咱们很难了解到发布出去的代码在用户机器上执行是否正确，因此须要创建前端代码性能相关的监控系统。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