前端进阶之路-那些当年踩过的-京东云开发者社区

本文介绍了前端开发中常见的一些问题，并收集了一批高频样式表，还有前端的自动化测试实践，可以帮读者在以后开发中遇到问题时能快速地找到解决方案。数据变更后页面为什么不刷新？VUE中如何强制刷新？前端遇到性能问题如何解决？本文会跟大家聊一聊。

### 1 常见问题

#### 1.1 如何使用Chrome调试工具？

只要安装了谷歌浏览器，就可以使用Google Chrome开发者工具了，Google Chrome开发者工具是内嵌到浏览器的开发工具，打开方式有两种：第一“按F12”，第二：shift+ctrl+i。
以下列举了一些常用的面板。

###### 1）NetWork
NetWork可以看到网页加载的脚本和资源的时间，还可以看到某些不能加载成功的资源；以下是百度首页演示，百度首页内容很干净所以不需要加载什么图片等资源

![](//img1.jcloudcs.com/developer.jdcloud.com/3fa07125-c9b3-4b3d-9c92-cadbe95dda9e20220425141146.png)

###### 2）Elements
Elements这个就比如页面的每个元素吧，比如百度搜索这个图片，可以通过Elements找到，搜索框也可以，在底下的“放大镜”类似的控件，点击然后选择自己想要查看要素或位置，Elements会跳转到相应的实现代码。

![](//img1.jcloudcs.com/developer.jdcloud.com/5f2644d1-346a-4353-ac5b-d13624c70fea20220425141214.png)

###### 3）Sources
Sources可以查看运行的脚本，调试一般都是在Sources调试的，所以程序开发者需要了解和熟悉Sources的使用

![](//img1.jcloudcs.com/developer.jdcloud.com/2bac0769-46b3-48f6-9b04-a0af6ba8b2be20220425141236.png)

在左侧的脚本代码编号，鼠标点击即可添加断点，添加断点后，刷新网页，程序运行到断点即可看到断点调式的状态了，具体调试需要在自己想查看某个方法里边是否有问题，一步步排除，效果很好。

![](//img1.jcloudcs.com/developer.jdcloud.com/c91bde34-0185-4338-87fc-978d8f038a0b20220425141250.png)

###### 4）Console
Console可以查看网页运行后提示的消息，错误或者警告以及输出内容等，网页后台可以使用Console.debug("输出内容")；来在Console输出显示，可以做到调试的作用吧。console.debug("Console使用介绍");console是小写形式，不然提示没有Console。

![](//img1.jcloudcs.com/developer.jdcloud.com/61f815ad-aa60-411c-9166-8ba5c49377cf20220425141312.png)

#### 1.2 如何安装vue调试器？

使用Chrome打开应用商店，地址如下：
https://chrome.google.com/webstore/category/extensions
搜索Vue.js devtools，在右侧点开后安装即可。

![](//img1.jcloudcs.com/developer.jdcloud.com/016ecf60-8aaf-46ce-9266-bf858e9772e820220425143701.png)

安装后的效果

![](//img1.jcloudcs.com/developer.jdcloud.com/7fc401c7-d6c3-46de-ba0f-55f9f81537a720220425143715.png)

注意：有时这个插件会加载不出来，这种情况可以在应用商店移除，再重新安装，有必要的话再重启下浏览器就好了。

#### 1.3 数据改了，页面不更新

数据改了，页面不更新，想必这是每个VUE开发者都遇到过的问题。

有些对象的赋值是不会触发DOM刷新的。比如修改了数组里面某个对象的属性，肯定不好使，你可以去试。是不是VUE的BUG呢？不，官方有声明数组对象只有特定操作才会触发页面刷新。需要特别注意以下几种情况。

1. Vue 无法检测实例被创建时不存在于 data 中的 property
2. Vue 无法检测对象 property 的添加或移除
3. Vue 不能检测通过数组索引直接修改一个数组项
4. Vue 不能监测直接修改数组长度的变化
5. 在异步更新执行之前操作 DOM 数据不会变化

#### 1.4 样式改了，页面没效果

1. 先确认你的样式没有写错。
2. 被更高优先级的样式覆盖。

CSS全称为Cascading Style Sheets，直译过来是层叠样式表。谜底就在谜面上，既是层叠，它就支持多次为一个元素定义，然后遵循一定的规则，对DOM元素进行渲染。

**那被定义多次时到底哪个会生效？**
优先级从低到高依次为：标签选择器 < 类选择器 < ID选择器。

**那么如果同样的选择器在多个文件中被定义了多次，会怎样？**
它会用最后引用的文件中的规则，即最后原则。这个特性可以重写框架中的样式，比如【element-ui】。如果你想改变框架中一个按钮的样式无法满足你的需求，你就可以单独写一个规则，在main.js文件中element.css后面引入它，即可覆盖原有的样式。

#### 1.5 this里面的数丢了

代码原本正常执行，只因用了一层拉姆达表达式，this里面的值就不见了。
这是因为在拉姆达表达式中，this会被重新赋值，这种情况在接口调用时比较常见，一个调用成功的回调方法，将接口返回的数据赋值给页面绑定的对象，还用了this关键字，结果可想而知。

解决方法有以下两种：

1. 老老实实地用function关键字；
2. 重命名this，如下：let that = this

这行代码算是常见了吧，你可曾想过为啥会这么写？乍一看好像什么用也没有，实际上那位同事已经被这个问题折磨了一整天才查到这么个办法。

#### 1.6 幽灵代码

代码好好的，确实没人改过，上线之后大部分人都是正常的，偏偏有人说自己的电脑不好使。浏览器一模一样，版本也一致，同一个账号，配置了host可以确认打到一台机器上了吧？

不好使，气人不？

笔者就遇到过这么一例，记得是2018年的双11的前夕，帮小伙伴查了这么个问题，去薅羊毛的时候啥都没有了，至今让我记忆犹新。
原因很不寻常：浏览器的“自动翻译”功能。浏览器自动翻译会影响DOM结构，一些用JQ定位元素的方法会失效。

#### 1.7 还能再卡点不？

系统用着用着，就卡得不会动了，找后端研发，人家看了各种监控、各种数据都正常得不得了，被一顿怼是必然的了。

打开开发者工具，调出内存面板，我天，500M，一个页面就500M，它在做什么？
点击面板左上角的圈圈“take heap snapshot”，等到快照生成之后就可以看到里面对象的结构了。

![](//img1.jcloudcs.com/developer.jdcloud.com/89ce626c-0a0b-4b58-be9a-837bb1fa74ae20220425144733.png)

![](//img1.jcloudcs.com/developer.jdcloud.com/40b6a7c8-5359-4185-bff7-7a4bc7657bc520220425144747.png)

#### 1.8 强制刷新除了F5还能咋样？

有部分特殊场景我们需要强制刷新DOM，以下提供四种方案。

1. 刷新整个页面（最low的，可以借助route机制）
2. 使用v-if标记（比较low的）
3. 使用内置的forceUpdate方法（较好的）
4. 使用key-changing优化组件（最好的）

前面两种种不多介绍了，我们重点介绍后面的两个：

###### 1）force update

组件内置$forceUpdate方法，使用前需要在配置中启用。

![](//img1.jcloudcs.com/developer.jdcloud.com/e42e186a-fa7e-4350-8e45-e2977ccce85d20220425144826.png)

###### 2）key-changing

原理很简单，vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。

![](//img1.jcloudcs.com/developer.jdcloud.com/e86e8805-0ffe-4e1c-a30a-380f7d135b8c20220425144845.png)

#### 1.9 连环跳，日志也没有

系统打开后总是跳转到京东首页，这个现象想必大家都有遇到过。可是当你打开开发者工具，发现请求地址列表中只有一组跟京东首页有关的页面。为什么呢？

你从哪来，经历了什么，为啥就到这儿了？一大堆问号瞬间涌上心头。

怎么解？开启下图中的选项（不需要重启）。重新进入系统，让他跳，它的每一次跳转都会被记录到列表之中。

![](//img1.jcloudcs.com/developer.jdcloud.com/50d00e1e-b62d-48ae-811d-e2798049b60520220425144934.png)

#### 1.10 子组件的值变了，父容器为啥取不到？

没毛病，它就这样。
请看下题。

#### 1.11 VUE是单向绑定还是双向绑定？

经常有人说VUE是双向绑定，但总能在网上看到单向绑定的字眼，究竟是单向还是双向？答案是既是单向，又是双向，只是两者的角度不同。

1）双向绑定
VUE确实是双向绑定的，DOM元素与其所绑定的对象是双向绑定，任一方改变后另一个会同步更新。

2）单向传输
数据从父组件传递给子组件以后，子组件改了，父组件的值不会变。如果你有特殊需求，在子组件中修改某个属性值之后要在父组件中回显，可以加个回调方法，把值作为参数传回去，至于怎么处理，就由父组件决定就好

#### 1.12 有没有办法让父子组件之间也能双向“绑定”？

有，但是不建议在复杂的自定义组件中使用。
方法如下：

![](//img1.jcloudcs.com/developer.jdcloud.com/54a70479-ced5-41c8-b2f9-c86ef86cbbcd20220425145033.png)

即便如此，也要显式地触发数据回传；原因很简单，因为vue的设计者认为一个数据被多个组件引用之后，在任一组件中被修改，这样是很“危险“的。

![](//img1.jcloudcs.com/developer.jdcloud.com/20620f4a-ba41-4d8b-ad99-0ae13a8349b520220425145044.png)

注意：这里的前缀“update:“是固定的，不要问为什么，它总要有个规则的。

#### 1.13 为什么不推荐使用VueX？

虽然多数VUE程序为单页面应用，但原型基本是通过路由一个个地跳转页面，几乎没有前端数据可以共享。另一方面，VueX的数据过于灵活，里面的值可以被任一组件的方法修改，涉及小伙伴较多的团队很难做到妥善管理。再次，VueX通常会有其他的替代方案。

#### 1.14 事件监听会不会有性能问题？

会。

事件监听与取消需要成对出现，在vue的destory方法中一定要显式执行取消操作，否则很容易会造成前端“内存泄漏”。这也是很多小伙伴经常遇到的问题。
需要注意的是，单页面应用与传统应用不同的是，用户一整天基于于好几天都不会刷新页面，性能问题如果没有得到充分的重视，系统会变得越来越卡，几乎没有体验可谈。

![](//img1.jcloudcs.com/developer.jdcloud.com/ce920d6d-60c7-4e77-9201-fd22046d55a820220425145136.png)

#### 1.15 可以像JQuery一样单独引用VUE吗？

可以的。

多数人习惯了使用webpack这样一个很重的打包风格。如果只开发一、两个简单的页面，有没有必须建个项目，写完了再build吗？

其实VUE可以像JQuery一样单独引用的，在vue官网首页的getstart已经为我们提供了demo；以下，笔者提供另一个demo。

![](//img1.jcloudcs.com/developer.jdcloud.com/be2cbc5c-c61a-4709-99f6-f19efbe6ab5620220425145210.png)

#### 1.16 指令v-model可以自定义吗？

可以，往下看。
第一步，组件定义；

![](//img1.jcloudcs.com/developer.jdcloud.com/2db963a0-54d3-4b40-b602-68a64dea285220220425145229.png)

第二步，组件引用；

![](//img1.jcloudcs.com/developer.jdcloud.com/04f3c621-8472-43bb-800c-22c9cf77835020220425145246.png)

为什么要这么定义？因为用着方便啊，你写组件是要给人用的。否则就是要回调方法，起码要指定两个属性，还要多一个methods方法。

#### 1.17 computed和watch如何选用？

###### 1）computed

computed看上去是方法，但是实际上是计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算。

###### 2）watch

watch 更像是一个 data 的数据监听回调，当依赖的 data 的数据变化，执行回调，在方法中会传入 newVal 和 oldVal。可以提供输入值无效，提供中间值 特场景。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使用watch。

###### 3）总结

如果一个数据依赖于其他数据，那么把这个数据设计为computed的；如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

#### 1.18 如何写样式更快？

改代码，刷新页面，看效果；不满意，再改代码，再刷新，再看效果。多数小伙伴应该都是用这种方式调样式，特别是遇到页面元素特别深，要点好多次，简直就是噩梦。

你可知道，Chrome的开发者工具是可以直接调样式的，而且改完即时生效，甚至于你还没回车确认效果就已经出来了，是不是很爽？

当然，这里有一个需要注意的点：样式调好之后要将样式表复制出来，贴到你代码中合适的位置。如果你忘了，只能重来。

![](//img1.jcloudcs.com/developer.jdcloud.com/921520b6-aea8-444b-947c-2d410ec14eea20220425145401.png)

#### 1.19 接口不通，谁的错？

如果移动端有一个接口没有调用成功，服务端的日志显示你的入参有问题，可当你反复读过代码之后并没有发现什么不对的地方，怎么办？

这就需要用到抓包工具了。

它不像浏览器端的页面，可以方便的打开Chrome的开发的工具。我们需要单独安装一个抓包工具，这里推荐fiddler。

第一步，设置代理端口；

![](//img1.jcloudcs.com/developer.jdcloud.com/66f3a481-f8c9-482a-9ca4-193c395f4b8920220425145439.png)

第二步，在手机端无线连接中，设置代理服务器，主要有两项：一是IP，二是端口号。因不同型号的手机不尽相同，此处不再附图；

第三步，找到对应的域名，点开后在右侧Inspectors中可以看到完整的请求与响应内容。

![](//img1.jcloudcs.com/developer.jdcloud.com/571d92cd-d42b-4961-a2ae-bea70af91cc520220425145453.png)

### 2 扩展

#### 2.1 ES6兼容性

目前对于ES6各主流浏览器都已全面支持，特别是做后台管理类系统的，可以直接使用。就让大家升级呗，为了他们更好的体验，也为了我们开发更便捷，更高效。

以下为各浏览器支持的最低版本及发行日期。

![](//img1.jcloudcs.com/developer.jdcloud.com/ddd012c8-86cf-4c05-9d01-c76ef30c8d2620220425145525.png)

#### 2.2 常用样式

身处大数据时代，学习方法当然也要有所改变，不能只靠死记硬背。笔者从客服系统的上万行样式表中通过大数据技术提取出了30个高频属性，这30个属性可以覆盖到项目中94%的样式；当然如果你觉得30个太多，记住第一组的15个也能有81%的覆盖率。
如果下面有哪个不认识，请自行百度。

需要强调的是，今天的平台生态较10年前已发生巨大改变，那些对样式有重度阴影的同学必然被IE6蹂躏过。但是，现在已经很难看不到IE6的身影了，你尽可以放心大胆的写。

![](//img1.jcloudcs.com/developer.jdcloud.com/5630ef18-0935-4832-9aa4-5ce54fc9679720220425145600.png)

![](//img1.jcloudcs.com/developer.jdcloud.com/ffa4b6d9-80a2-44fb-bfd1-3c26310bd7ea20220425145614.png)

#### 2.3 前后端分离下的协同

虽然架构为前后分离，仍建议前后端让同一研发负责，前后端扯皮的事儿太常见。
或者立规矩，有争议的功能统一由后端开发。

#### 2.4 编码规范

前端项目中通常会存在一个特殊的模块，eslint。主要功能是规范化前端代码。
新手一定要开，总有人嫌麻烦特意把它关了，还暗自得意，心想自己为团队解决了一个大麻烦。这样的后果只有一种：坑自己，坑队友。

#### 2.5 自动化测试

系统的核心流程通常会实现自动化测试，可以通过简单的脚本编写实现自动点、自动填、自动选。这里推荐cypress。使用方法如下：

第一步：安装；

![](//img1.jcloudcs.com/developer.jdcloud.com/4257dd4d-79ee-4729-902d-8e1986986a6220220425145650.png)

第二步：配置启动脚本；

![](//img1.jcloudcs.com/developer.jdcloud.com/e3c2224f-24a0-425d-a16d-d76f78d0d16120220425145701.png)

第三步：编写测试脚本；

![](//img1.jcloudcs.com/developer.jdcloud.com/c3332d94-88bb-4cc0-8a37-6db4470fa31520220425145714.png)

详见官方测试文档：
https://docs.cypress.io/guides/getting-started/installing-cypress.html

------------

###### 自猿其说Tech-JDL京东物流技术与数据智能部
###### 作者：李鹏文