方案沉淀政采云前端团队

LRU缓存-keep-alive实现原理

相信大部分同学在日常需求开发中或多或少的会有需要一个组件状态被持久化、不被重新渲染的场景，熟悉 vue 的同学一定会想到 `keep-alive ` 这个内置组件。

先抛个问题，众所周知，Sketch 是 UED 设计工具，大多数 Sketch 插件都是用于提升设计人员工作效率。那么，作为前端研发的我们为什么要学习 Sketch 插件开发呢？纵观整个前端研发流程，PRD => Design => Code => Release。目前我们的研发提效方式主要集中在 Code => Release 环节，通过 Low Code 低代码开发平台（组件化 + 配置化 + 搭建能力）来提升交付效率。当搭建能力趋于成熟的情况下，前端研发提效的下一个突破口在哪儿？是的，就是 Design to Code，通过解析 Sketch 设计稿来完成 UI 层代码的生成，让前端研发同学更专注于业务逻辑代码。这也是我学习 Sketch 插件开发的初衷。当然今天分享不是 D2C 相关，所以主要篇幅还是集中在 “如何帮助大家快速掌握 Sketch 插件开发”。

浅析Web录屏技术方案与实现

随着互联网技术飞速发展，网页录屏技术已趋于成熟。例如可将录屏技术运用到在线考试中，实现远程监考、屏幕共享以及录屏等；而在我们开发人员研发过程中，对于部分偶发事件，异常监控系统仅仅只能告知程序出错，而不能清晰的告知错误的复现路径，而录屏技术或许能帮我们定位并复现问题。那么本文将从有感录屏和无感录屏两方面给读者分享一下录屏这项技术，希望可以帮助你对网页录屏有一个初步认识。

在vue中为什么不推荐用 index 做 key

前端开发中，只要涉及到列表渲染，那么无论是 React 还是 Vue 框架，都会提示或要求每个列表项使用唯一的 key，那很多开发者就会直接使用数组的 index 作为 key 的值，而并不知道 key 的原理。那么这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key 的属性值。

防抖节流场景及应用

在日常开发中，我们会经常遇到搜索查询，用户在输入过程中会触发 Input 值的改变而持续触发函数调用。或者在用户在商品搜索页滑动浏览商品时，如果我们监听了窗口滚动来发送埋点请求的话，就会频繁触发接口调用。但有时候我们并不希望用户的持续操作过程中，会频繁触发接口的调用。而为了限制这种短时间内高频触发函数调用情况发生，我们可以借助防抖和节流。

React Profiler 的使用

平时大家开发项目的时候，有时候会感觉项目卡顿，通常情况下可以即时做出整改，但也有时候不太容易找到引起卡顿的点，或者说不好发现潜在的性能问题，`React Developer Tools` 提供的 `Profiler` 可以直观的帮助大家找出 React 项目中的性能瓶颈，进一步来改善我们的应用，推荐给大家安装使用。

WebGL 概念和基础入门

WebGL 的发展最早要追溯到 2006 年，WebGL 起源于 Mozilla 员工弗拉基米尔·弗基西维奇的一项 Canvas 3D 实验项目，并于 2006 年首次展示了 Canvas 3D 的原型。这一技术在 2007 年底在 FireFox 和 Opera 浏览器中实现。2009 年初 Khronos Group 联盟创建了 WebGL 的工作组最初的工作成员包括 Apple、Google、Mozilla、Opera 等。 2011 年 3 月 WebGL 1.0 规范发布，WebGL 2 规范的发展始于 2013 年，并于 2017 年 1 月最终完成，WebGL 2 的规范，首度在 Firefox 51、Chrome 56 和 Opera 43 中被支持。

如何从 0 到 1 搭建代码全局检索系统

此前，前端团队的项目有几百个左右，想要查找某个接口 API 或者某个 NPM 包以及一些关键词在哪些项目中使用到，需要每个开发同学在自己维护的项目里全局搜索一遍或者写个脚本跑一遍，然后统计上去，实际上，这是一个比较耗费人力和时间的事情。于是，代码全局检索系统——千寻，应运而生。

如何搭建适合自己团队的构建部署平台

前端业界现有的构建部署方案，常用的应该是，Jenkins，Docker，GitHub Actions 这些，而恰巧，我们公司现在就并存了前两种方案，既然已经有了稳定的构建部署方式，为什么还要自己做一套前端自己的构建平台呢？当然不是为了好玩啊，原因听我慢慢分析。

手把手带你入门 Webpack Plugin

Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。它能够解析我们的代码，生成对应的依赖关系，然后将不同的模块达成一个或多个 bundle。Plugin 则可提供 Loader 无法解决的一些其他事情以及提供强大的扩展方法，使其能执行更广的任务。本文带你了解如何创建自己项目的 Webpack Plugin。

数据可视化探索之 SpreadJS

