前端开发注意事项-前端开发 后端开发

原文链接：

这篇文章主要说一下在前端重构中获得的一些经验总结。

大处着眼，从小处着手！ 从细微处说说前端重构的一些注意事项。

如果你的项目使用前端模板，后端路由+渲染，这篇文章可能不适合。 本文主要针对SPA类型的前端应用。

创建一个前端应用，大致会包括一些流程

注意：把测试放在开发之后可能是错误的，前端开发人员也需要对测试给予足够的重视

本文主要关注开发阶段的一些细节。 一个项目运作一般包括以下几个步骤

现在的很多框架已经帮我们完成了很大一部分工作前端开发注意事项，但是还有很多细节需要我们注意！

1.启动应用程序通常需要做的事情

A。 负载监控

虽然在最后一个环节使用了监控，但是我们需要在应用初始化的时候开始使用

b.跟踪

埋点通常是业务分析的重要依据。

原则一：默认大于配置

我们应该使用统一的方式，比如事件代理，将数据发送到需要的埋点

//这是一段基于taro设定的默认事件发送代码
const eventWhiteList = ['InputItem-module', 'AuthButton-module']
 window.addEventListener("mouseup", function (e) {
 if(e.target) {
 // 找到classlist
 const classList = e.target.classList;
 let moduleClassName = null
 for(let i=0; i< classList.length; i++) {
 if(classList[i].indexOf("-module__") > 0) {
 moduleClassName = classList[i]
 break;
 }
 }
 if(moduleClassName && !new RegExp("^("+eventWhiteList.join(")|(")+")").test(moduleClassName)) {

 // 截取class 除标识内容的hash部分
 moduleClassName = moduleClassName.replace(/___.+/, "")
 let innerText = e.target.innerText || ""
 Tracking.trackEvent('click', {'lmt-track-id': moduleClassName, 'activity': innerText.substr(0,30)})
 }
 }
 }, {capture: true})

如上，我们需要根据自己的使用框架，找出一些有规律的行为，并对行为进行分析，取出可以作为跟踪标识的部分，创建数据

2.什么是全局拦截器

主要用来处理路由初始化前必须要做的一些拦截判断

3.初始化路由

为什么要单独列出路由初始化，难道只是路由定义，当然不是！

由于SPA应用，路由被转发到前端。 这个时候就需要考虑路由切换带来的一些副作用

原则二：页面隔离

后端路由切换往往会带动前端页面刷新，而前端路由的调整只是地址的变化。

我们需要在必要的节点销毁页面信息，防止对下一页产生副作用

重点：定时器的销毁必须要注意

注意：手动中止Fetch请求，更多教程

参考AbortController的实现，考虑到兼容性问题，可以实现一个虚拟的abort：即增加一个信号来resolve和reject前端开发注意事项，通过程序设置。 如果信号被触发，响应将不会被处理。

比如基于director路由，我们可以这样写

