公司:政采云
前端工程师生产环境 debugger 技巧
开发环境 debug 是每个程序员上岗的必备技能。生产环境呢?虽然生产环境 debug 是一件非常不优雅的行为,但是由于种种原因,我们又不得不这么干。那我们今天讲一讲如何使用 chrome 在生产环境进行 debug。
在政采云如何写前端技术方案文档
写文档是软件开发过程必不可少的一个环节,如果文档没有写好,那么软件也不能算是优秀的软件。可对于一般软件开发人员来讲,写代码要比写文字容易得多。本文就想和大家一起探讨一下,前端为什么写技术方案,怎么写前端技术方案。
如何做前端单元测试
对于现在的前端工程,一个标准完整的项目,通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够。希望通过这篇文章让你对单元测试有一个初步认识以及掌握一些单元测试的能力。
LRU 缓存-keep-alive 实现原理
相信大部分同学在日常需求开发中或多或少的会有需要一个组件状态被持久化、不被重新渲染的场景,熟悉 vue 的同学一定会想到 keep-alive 这个内置组件。那么什么是 keep-alive 呢?本文将为你讲解它的实现原理。
Sketch 插件开发指南
Sketch 是 UED 设计工具,大多数 Sketch 插件都是用于提升设计人员工作效率。通过解析 Sketch 设计稿来完成 UI 层代码的生成可以让前端研发同学更专注于业务逻辑代码。本文将全面帮助大家快速掌握 Sketch 插件开发。
Webpack 原理—如何实现代码打包
Webpack 很出色的完成了转译前端多种文件资源,分析复杂模块依赖的工作,并且我们还可以自定义 loader,自由的加载我们自己的资源,那 Webpack 是如何实现打包的呢?本文将为你详细介绍这个问题。
浅析 Web 录屏技术方案与实现
在我们开发人员研发过程中,对于部分偶发事件,异常监控系统不能清晰的告知错误的复现路径,录屏技术或许能帮我们定位并复现问题。那么本文将从有感录屏和无感录屏两方面给读者分享一下录屏这项技术,希望可以帮助你对网页录屏有一个初步认识。
在 Vue 中为什么不推荐用 index 做 key
前端开发中,无论是 React 还是 Vue 框架,列表项都要使用唯一的 key,很多人会直接使用 index 作为 key,而并不知道 key 的原理。这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key。
使用这些配置规范并格式化你的代码
在日常工作中,我们会接触形形色色的工程。工程使用的技术架构不同,可能会有对应不同的代码规范。本文将详细讲解如何一套配置适用当前工程配置好的规则,我们需要做什么,以及各种规范的基本配置。
防抖节流场景及应用
在日常开发中,我们经常遇到频繁触发接口的情况,为了限制这种短时间内高频触发函数调用情况发生,我们可以借助防抖和节流。本文将从各个方面为大家介绍防抖和节流。
浏览器渲染之回流重绘
回流和重绘是前端开发的高频词汇之一,你可以在各种面经,性能优化相关文章可以看到,但是很多都是草草带过。本文带你从浏览器渲染流程中了解回流与重绘的原理。
如何从 0 到 1 搭建代码全局检索系统
前端团队的项目有几百个左右,想要查找某个接口 API 或者某个 NPM 包以及一些关键词在哪些项目中使用到,需要每个开发同学在自己维护的项目里全局搜索一遍或者写个脚本跑一遍,然后统计上去,费时费力。本文将为你介绍全局检索系统。
电商最小存货 - SKU 和 算法实现
目前电商平台的业务中,只要有商品,不可避免的会遇到 SKU方面功能。这篇文章就从理论到实践,从商品创建到商品购买,手把手带你实现 SKU 相关的“核心算法”。
v8 执行 js 的过程
本文意在简单的介绍一下 V8 执行 JS 的过程,通过了解 V8 执行 JS 的过程,知道 JS 代码呈现在浏览器上到底做了什么。
H5 列表缓存方案终稿
在 H5 日常开发中,会经常遇到列表点击进入详情页面然后返回列表的情况,对于电商类平台尤为常见,像我们平常用的淘宝、京东等电商平台都是做了缓存,而且不只是列表,很多地方都用到了缓存。但刚才说的都是 App,在原生 App 中,页面是一层层的 View,盖在 LastPage 上,天然就能够保存上一个页面的状态,而 H5 不同,从详情返回到列表后,状态会被清除掉,重新走一遍生命周期,会重新发起请求,会有新的状态写入,对于分页接口,列表很长,当用户翻了好几页后,点击详情看看商品详情后再返回列表,此时页面回到第一页,这样用户体验很差,如果在进入详情的时候将列表数据缓存起来,返回列表的时候用缓存数据,而不是重新请求数据,停留在离开列表页时的浏览位置;或者是能够像 App 那样,将页面一层层堆叠在 LastPage 上,返回的时候展示对应的页面,这样用户体验会好很多,本文简单介绍一下在自己在做列表缓存的时候考虑的几点,后附简单实现。
通过自定义 Vue 指令实现前端曝光埋点
互联网发展至今,数据的重要性已经不言而喻,尤其是在电商公司,数据的统计分析尤为重要,通过数据分析可以提升用户的购买体验,方便运营和产品调整销售策略等等。埋点就是网站分析的一种常用的数据采集方法。
埋点按照获取数据的方式一般可以分为以下 3 种:
页面埋点:统计用户进入或离开页面的各种维度信息,如页面浏览次数(PV)、浏览页面人数(UV)、页面停留时间、浏览器信息等。
点击埋点:统计用户在应用内的每一次点击事件,如新闻的浏览次数、文件下载的次数、推荐商品的命中次数等。
曝光埋点:统计具体区域是否被用户浏览到,如活动的引流入口的显示、投放广告的显示等。
政采云前端团队(ZooTeam)通过浑仪系统实现数据采集及数据可视化,分析量化的能力,想了解浑仪系统或者还不了解埋点的同学可以先阅读前端工程实践之数据埋点分析系统。
浑仪系统的数据采集是基于代码侵入式埋点方案实现的,提供了自动发送和手动调用埋点信息上报接口发送两种方式实现埋点数据上报。其中页面埋点和点击埋点是使用自动上报的方式实现,在 DOM 节点挂载特殊属性,通过埋点采集 JSSDK 监听挂载了相应属性对应的事件,在事件触发时进行埋点数据上报。曝光埋点由于涉及到有效曝光逻辑的判断,自动上报不能满足相应的需求,所以我们采用手动调用接口方式进行埋点数据上报。