数据可视化包含三个分支：科学可视化、信息可视化、可视分析。 1、科学可视化主要关注的是三维现象的可视化，如建筑学、气象学、医学或生物学方面的各种系统。重点在于对体、面以及光源等等的逼真渲染，或许甚至还包括某种动态成分。 2、信息可视化是一种将数据与设计结合起来的图片，有利于个人或组织简短有效地向受众传播信息的数据表现形式。 3、可视分析学被定义为由可视交互界面为基础的分析推理科学，将图形学、数据挖掘、人机交互等技术融合在一起，形成人脑智能和机器智能优势互补和相互提升。

深入解析 CSS 选择器

CSS 选择器对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，从而给指定元素添加样式。同时还要考虑一个元素被赋予多个样式时如何生效的问题，这个就和选择器优先级相关了。

手把手教你用 Github Actions 部署前端项目

众所周知，前端部署无非就是把打包之后的代码丢到 nginx html 目录下就完事了，但是每逢产品频繁改需求，甚至只是让你改线上一个字的时候，你总要重复一遍遍以下动作：修改，打包，登录服务器，上传代码，重启服务器。久而久之，别说是你受不了了，搁我旁边看着都受不了。这个时候，有没有想过有个机器人，能帮我们完成以上这些重复又没技术含量的活。没错，你猜对了，Github Actions 就是我们需要的那个机器人。

H5 列表缓存方案终稿

在 H5 日常开发中，会经常遇到列表点击进入详情页面然后返回列表的情况，对于电商类平台尤为常见，像我们平常用的淘宝、京东等电商平台都是做了缓存，而且不只是列表，很多地方都用到了缓存。但刚才说的都是 App，在原生 App 中，页面是一层层的 View，盖在 `LastPage` 上，天然就能够保存上一个页面的状态，而 H5 不同，从详情返回到列表后，状态会被清除掉，重新走一遍生命周期，会重新发起请求，会有新的状态写入，对于分页接口，列表很长，当用户翻了好几页后，点击详情看看商品详情后再返回列表，此时页面回到第一页，这样用户体验很差，如果在进入详情的时候将列表数据缓存起来，返回列表的时候用缓存数据，而不是重新请求数据，停留在离开列表页时的浏览位置；或者是能够像 App 那样，将页面一层层堆叠在 `LastPage` 上，返回的时候展示对应的页面，这样用户体验会好很多，本文简单介绍一下在自己在做列表缓存的时候考虑的几点，后附简单实现。

通过自定义 Vue 指令实现前端曝光埋点

互联网发展至今，数据的重要性已经不言而喻，尤其是在电商公司，数据的统计分析尤为重要，通过数据分析可以提升用户的购买体验，方便运营和产品调整销售策略等等。埋点就是网站分析的一种常用的数据采集方法。

[Flutter] UI调试小工具——颜色吸管

作为客户端开发, 在应用交付之前, 一般都会有 UI 走查这一环节. 一方是对颜色不敏感的开发另一方是对颜色十分敏感的视觉是否经常出现下列对话: >视觉: 你这个颜色是不是和我设计的不太一样. > >开发: 哪里不一样, 这个跟设计稿的颜色一模一样.

那些与 IE 相伴的日子

