关于前端开发中的“收口”思想

什么是收口

所谓条条大路通罗马，但若是让我来设计通向罗马的各类大路，我至少会作两件事情：

① 让罗马只有一个入口

② 让罗马只有一个出口

这样作的好处是，不管你路从哪来，我能够统一在入口处给你打上各类标志，我也能够在你离开罗马时给你留点记念。固然罗马天然不仅一个出口入口，可是每一个出口入口必定有一套相同的规定，不然就会出问题。

具体到当今的工做场景，高速公路又是一个收口的好例子，进入高速公路时候得通过收费站作点标志，离开时候也会作点操做，若是没有这种收口，不管是缴费工做，流量统计或者其余都是没法统计的。

正常生活中有各类收口的行为，咱们会发现，收口虽然会让效率变低，但却能够更好的管理，一样的道理是能够应用到前端乃至整个程序开发的，今天咱们就来聊一聊前端中的各类收口。

文中仅仅是我的经验，若是有误请指出。

一个收口的例子

前面咱们说了工做中收口带来的各类好处（坏处是面向用户会增长成本），而咱们前端开发中会有哪些收口呢？

通常来讲，对于前端，请求收口便是ajax的收口，而常常有朋友会问我一些问题：重复的请求如何让他第二次不请求呢？

其实解决这个问题很简单的一个方案就是对ajax进行收口处理：

1 var ajaxProxy = function(params) {
2     //作一些额外的工做，好比处理params参数
3     $.ajax(params)
4 };

这里的处理办法就是统一在底层篡改ajax success回调，对数据作一层处理，然而对请求接口进行收口的好处远远不止于此。

封装请求参数

首先，咱们能够对每一个请求的请求参数在底层加入额外参数，好比咱们与server端约定，每次请求咱们都会额外带一个head参数，会携带一些非业务公共数据：

1 head: {
2     channel: 'webapp', //渠道标志
3     version: '2.2.0', //版本信息
4     ct: 3, //平台信息
5     extend: null//可能须要的扩展信息
6 }

每个请求若是额外带这些信息的话，能够解决不少问题：

① server端知道当前请求来源于哪一个渠道（SEM渠道、微信流量入口、搜索流量入口......）、哪个版本、哪个平台（iOS、Android、H5），可能Server就能对这个请求作定制化处理了

② 协助KPI考核，好比市场人员要推广本身的产品，然后台要统计他今天成功推广多少单，就会为这个用户生成一个二维码，具体的url是这样的：

http://domain.com?channel=yexiaochai

那么，个人没一个请求（包括生成订单）都将把channel字段发给Server端，Server若是存于数据库，天天就能很简单生成全部用户的订单完成量

③ SEM渠道是一大流量来源（买搜索关键词），若是咱们想拿到每个关键词对咱们系统每个页面的访问量的话，也能够在这种公共请参数作处理

④ 根据以上功能，咱们甚至能够根据这些特性配合通用的统计平台创建初略的前端漏斗模型

统一数据处理

通常来讲，每一个请求接口，server端返回的数据有一固定格式：

1 {
2   data: {},//真实数据
3   errno: 0,//错误码
4   msg: "success"//信息
5 }

正常的逻辑咱们只须要处理data数据便可，而错误码不为0的状况，咱们可能是弹一个toast提示msg错误信息，因此咱们会统一修改请求的回调，固然也会对一些错误码作特殊处理（未登录、未受权），好比这样：

 1 //统一处理请求返回数据
 2 var commonDataHandler = function (data) {
 3     //记录请求返回
 4     if (!data) {
 5         showToast('服务器出错，请稍候再试');
 6         return;
 7     }
 8     if (_.isString(data)) data = JSON.parse(data);
 9     //正常状况，不执行其它逻辑
10     if (data.errcode === 0) return true;
11 
12     //处理请求未登录的特殊状况
13     if (data.errcode == ERROR_CODE['NOT_LOGIN']) {
14         showToast(data.errmsg, function () {
15           //执行统一逻辑，跳到登录页面，要求登录成功后跳回来
16         });
17         return false;
18     }
19     //处理其它须要特殊处理的错误码，须要业务开发对接口作定制化，将处理逻辑写到具体页面
20     if(this.errCodeCallback[data.errcode]) {
21         this.errCodeCallback[data.errcode](data.errcode, data.errmsg, data);
22         return false;
23     }
24     //通用错误处理，直接弹出toast
25     if (window.APP && data && data.errmsg) window.APP.showToast(data.errmsg, this.errorCallback);
26     return false;
27 };

固然，最开始说的重复请求再也不请求也能够作到这个地方，可是具体操做会有不少细节点须要考虑。

不使用ajax

由于hybrid模式的出现，前端除了ajax外，可能会有更多的选择，好比在Native容器中，前端便不使用ajax发出请求，直接由Native代理发出，若是请求没作封口的话，便须要改动全部的业务代码，这个是十分不科学的。

结语

这里仅仅是提一个小小的点想向各位说明程序收口的重要性，其实咱们程序中不少细小的点皆须要作收口处理。

localstorage使用收口

咱们前面说过若是不想重复请求便须要使用缓存技术，对应到前端是localstorage，不管什么时候，咱们使用缓存都必须考虑如何更新和缓存过时问题，这个时候咱们须要对齐收口。

跳转收口

在作单页应用时，咱们为了避免破坏路由，须要对跳转作收口，咱们甚至须要对window.location这种跳转作收口处理，得封装为一个函数。

关于实际工做中的收口的例子太多了，细小入setTimeout的收口，事件机制的收口，大到帐号体系、钱包体系等的收口处理，咱们在实际工做中应该具有这种收口的思想。