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

什么是收口

所谓条条大路通罗马,但如果让我来设计通向罗马的各种大路,我至少会做两件事情:

① 让罗马只有一个入口

② 让罗马只有一个出口

这样做的好处是,无论你路从哪来,我可以统一在入口处给你打上各种标志,我也可以在你离开罗马时给你留点纪念。当然罗马自然不只一个出口入口,但是每个出口入口一定有一套相同的规定,否则就会出问题。

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

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

文中仅仅是个人经验,如果有误请指出。

一个收口的例子

前面我们说了工作中收口带来的各种好处(坏处是面向用户会增加成本),而我们前端开发中会有哪些收口呢?

一般来说,对于前端,请求收口即是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的收口,事件机制的收口,大到账号体系、钱包体系等的收口处理,我们在实际工作中应该具备这种收口的思想。

时间: 2024-08-05 02:53:05

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

一探前端开发中的JS调试技巧

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白. 骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前

前端开发中的JS调试技巧

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白. 骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前

【名词】在前端开发中的“轮子”

最近在随便刷一些论坛,文档,常见一个名词"轮子". 自我理解:已封装完成的库.换个名词,组件.例如:图片轮播组建:swiper等,菜单栏组件. 在前端开发中,我们需要在满足条件下对于平台进行兼容,众所周知的IE系列,那么如果有一份已经写好的能够兼容各个浏览器的代码,进行封装以后直接引入使用显然会事半功倍. 作为练习,对于市场上主流的"轮子"进行仿造可以增加经验,也可以自己造轮子,只有自己动手做了才能够知道其中的知识点.

WEB前端开发中的图片压缩

web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的情况下压缩图片,以便让网站更快的加载,提高用户体验度. 我在工作中,压缩图片用到了三个方法,分享给大家: 一.使用windows自带的画图工具 1.使用画图工具打开想要压缩的图片:2.什么都不用做,直接另存为你想要的图片格式,你会发现它比源文件小了很多,而且质量看不出来损失. 这个方法简单,快捷,压

【转载】一探前端开发中的JS调试技巧

友情提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会

web前端开发中常用的尺寸和位置

我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SVG. 在web页面开发中,尺寸和位置分为屏幕的尺寸和位置,元素的尺寸和位置,还有一个是文档的尺寸和位置,不过文档的尺寸和位置是通过document.body获取的,也算是一个元素.还有鼠标的位置.所以尺寸和位置主要分为三类: 屏幕尺寸和位置 元素尺寸和位置 特殊的元素,文档的尺寸和位置 鼠标的位置(

前端开发中务必要转义的三处场景

出于这样或那样的原因,我们在传输.存储.展现字符串时需要进行转义操作,防止不可控的事情发生.下面我将分三处场景描述,有的里边确实有坑,希望大家看完后都有所收获.欢迎积极留言补充. 场景1:使用URL 前端开发中,我们经常会使用到URL,比如博客查询的表单action:"http://eastme.me?q=前端".Ajax发送Get\Post请求.跳转至网址:"http://www.eastme.me/个人简介"等等.这些请求的URL经常会出现汉字,尤其是当表单提交

px em rem在WEB前端开发中的区别

我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需要用em或者是rem来替换掉px在前端开发中进行使用呢? 为什么我们需要使用相对字体大小呢? 或许我们最能直接想到的一点就是它关于CSS3的一些东西.很好理解的是它是一种字号计算方式,尤其是当你在为多种分辨率进行字号计算的时候.想想要在手机上实现字体变大或者变小的时候,你不得不要反复重新计算对象的字

前端开发中通过js设置cookie的一组方法

我们在前端开发中,通常都需要获取并记录用户的某些操作设置,这样可以使用户下一次访问网站时不用进行重复的调整设置同一个功能. 此次文章中的方法是在前端开发工作中自己随手写的一组通过js设置与获取cookie的方法,能够应用在多说情况下,没做细挖与深究. js方法的完整代码如下: var cookie = { set:function(key,val,time){//设置cookie方法 var date=new Date(); //获取当前时间 var expiresDays=time; //将d