whinc.github.io
whinc.github.io copied to clipboard
whinc
个人站点，包含技术笔记、博客、作品、工具等
>原文链接：https://github.com/whinc/blog/issues/18 > 在编程中匹配字符最常见的工具是正则表达式，此外还有一种 glob 模式经常用于匹配文件路径，glob 模式在某些方面与正则表达式功能相同，但是他们各自有着不同的语法和约定，今天就一起学习下 glob 模式。 内容目录： - [介绍](#介绍) - [基础语法](#基础语法) - [扩展语法](#扩展语法) - [与 regexp 的差异](#与regexp的差异) - [JavaScript API](#JavaScriptAPI) - [应用例子](#应用例子) - [参考](#参考) # 介绍 根据[维基百科](https://en.wikipedia.org/wiki/Glob_(programming))的介绍，在计算机编程中 glob...
>原文链接：https://github.com/whinc/blog/issues/13 >在单页应用如此流行的今天，曾经令人惊叹的前端路由已经成为各大框架的基础标配，每个框架都提供了强大的路由功能，导致路由实现变的复杂。想要搞懂路由内部实现还是有些困难的，但是如果只想了解路由实现基本原理还是比较简单的。本文针对前端路由主流的实现方式 hash 和 history，提供了原生JS/React/Vue 共计六个版本供参考，每个版本的实现代码约 25~40 行左右（含空行）。 ## 什么是前端路由？ 路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。 在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。 ## 如何实现前端路由？ 要实现前端路由，需要解决两个核心问题：...
**目录** - 动机 & 目标 - `useHash` - 读写 hash 值 - `useHashSearchParams` - 读写 hash 的查询参数 - `useHashSearchParamsJSON` - 按 JSON 格式读写 hash 的查询参数 - 小结 ## 动机 &...
## redux 是什么？ redux 是一个前端状态管理库。 为什么要搞个状态管理库来增加复杂度和学习成本呢？这样讲没错，简单的项目用 redux 就是折腾自己，我也不建议你用，但是大一点项目，尤其是多人协作时，就完全是另一回事了。 随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state(状态)。 这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。 管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model...
基于 React 的 UI 组件库层出不穷，作为组件库很重要的一个功能就是实现主题换肤功能。通过组件库提供的主题定制接口，用户只需要修改一些组件的 UI 参数，就可以达到修改整个组件库样式。 目标：可定制性强，并且易学易用。 ## 一种简单的主题设计方案 为了支持根据主题改变外观，组件库中每个组件都要求暴露一个`style`属性，以便外部可以通过传入不同样式控制组件的外观。 ```javascript ``` 为了切换主题，先定义黑白两套主题。不同主题之间只是样式取值不一样，数据结构必须保持一致。每种主题详细定义了每个组件的`style`值。 ```javascript const DarkTheme = { ButtonStyle: {...}, InputStyle: {...} } const LightTheme = { ButtonStyle: {...},...
计算机语言很多，无论哪种语言编写代码时都会遇到变量命名、方法命名等问题，网上关于代码命名风格的讨论已经多到无法形容了，甚至成为了程序员的一种价值观。今天不讨论命名风格孰优孰劣，仅整理下已有的命名风格作为了解，方便相互之间沟通。 ## camel case （驼峰式）  特点：名称中间没有空格和标点，除第一个单词外后面的单词首字母均大写。 如果第一个单词首字母大写，称之为`upper camel case`（`CamelCase`，大驼峰式），例如`"GetUserName"`。 如果第一个单词首字母小写，称之为`lower camel case`（`camelCase`，小驼峰式），例如`"getUserName"`。 >`upper camel case`还有一个称呼`Pascal case` ## snake case （蛇式）  特点：名称中间的标点被替换成下划线（`_`）。 如果所有单词都小写，称之为`lower snake case`（小蛇式），例如`"get_user_name"`。 如果所有单词都大写，称之为`upper snake case`（大蛇式），例如`"GET_USER_NAME"`。 ##...
## 需求背景 一句话描述需求：答题并根据答案生成你是什么食物，可长按保存图片。 体验地址：  ## 问题1：字体文件太大 活动页用到了特殊的中文字体“汉仪小麦”，完整的字体文件约 6.9MB，而实际活动页只用到了很少的一部分字体，全部加载会增加整个页面的加载时间，需要对字体进行按需裁剪。 使用 [fontmin](https://github.com/ecomfe/fontmin) 工具进行字体裁剪，将要裁剪的文字集合保存到文本文件`keep.txt`中（有重复文字没关系会自动去重），通过下面命令裁剪字体文件： ```bash # input.ttf 输入的字体文件 # output 裁剪后的字体输出目录，包含了多种字体格式 fontmin -t "$(cat keep.txt)" input.ttf output ``` 在 CSS 中引入裁剪后的字体文件，下面这段代码是 fontmin...
最近接到一个“发表评论”的需求：用户输入评论并且可以拍照或从相册选择图片上传，即支持图文评论。需要同时在 H5 和小程序两端实现，该需求处理图片的地方较多，本文对 H5 端的图片处理实践做一个小结。项目代码基于 Vue 框架，为了避免受框架影响，我将代码全部改为原生 API 的实现方式进行说明，同时项目代码中有很多其他额外的细节和功能（预览、裁剪、上传进度等）在这里都省去，只介绍与图片处理相关的关键思路和代码。小程序的实现方式与 H5 类似，不再重述，在文末附上小程序端的实现代码。  ## 拍照 使用``标签，`type`设为`"file"`选择文件，`accept`设为`"image/*"`选择文件为图片类型和相机拍摄，设置`multiple`支持多选。监听`change`事件拿到选中的文件列表，每个文件都是一个`Blob`类型。 ```html function onFileChange (event) { const files = Array.prototype.slice.call(event.target.files) files.forEach(file => console.log('file name:', file.name)) }...
**目录** 1. 单组件生命周期 1. 父子组件生命周期 1. 使用 keep-alive 后的单组件生命周期 1. 使用 keep-alive 后的父子组件生命周期 1. 小结 组件化思维现在已得到广泛的认可，Vue 是围绕组件化构筑起来的框架。相比传统命令式 DOM 操作需要手动检查和处理 DOM 变化，Vue 以组件为单位，使用响应式数据自动更新 DOM，在组件生命周期中处理数据和 DOM 变化的各个阶段。基于 Vue 构建的交互界面始于一个根组件，将组件有组织的层层嵌套形成一颗组件树构建起复杂的网页应用。组件层层嵌套后，组件的生命周期方法调用的顺序变得很重要，尤其在处理一些需要父子组件联动的场景。本文先分析单组件的生命周期方法的执行时机，再考虑存在父子组件时，组件生命周期方法的执行顺序变化。 ## 单组件生命周期 单组件生命周期方法执行顺序参考...
>简单介绍 react-router 的总体组成，大概需要阅读 5 分钟。 react-router 是基于 react 封装的前端路由库，通过它可以实现 SPA 中的路由切换（不刷新页面的情况下进行页面切换）。react-router 是一组声明式导航组件的集合，意味着你可以像普通 UI 组件一样，在 JSX 中使用路由组件，这非常符合 react 的风格。 ## 安装 react-router 项目包含四个 npm 包，按需选择安装。 * react-router：是实现路由的核心包，其余的几个包都依赖此包。服务端渲染时，只需要引入此包即可。 * react-router-dom：react-router 的 react...