Internet Explorer（简称：IE）是[微软公司](https://baike.baidu.com/item/微软公司/732128) 为了对抗 [网景浏览器](https://baike.baidu.com/item/网景浏览器)（NetscapeNavigator）从而投入开发，并于 1995 年推出的一款网页浏览器，曾经一度成为同 Windows 系统捆绑安装的流氓软件横行于世，也占据了极高的市场份额，但在近些年里，它却一直因为本身的落后而被众多用户和开发者诟病。

动态表单之表单组件的插件式加载方案

关于动态化表单方案前面我们已经有过一次分享，没看过的同学可以看下之前的文章 [ZooTeam 拍了拍你，来看看如何设计动态化表单](https://juejin.cn/post/6844904201428959239)。文章中提到随着业务差异化增多，我们采用了动态表单解决重复开发及逻辑堆叠的问题。随着动态化表单系统运行过程中业务方接入的越来越多，自定义组件插件式加载的需求开始出现并慢慢变得强烈。

【Flutter 技能篇】你不得不会的状态管理 Provider

Provider，Google 官方推荐的一种Flutter页面状态管理组件，它的实质其实就是对InheritedWidget的包装，使它们更易于使用和重用。关于 InheritedWidget 不做过多介绍，本篇文章主要较全面地介绍 Provider 的相关用法，能在业务场景中有所运用。

编写高质量可维护的代码：组件的抽象与粒度

作为一名精致的前端猪猪女孩，也有那么点想让自己的代码同样看起来精致一点。所以在拿到新需求的 UI 设计稿时，经常会面临如下问题：如何拆解页面？如何划分组件才算是合理？好像用于组件拆分的 A 方案和 B 方案在当前业务场景下也都还算合理，那究竟要怎么选择？组件的抽象与粒度貌似是一个老生常谈的问题了～学习了很多前辈的文章，那么今天结合业务场景，也来讲下我的心得～

“混合双打”之如何在 Class Components 中使用 React Hooks

React 在 v16.8.0 版本中推出了 Hook，作为纯函数组件的增强，给函数组件带来了状态、上下文等等；之前一篇关于 React Hooks 的文章介绍了如何使用一些官方钩子和如何自建钩子，本文不会再介绍上文中已提到的部分钩子的基础使用，而是主要着眼解决一些实际开发中的场景。

编写高质量可维护的代码——异步优化

在现在前端开发中，异步操作的频次已经越来越高了，特别对于数据接口请求和定时器的使用，使得我们不得不关注异步在业务中碰到的场景，以及对异步的优化。错误的异步处理可能会带来很多问题，诸如页面渲染、重复加载等问题。下面我们就先简单的从 JavaScript 中有大致的哪几种异步类型为切入点，然后再列举一些业务中我们会碰到的场景来逐个分析下，我们该如何解决。

告别复制粘贴：动态模板生成小技巧

在日常开发中，我们需要不停的新建页面和组件。以 Vue 项目为例，我们在新建一个页面的时候，需要经历一遍又一遍重复的过程。假设新建一个页面，并复制粘贴模板代码需要 1 分钟的时间，一个项目如果有 60 个页面，就得花费 1 个小时写这种重复性高、无聊且枯燥的代码。这显然不是我们想看到的，下面给大家分享几个提效小技巧。

如何从 0 到 1 搭建性能检测系统

前端页面性能对用户留存、用户直观体验有着重要影响，当页面加载时间超过 2 秒后，加载时间每增加一秒，就会有大量的用户流失，所以做好页面性能优化，无疑对网站来说是一个非常重要的步骤。那如何才能知道一个页面的性能情况呢？知道了页面性能情况后又如何进行优化呢？一个页面的性能指标非常多，面对一大堆性能指标，可能一个老手也一时间不知道从何开始分析。而且不同团队，负责的业务不同，性能分析的指标也不能够一概而论。打个比方说，对于一般的电商网站，一定会有很多图片，那图片加载的性能提升对网站的性能提升作用就比较大。而对于一些由表单组成的中台页面，提升图片加载速度的收益远小于电商网站。总结来说，不同的团队有着各自不同的业务，业务之间千差万别，性能指标也不能一概而论，所以用一套统一的检测模型覆盖所有场景是不现实的。本文将介绍如何定制一个属于自己团队的性能检测平台。

敏感数据加密方案及实现

现在是大数据时代，需要收集大量的个人信息用于统计。一方面它给我们带来了便利，另一方面一些个人信息数据在无意间被泄露，被非法分子用于推销和黑色产业。 2018 年 5 月 25 日，欧盟已经强制执行《通用数据保护条例》（General Data Protection Regulation，缩写作 GDPR）。该条例是欧盟法律中对所有欧盟个人关于数据保护和隐私的规范。这意味着个人数据必须使用假名化或匿名化进行存储，并且默认使用尽可能最高的隐私设置，以避免数据泄露。相信大家也都不想让自己在外面“裸奔”。所以，作为前端开发人员也应该尽量避免用户个人数据的明文传输，尽可能的降低信息泄露的风险。

浅析 vue-router 源码和动态路由权限分配

上月立过一个 flag，看完 `vue-router` 的源码，可到后面逐渐发现 `vue-router` 的源码并不是像很多总结的文章那么容易理解，阅读过你就会发现里面的很多地方都会有多层的函数调用关系，还有大量的 this 指向问题，而且会有很多辅助函数需要去理解。但还是坚持啃下来了(当然还没看完，内容是真的多)，下面是我在政采云(实习)工作闲暇时间阅读源码的一些感悟和总结，并带分析了大三时期使用的 [vue-element-admin](https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD) 这个 vuer 无所不知的后台框架的动态路由权限控制原理。顺便附带本文实践 demo 地址: 基于后台框架开发的 [学生管理系统](https://github.com/251205668/student-admin-template)。

编写高质量可维护的代码：一目了然的注释

有一些人认为，好的代码是自我解释的。合适的命名和优秀的代码的确可以减轻开发人员阅读代码的工作量，对于不是特别复杂的代码可能确实可以做到自我解释。但并不是所有场景都可以做到这一点，我们一起来了解一下“注释”吧。

编写高质量可维护的代码：数据建模

数据建模是一种用于定义和分析数据的要求和其需要的相应支持的信息系统的过程。随着前端页面的交互变得更加细腻复杂，原本存放于服务端的状态放置在了前端，类似 flux、redux、mobx、dva、rematch、vuex 的状态管理库也成了每个项目的标配。因为分层理念的普及，前端工程师们需要把更多精力放在数据管理上，数据建模也成了基本功。本文带你了解如何进行数据建模。

深色模式适配指南

随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗，减弱强光对比，还能提供更好的可视性和沉浸感。那针对一款 App 应用（原生 + H5）怎么进行深色模式的适配呢？今天就让我们一起来探究吧！

编写高质量可维护的代码：逻辑判断

if else、switch case 是日常开发中最常见的条件判断语句，这种看似简单的语句，当遇到复杂的业务场景时，如果处理不善，就会出现大量的逻辑嵌套，可读性差并且难以扩展。编写高质量可维护的代码，我们先从最小处入手，一起来看看在前端开发过程中，可以从哪些方面来优化逻辑判断？下面我们会分别从 JavaScript 语法和 React JSX 语法两个方面来分享一些优化的技巧。

如何基于 Electron 开发跨终端的应用

今天所要讲的主题是**桌面端**，随着 Electron 这样的跨终端 JS 框架的出现，整个前端工程师的能力也是延展到了桌面端。当我们拥有了这样的一个桌面端的开发能力之后，它能带给我们的价值是什么呢？首先看一下桌面端给我们带来哪些不一样的体验。大家看到左边这张图，是早期电脑的 DOS 系统的运行的截图，右边则是 1983 年苹果电脑发布的第一款 Apple Lisa 个人电脑，它是全球第一款搭载图形用户界面（也就是我们所说的 GUI）的一台个人电脑，正是因为这款电脑的问世，让后期个人电脑大众化的普及得以实现。为什么它会带动个人电脑的普及化，是因为图形界面对于用户来说，在视觉上更容易接受，学习的成本也是大幅的下降。相信用过 MAC 系统的同学都会对苹果优秀的界面设计以及整体的交互体验，有比较深刻的感受。

手把手教你打造属于自己团队的前端小报系统

持续学习是每个工程师必备的素养，同样一个成长性的团队也同样需要这样一个持续学习的氛围。那么如何通过技术的手段来帮助团队培养持续学习的氛围呢？政采云前端小报因此应运而生，它主要包含投稿、汇总沉淀、定时投递三大核心模块，这样的一个系统可以让大家轻松的将自己喜欢的文章分享到团队内部，并且将文章进行分类沉淀，营造团队的知识库，方便大家查阅，同时小报系统也会在每周五进行定时推送，方便大家了解最新的技术动向，前端小报系统是一个帮助我们营造团队内部分享和学习氛围的得力帮手~

如何开发跨框架的组件

题主所在的业务中台团队，需要提供业务组件给不同的上层业务方使用，但因为一些历史遗留问题，不同业务线使用的框架不统一，包括 jQuery、React 、Vue 。为了满足不同业务方的需求，往往需要根据业务方使用的框架，开发对应框架的组件。

自定义 ESLint 规则，让代码持续美丽

制定代码规范肯定是需要的，那如何约束代码呢？规范文档宣讲，再凭借开发同学的自我修养？答案是：无法保证。 Code Review ？但难免也有落网之鱼。发版控制？能有效解决但是开发体验不好。如果我们在开发者写代码的时候就及时给到提示和建议，那开发体验就很棒了，而 ESLint 的自定义规则就可以实现在开发过程中给开发同学友好的提示。

ZooTeam 拍了拍你，来看看如何设计动态化表单

对于 ToB 业务而言，随着业务的不断壮大，接入的客户逐渐增加，相同页面的差异化的需求越来越多，尤其是在表单层面，小到多一个字段少一个字段这种简单的需求，大到整个页面不变的只剩下一些基础字段。一旦这种差异化需求随着业务量的增长而膨胀起来。代码中的 IF ELSE 越来越多，项目就越来越难以维护。基于这个问题，比较普遍的解决方案要么是项目拆分，要么相同项目的代码分割。这两种方案都有维护成本比较大的弊端，那么有没有更好点的解决方案呢。本文就带你了解一下动态化表单搭建。

分分钟教会你搭建企业级的 npm 私有仓库

npm 作为一种包管理工具，无论你是泛前端还是大前端都已经离不开它。它的出现方便了万千少年。让我们跨过了 Ctrl+C、Ctrl+V ，通过 ``npm install x` `的方式将别人的优秀代码模块引入到自己的项目中。这些优秀的模块能被共享的原因，一方面是有 npm 这么一个包管理工具，另外就是 npm 仓库。对于 npm 仓库，如果你还停留在使用 npm 或者 cnpm 这类官方源的情况下。那么你有必要想想如何搭建一个私有的 npm 仓库。本文从三个方面讲解企业级 npm 私有仓库搭建那些事儿，分分钟教会你。

文章列表