ZooTeam

文章列表

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

数据建模是一种用于定义和分析数据的要求和其需要的相应支持的信息系统的过程。随着前端页面的交互变得更加细腻复杂，原本存放于服务端的状态放置在了前端，类似 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 私有仓库搭建那些事儿，分分钟教会你。

基于 Web 端的人脸识别身份验证

近些年来，随着生物识别技术的逐渐成熟，基于深度学习的人脸识别技术取得了突破性进展，准确率显著提高。现阶段，人脸识别身份验证作为非常重要的身份验证方式，已被广泛的应用于诸多行业和领域。本文将介绍基于 Web 浏览器端的人脸识别身份验证的整体方案，以及重点讲解如何在 Web 浏览器中实现人脸自动采集。

如何实现高性能的在线 PDF 预览

我们在程序设计中，遇到请求数据较大、任务执行时间过长等场景时很容易想到通过数据切分、任务分片等方式来提升程序在系统中的执行&响应效果。本文介绍的问题便是将大的 PDF 文件拆分，然后根据用户的交互行为按需加载，从而达到提升用户在线阅读体验的目的。

JS 图片压缩

说起图片压缩，大家想到的或者平时用到的很多工具都可以实现，例如，客户端类的有图片压缩工具 PPDuck3， JS 实现类的有插件 compression.js ，亦或是在线处理类的 OSS 上传，文件上传后，在访问文件时中也有图片的压缩配置选项，不过，能不能自己撸一套 JS 实现的图片压缩代码呢？当然可以，那我们先来理一下思路。

前端文档站点搭建方案

为了将前端解决方案沉淀下来，群策群力，共同丰富优化性能的知识库，我们需要文档站点，一个可以实时编辑，自动部署的文档站点。本文提供了一个不用 GitLab CI 实现文档站点内容修改后自动更新的思路。

可能是最全的 “文本溢出截断省略” 方案合集

在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文试图通过编码实践，给出一些答案。

写给前端工程师的 Serverless 入门

Serverless 是前端圈近两年比较火热的词汇，但其第一次被提出已经是 7 年前的事情，那么什么是 Serverless 服务，其架构由哪些部分组成，又有什么优缺点，本文将一一道来。