// routeConfig为定义的路由列表
var r = new director.Router (routeConfig).configure ({
 html5history: !!routerInc["settings"]["enableHistory"], run_in_init: true, convert_hash_in_init: true,
 before: function () {
 // 对上一个页面做清理操作
 if (routerInc && routerInc.page ()) {
 routerInc.page ().isLoading (true);
 routerInc.page ().cancelXhr();
 routerInc.page ().modal.distoryModal();
 routerInc.clearPage();

 }
 var curUrl = !!routerInc["settings"]["enableHistory"] ? window.location.href.replace(window.location.protocol+"//"+window.location.host,"") : (this.delimiter+this.getRoute().join(this.delimiter);
 logger.debug ("all--------route---before");
 return ic.doInterceptor(curUrl, routerInc);
 },
 notfound: function () {
 //没有对应路由
 //为防止 无法返回上一步, 改成直接替换当前页面的
 try{
 routerInc.page ().notFound();
 }catch (e){
 routerInc.redirect ("/notfound");
 logger.error(e);
 }
 }
});

上面代码中有一个ic.doInterceptor，它是一个过滤调用类，主要用来做路由中的一些同步过滤工作

如上图所示，当某个url需要登录时，会直接跳转到登录页面。 以上功能可以使用过滤器或者责任链模式来实现

注意：设计模式为重构行为提供了目标

4.进入页面初始化

也就是我们其中一个页面模块的开发。 在这一部分，我们应该关注业务的发展。 在这个阶段，我们通常会关注以下几点

原则 3：专注于业务

A。 参数传递

一共有三种类型的参数

①. 路由规则参数

如/pay/:type

type 是一个路由参数

②. 搜索参数

如/pay/online?orderid=xxxx

③. 组件间的参数传递

使用内存传递参数，主要用于解决数据量大的情况

b. 参数安全

有些页面会直接在页面上显示搜索中的内容，比如一些结果页，接收后台参数显示给用户

这时候就需要防止xss

参考URL中的queryString方法：

C。 防止用户序列号

用户在同一浏览器的多标签页登录不同账号时，需要提示

参考如何避免SPA应用中同一浏览器多tab登录导致的串口用户问题：

d. ajax 或 fetch 行为的一致性

主要包括三类，一是加载，二是缓存，三是结果转换

通用内容要封装到框架中，统一编码行为的难度永远大于框架实现

通常都有这样的逻辑。 我通过A页面的接口判断是否进入B页面，同时不妨碍用户手动输入B页面地址直接进入。 我们会对A页面和B页面进行界面判断。

这时候缓存几秒的功能就很实用了，当然前提是这个界面的内容变化不是很频繁。

5. 页面级过滤器

主要用于页面对象初始化前的异步过滤，根据当前页面的业务对象进行过滤

它可以使用 promise 来实现。 参考实现如下

/**
 * 定义了一个公共的 filter
 * 用于处理一些 通用的页面拦截逻辑
 * @param resolve
 * @param rejected
 */
 var filter = function (resolve, reject) {
 
 let excutors = []
 // 以下定义你的过滤器，按顺序执行
 new Filter1(excutors, promiseQueue);

 new Filter2(excutors, promiseQueue);
 new Filter3(excutors, promiseQueue);
 promiseQueue(excutors).then(() => {
 resolve(true)
 }).catch(cb => {
 reject(cb)
 })
 }
 function promiseQueue (executors, letGo) {
 return new ES6Promise((resolve, reject) => {
 if (!Array.isArray(executors)) {
 executors = Array.from(executors)
 }
 if (executors.length <= 0) {
 return resolve([])
 }
 var res = []
 executors = executors.map((x, i) => () => {
 var p = typeof x === 'function' ? new ES6Promise(x) : ES6Promise.resolve(x)
 p.then(response => {
 res[i] = response
 if (i === executors.length - 1) {
 resolve(res)
 } else {
 executors[i + 1]()

 }
 }, reject)
 })
 executors[0]()
 if (letGo) {
 resolve(true)
 }
 })
 }

6.配置管理

当我们推出一个充满不确定性或复杂性、随环境变化或其他需要配置开关变量的内容时，配置管理是一个优雅且不可或缺的功能

原则四：配置大于硬编码

7.模拟配置

完善的mock机制可以帮助我们加快开发进度

基于yapi和配置管理，我们定义了一套灵活的mock机制

一、项目的所有API定义都有一个常量类

通过定义统一的API获取方式来集成mock

var getApi = function(url, obj){
 var path = $.extend({}, apis, mock)[url] || url;
 if(obj){
 for(var o in obj){
 path = path.replace(":"+o,obj[o]);
 }
 }
 // 处理mock
 if(settings.mockConfig && settings.mockConfig.enable && $.inArray(url, mockPaths || []) >= 0){
 path = (mockPrefix||"") + path
 }
 return path;
 }

然后配合nginx或者节点转发