MobX 简明教程
2019年11月12日 10:57:31原文链接：#16 导读：MobX 是一个优秀的响应式状态管理库，在流行的状态管理库 Redux 之外为我们提供了其他选择。如果你还没有尝试过 MobX，我强烈建议你继续阅读本文，并跟着示例动手实践体验一下。本文是 MobX 的入门教程，文章包含 MobX 的设计哲学、状态派生模型、核心API以及...
Written by whincwu. Github
constate 原理解析
2019年10月14日 05:13:06原文地址：#15 constate 介绍 constate 是一个基于 React Hooks 和 React Context 的轻量级状态管理库。 constate 的主要功能是将自定义 Hooks 的执行结果提升到 Context 中，利用 React Context 通信机制，把结果提供给子...
Web 前端项目必备配置
2019年07月30日 02:53:54本文介绍一些前端项目的通用配置及相关资源，以便你了解项目中常见配置的含义以及配置方式。 目录 .gitignore - 让 Git 提交时忽略文件 editorconfig - 让编辑器或IDEs保持一致的编码样式 commitzen - - 交互式生成 Angular 风格的 Git 提交消息 ...
Web 前端路由原理解析和实现
2019年05月12日 11:30:35原文链接：#13 在单页应用如此流行的今天，曾经令人惊叹的前端路由已经成为各大框架的基础标配，每个框架都提供了强大的路由功能，导致路由实现变的复杂。想要搞懂路由内部实现还是有些困难的，但是如果只想了解路由实现基本原理还是比较简单的。本文针对前端路由主流的实现方式 hash 和 history，提...
react-router 指引
2019年04月02日 10:24:08简单介绍 react-router 的总体组成，大概需要阅读 5 分钟。 react-router 是基于 react 封装的前端路由库，通过它可以实现 SPA 中的路由切换（不刷新页面的情况下进行页面切换）。react-router 是一组声明式导航组件的集合，意味着你可以像普通 UI 组件一样...
Vue 生命周期梳理
2018年12月10日 08:07:19目录 单组件生命周期 父子组件生命周期 使用 keep-alive 后的单组件生命周期 使用 keep-alive 后的父子组件生命周期 小结 组件化思维现在已得到广泛的认可，Vue 是围绕组件化构筑起来的框架。相比传统命令式 DOM 操作需要手动检查和处理 DOM 变化，Vue 以组件为单位，...
CSS 属性值语法
2018年11月14日 07:48:36W3C 使用了一套特别的语法来定义 CSS 的属性值，能让所有的 CSS 属性都用简明的方式表示。如果你曾看过 CSS 规范，你可能已经见过这套语法了。就像下面这样： <'text-shadow'> = none | [ <length>{2,3} && <color>? ]# 如果你不知道这些符...
H5 和小程序拍照图片旋转、压缩和上传
2018年09月29日 05:33:10最近接到一个“发表评论”的需求：用户输入评论并且可以拍照或从相册选择图片上传，即支持图文评论。需要同时在 H5 和小程序两端实现，该需求处理图片的地方较多，本文对 H5 端的图片处理实践做一个小结。项目代码基于 Vue 框架，为了避免受框架影响，我将代码全部改为原生 API 的实现方式进行说明，同时...
H5 实现保存图片的采坑记录
2018年08月06日 08:29:50需求背景 一句话描述需求：答题并根据答案生成你是什么食物，可长按保存图片。 体验地址：https://personal.webank.com/s/hj/op-mall/food-festival/index.html 问题1：字体文件太大 活动页用到了特殊的中文字体“汉仪小麦”，完整的字体文件约 ...
程序变量命名的几种叫法
2018年03月16日 11:58:01计算机语言很多，无论哪种语言编写代码时都会遇到变量命名、方法命名等问题，网上关于代码命名风格的讨论已经多到无法形容了，甚至成为了程序员的一种价值观。今天不讨论命名风格孰优孰劣，仅整理下已有的命名风格作为了解，方便相互之间沟通。 camel case （驼峰式） 特点：名称中间没有空格和标点，除第一...
银行卡号/身份证号/手机号的组成及校验
2018年02月26日 12:01:22本文总结了常见的银行卡号、身份证号和手机号的组成及校验方法，并提供了完整的示例代码。 1. 银行卡号（Bank Card Number） 平时生活中钱包里面充满了各种各样的卡，如信用卡、借记卡、礼品卡、会员卡和VIP卡等等，这些卡号并非随意定制的，都遵循国际标准 ISO/IEC 7812，开发过程...
10 分钟理解 Redux
2018年02月26日 12:00:09redux 是什么？ redux 是一个前端状态管理库。 为什么要搞个状态管理库来增加复杂度和学习成本呢？这样讲没错，简单的项目用 redux 就是折腾自己，我也不建议你用，但是大一点项目，尤其是多人协作时，就完全是另一回事了。 随着 JavaScript 单页应用开发日趋复杂，JavaScript...
React组件库主题设计
2018年02月25日 11:53:26基于 React 的 UI 组件库层出不穷，作为组件库很重要的一个功能就是实现主题换肤功能。通过组件库提供的主题定制接口，用户只需要修改一些组件的 UI 参数，就可以达到修改整个组件库样式。 目标：可定制性强，并且易学易用。 一种简单的主题设计方案 为了支持根据主题改变外观，组件库中每个组件都要求暴...
自己动手实现 ES6 Promise
2018年02月25日 11:47:29前言 为了增强对 ES6 Promise工作方式的理解，我实现了一个自己的ES6Promise类，接口与 ES6 的Promise类一致（包含构造函数、then、catch、resolve、reject）， 并且符合 Promise/A+ 规范（通过了规范的全部测试用例） 。下面从简单开始，一步步实...