您好!
欢迎来到京东云开发者社区
登录
首页
博文
课程
大赛
工具
用户中心
开源
首页
博文
课程
大赛
工具
开源
更多
用户中心
开发者社区
>
博文
>
前端进阶之路-那些当年踩过的
分享
打开微信扫码分享
点击前往QQ分享
点击前往微博分享
点击复制链接
前端进阶之路-那些当年踩过的
自猿其说Tech
2022-04-25
IP归属:未知
50720浏览
本文介绍了前端开发中常见的一些问题,并收集了一批高频样式表,还有前端的自动化测试实践,可以帮读者在以后开发中遇到问题时能快速地找到解决方案。数据变更后页面为什么不刷新?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京东物流技术与数据智能部 ###### 作者:李鹏文
原创文章,需联系作者,授权转载
上一篇:渗透攻防Web篇-深入浅出SQL注入
下一篇:复杂度分析:如何分析、统计算法的执行效率和资源消耗
自猿其说Tech
文章数
426
阅读量
2149957
作者其他文章
01
深入JDK中的Optional
本文将从Optional所解决的问题开始,逐层解剖,由浅入深,文中会出现Optioanl方法之间的对比,实践,误用情况分析,优缺点等。与大家一起,对这项Java8中的新特性,进行理解和深入。
01
Taro小程序跨端开发入门实战
为了让小程序开发更简单,更高效,我们采用 Taro 作为首选框架,我们将使用 Taro 的实践经验整理了出来,主要内容围绕着什么是 Taro,为什么用 Taro,以及 Taro 如何使用(正确使用的姿势),还有 Taro 背后的一些设计思想来进行展开,让大家能够对 Taro 有个完整的认识。
01
Flutter For Web实践
Flutter For Web 已经发布一年多时间,它的发布意味着我们可以真正地使用一套代码、一套资源部署整个大前端系统(包括:iOS、Android、Web)。渠道研发组经过一段时间的探索,使用Flutter For Web技术开发了移动端可视化编程平台—Flutter乐高,在这里希望和大家分享下使用Flutter For Web实践过程和踩坑实践
01
配运基础数据缓存瘦身实践
在基础数据的常规能力当中,数据的存取是最基础也是最重要的能力,为了整体提高数据的读取能力,缓存技术在基础数据的场景中得到了广泛的使用,下面会重点展示一下配运组近期针对数据缓存做的瘦身实践。
自猿其说Tech
文章数
426
阅读量
2149957
作者其他文章
01
深入JDK中的Optional
01
Taro小程序跨端开发入门实战
01
Flutter For Web实践
01
配运基础数据缓存瘦身实践
添加企业微信
获取1V1专业服务
扫码关注
京东云开发者公众号