分类：前端

【微信小程序】学习笔记（持续更新）
微信小程序的框架主要包括以下几个核心部分：

1. WXML（WeiXin Markup Language）
- 作用：用于描述小程序的结构，类似于HTML。
- 特点：支持数据绑定、条件渲染、列表渲染等功能。
2. WXSS（WeiXin Style Sheets）
- 作用：用于描述小程序的样式，类似于CSS。
- 特点：支持大部分CSS特性，并扩展了尺寸单位（如rpx）以适应不同屏幕。
3. JavaScript
- 作用：用于处理小程序的逻辑。
- 特点：支持ES6语法，提供丰富的API，如网络请求、数据存储、设备信息等。
4. WXS（WeiXin Script）
- 作用：一种脚本语言，可以在WXML中直接使用。
- 特点：类似于JavaScript，但运行在视图层，适合处理一些简单的逻辑。
5. JSON
- 作用：用于配置小程序的页面、窗口表现、网络超时时间等。
- 特点：简洁易读，支持注释（但在实际使用中需去除注释）。
6. 小程序框架API
- 作用：提供丰富的API，帮助开发者实现各种功能。
- 分类：
  - 网络API：如wx.request、wx.uploadFile等。
  - 媒体API：如wx.chooseImage、wx.playVoice等。
  - 数据缓存API：如wx.setStorage、wx.getStorage等。
  - 位置API：如wx.getLocation、wx.openLocation等。
  - 设备API：如wx.getSystemInfo、wx.getNetworkType等。
  - 界面API：如wx.showToast、wx.showModal等。
7. 小程序生命周期
- 作用：管理小程序的启动、运行、销毁等过程。
- 主要生命周期函数：
  - onLaunch：小程序初始化时触发。
  - onShow：小程序启动或从后台进入前台时触发。
  - onHide：小程序从前台进入后台时触发。
  - onError：小程序发生脚本错误时触发。
8. 页面生命周期
- 作用：管理页面的加载、显示、隐藏、卸载等过程。
- 主要生命周期函数：
  - onLoad：页面加载时触发。
  - onShow：页面显示时触发。
  - onReady：页面初次渲染完成时触发。
  - onHide：页面隐藏时触发。
  - onUnload：页面卸载时触发。
9. 组件
- 作用：提供丰富的UI组件，帮助开发者快速构建界面。
- 常见组件：
  - 基础组件：如view、text、image、button等。
  - 表单组件：如input、picker、slider等。
  - 导航组件：如navigator。
  - 媒体组件：如video、audio等。
  - 地图组件：如map。
  - 画布组件：如canvas。
10. 自定义组件
- 作用：允许开发者封装可复用的UI组件。
- 特点：支持组件间的通信、生命周期管理、样式隔离等。
11. 事件系统
- 作用：用于处理用户交互事件。
- 常见事件：
  - 触摸事件：如bindtap、bindlongpress等。
  - 表单事件：如bindinput、bindchange等。
  - 滚动事件：如bindscroll等。
12. 路由
- 作用：管理页面之间的跳转。
- 常见API：
  - wx.navigateTo：保留当前页面，跳转到新页面。
  - wx.redirectTo：关闭当前页面，跳转到新页面。
  - wx.navigateBack：返回上一个页面。
  - wx.switchTab：跳转到tabBar页面。
13. 数据绑定
- 作用：将数据与视图进行绑定，实现数据的动态更新。
- 特点：支持单向数据流，数据变化会自动更新视图。
14. 模块化
- 作用：支持将代码拆分为多个模块，便于管理和复用。
- 特点：支持CommonJS模块化规范，使用require引入模块。
15. 云开发
- 作用：提供云端一体化的开发能力，包括数据库、存储、云函数等。
- 特点：无需搭建服务器，开发者可以直接使用云端资源。
16. 插件
- 作用：允许开发者使用第三方插件，扩展小程序的功能。
- 特点：插件可以独立开发、发布，供其他小程序使用。
17. 分包加载
- 作用：将小程序代码拆分为多个包，按需加载，减少首次启动时间。
- 特点：支持主包和多个分包，分包可以独立加载。
18. 性能优化
- 作用：提升小程序的运行效率和用户体验。
- 常见优化手段：
  - 减少setData调用：避免频繁更新视图。
  - 使用自定义组件：提高代码复用性和维护性。
  - 图片优化：压缩图片，使用合适的图片格式。
  - 分包加载：减少首次启动时的代码量。
19. 安全
- 作用：保障小程序的安全运行。
- 常见安全措施：
  - 数据加密：对敏感数据进行加密存储。
  - 权限控制：限制API的调用权限。
  - 代码混淆：防止代码被反编译。
20. 调试工具
- 作用：帮助开发者调试小程序。
- 特点：提供实时预览、代码调试、性能分析等功能。
2017-11-20
【Webpack】学习笔记
构建作用

构建工具就是将源代码转换成可执行的 JavaScript、CSS、HTML 代码，包括以下内容：
- 代码转换：将 TypeScript 编译成 JavaScript、将 SCSS 编译成 CSS 等；
- 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等；
- 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码，让其异步加载；
- 模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件；
- 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器；
- 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过；
- 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。
基本概念
- Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
- Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
- Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
- Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
- Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。
- module，chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字：我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。
- filename 指列在 entry 中，打包后输出的文件的名称；
- chunkFilename 指未列在 entry 中，却又需要被打包出来的文件的名称。
- webpackChunkName 是为预加载的文件取别名，
- webpackPrefetch 会在浏览器闲置下载文件，
- webpackPreload 会在父 chunk 加载时并行下载文件。
- hash 计算与整个项目的构建相关；
- chunkhash 计算与同一 chunk 内容相关；
- contenthash 计算与文件内容本身相关。（注：chunkhash, contenthash不能同时和HMR使用）
- source-map 大而全，啥都有，就因为啥都有可能会让 webpack 构建时间变长，看情况使用；
- cheap-module-eval-source-map 这个一般是开发环境（dev）推荐使用，在构建速度报错提醒上做了比较好的均衡；
- cheap-module-source-map 一般来说，生产环境是不配 source-map 的，如果想捕捉线上的代码报错，我们可以用这个。
流程概括

Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：
1. 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
2. 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
3. 确定入口：根据配置中的 entry 找出所有的入口文件；
4. 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
5. 完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
在以上过程中，Webpack 会在特定的时间点广播特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

流程细节

Webpack 的构建流程可以分为以下三大阶段：
1. 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
2. 编译：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。
3. 输出：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统。
关键的配置
- context：上下文。
- entry：入口文件，是所有依赖关系的入口，webpack 从这个入口开始静态解析，分析模块之间的依赖关系。
- output：打包输出的配置。
- devtools：SourceMap 选项，便于开发模式下调试。
- watch：监听模式，增量更新，开发必备！
- profile：优化。
- cache：webpack构建的过程中会生成很多临时的文件，打开 cache 可以让这些临时的文件缓存起来，从而更快的构建。
- module.loaders：如前文介绍，loaders 用来对文件做预处理。这样 webpack 就可以打包任何静态文件。
- resolve.alias：模块别名，这样可以更方便的引用模块。
- plugins：如前文介绍，webpack 的一些内置功能均是以插件的形式提供。
2016-07-11
前端知识点汇总（持续更新）
HTML5：

新增标签元素

header, footer, aside, nav, section, canvas, video, audio…

新增 Input 类型

date, datetime, email, number, range, tel, color…

本地存储

生命周期
- cookie：可设置过期时间
- localStorage：永久存储
- sessionStorage：关闭标签页自动清除
存储大小
- cookie：4KB
- sessionStorage：5MB – 10MB
- localStorage：5MB – 10MB
作用域
- cookie：可设置 Domain 和 Path，控制哪些域名和路径可以访问
- localStorage：同源策略下的所有窗口和标签页共享
- sessionStorage：仅当前标签页有效，即使同源的其他标签页也无法访问
<script> 加载方式
- 默认同步阻塞 HTML 解析
- defer 延迟执行直至DOM解析完后
- async 异步引入，下载完成后立即执行
CSS3：

新增属性
- 边框：border-radius, box-shadow, border-image
- 背景：background-size, background-origin
- 文字：text-shadow
- transfrom：translate, rotate, scale, skew, matrix
自定义字体：@font-face

动画

rgba 颜色 / 线性渐变
```
.test {
  background-color: rgba(0, 0, 0, 0.5);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
```
flex 布局

媒体查询

命名规范

BEM

JS：

小数精度处理
- 使用 toFixed 取后几位小数
- 把小数转为整数再进行运算
- 使用精度运算库，如：big.js
for…in 和 for…of 的区别
- for-in 历遍对象，通常获取 key（类似 Object.keys）
- for-of 历遍可迭代对象，如 Array、Map、Set 等
任务队列（Task Queue）
- 先执行同步再执行异步
- 核心作用：处理异步代码的调度和执行
- 宏任务：setTimeout、setInterval、I/O 等
- 微任务：Promise 回调（.then / .catch/ .finally）、MutationObserver 回调等
- 微任务优先级高于宏任务
- 调用 fetch 会同步执行并立即返回一个 promise
call | apply | bind

均用于改变函数内部 this 的指向
```
const obj = { name: "Alice" };

function greet() {
  console.log(`Hello, ${this.name}!`);
}

greet.call(obj);      // Hello, Alice!
greet.apply(obj);     // Hello, Alice!
const boundGreet = greet.bind(obj);
boundGreet();         // Hello, Alice!
```
ES：

有哪些新特性？

变量声明

let 和 const

箭头函数

简化函数语法，自动绑定 this

模板字符串
```
`Hello ${name}`
```
解构赋值
```
const { age, name } = user;
const [first, second] = [1, 2];
```
默认参数

扩展运算符
```
const arr1 = [1, 2];
const arr2 = [...arr1, 3]; // [1, 2, 3]; // 合并数组
const objCopy = { ...originalObj }; // 合并对象
```
Promise 和异步处理

Promise.all – 等待所有 Promise 对象都执行完成 Promise.race – 返回第一个完成的 Promise（无论成功失败） Promise.any – 返回第一个成功的 Promise

模块化：import 和 export

Set, Map
```
let s = new Set(); s.add(‘a’).add(‘b’)
let m = new Map(); m.set(’age’, 16)
```
数组的 includes，检查是否包含某元素

async / await

Generator 函数的语法糖，省去手动 next() 的步骤

Object.values() 和 Object.entries()
```
Object.values({ a: 1, b: 2 }); // [1, 2]
Object.entries({ a: 1, b: 2 }); // [["a", 1], ["b", 2]]
```
字符串填充：padStart() 和 padEnd()
```
"5".padStart(2, "0"); // "05"
```
空值合并运算符
```
const value = input ?? "default";
```
动态导入模块
```
const module = await import('./module.js')
```
replaceAll 替换所有匹配的子串
```
"a.b.c".replaceAll(".", "-"); // "a-b-c"
```
require 和 import
- 分别属于 CommonJS 和 ES 两种不同模块系统
- require 动态加载，运行时解析
- import 静态加载，编译时解析
- Proxy
  - 数据绑定与响应式系统：通过 set 拦截属性赋值，触发副作用（如重新渲染）
  - 属性访问控制和校验：限制对象属性的访问或赋值
微信小程序：

OpenID & UnionID

OpenID
- 用户在当前小程序中的唯一标识
- 用途：用于识别用户在当前小程序内的身份（如用户数据存储、业务逻辑处理）
- 获取：通过 wx.login() 获取 code，后端用 code 调用微信接口换取 OpenID
UnionID
- 用户在微信的唯一标识
- 用途：实现跨小程序、公众号用户身份统一
- 获取：通过 wx.getUserInfo() 获取 encryptedData, iv，发送到后端解密，或者通过按钮触发授权
性能优化：
- 文本压缩（css, js, html）
- 图片压缩
- 合并资源（合并文本、雪碧图）
- 图片懒加载
- 合并请求
- 缓存资源（设置浏览器头、设置 html head）
- 使用 CDN
- gzip 压缩
- 减少 DOM 操作
- CSS 样式置顶、JS 脚本置底
- 防抖和节流
  - 防抖：保证N秒内执行一次，如果N秒内触发将再执行并重新计算时间
  - 节流：保证N秒内只能触发一次
2016-01-16
【JS】事件循环(Event Loop)
核心概念

事件循环是 JavaScript 处理异步操作的机制，它使得单线程的 JS 能够实现非阻塞 I/O 操作。

三大关键组成部分
1. 调用栈(Call Stack)：
  - 执行同步代码的地方
  - 后进先出(LIFO)结构
2. 任务队列(Task Queues)：
  - 宏任务队列：setTimeout、setInterval、I/O 等
  - 微任务队列：Promise.then、MutationObserver 等
3. 事件循环机制：
  - 不断检查调用栈和任务队列
  - 决定何时执行哪个任务
执行流程
1. 从宏任务队列取出一个任务执行（如 script 整体代码）
2. 执行过程中：
  - 同步代码立即执行
  - 遇到异步操作，注册相应回调
3. 当前宏任务执行完毕：
- 立即执行所有微任务
- 如果微任务产生新微任务，继续执行直到队列清空
1. 必要时进行UI 渲染
2. 从宏任务队列取下一个任务，开始新循环
执行顺序示例
```
console.log('1. 同步代码'); // 同步

setTimeout(() => console.log('4. 宏任务'), 0); // 宏任务

Promise.resolve().then(() => console.log('3. 微任务')); // 微任务

console.log('2. 同步代码'); // 同步

/* 输出顺序：
1. 同步代码
2. 同步代码
3. 微任务
4. 宏任务
*/
```
重要特点
- 微任务优先级高于宏任务：每执行完一个宏任务，就会清空微任务队列
- 避免阻塞：长时间同步代码会阻塞事件循环
- 不同环境差异：Node.js 与浏览器实现有细微差别
理解事件循环是掌握 JavaScript 异步编程的基础，有助于编写高效、无阻塞的代码。
2015-08-07

【CSS】常用样式（持续更新）

CSS Hack

书写顺序：Chrome -> FF -> IE8 -> IE7 -> IE6

*	版本
_	IE6以下
\9	IE6+
*	IE7 以下
*+	IE7
\0	IE8+ 和 Opera

Media Queries

<link rel="stylesheet" href="big.css" media="screen and (min-width: 641px)">
<link rel="stylesheet" href="small.css" media="screen and (max-width: 640px)">
<link rel="stylesheet" href="style.css" media="screen and (min-width:640px) and (max-width:900px)">

Flex水平垂直居中

{
  display: flex;
  align-item: center;
  justify-content: center;
}

屏幕自动居中

{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  transform: translate(-50%, -50%);
}

单行文本溢出

{
  text-overflow: ellipsis;
  white-space: nowrap;
    overflow: hidden;
}

多行文本溢出

{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

ios平滑滚动效果

{
  -webkit-overflow-scrolling: touch;
}

清除浮动

:after {
  display: block;
  clear: both;
  content: " ";
}

字体&规范

OOCSS、SMACSS、BEM

移动端字体

{
font-family: Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", sans-self;
}

PC端字体

{
font-family: Tahoma, Arial, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", Simsun, sans-self;
}

移动 & PC 字体

{
font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Microsoft YaHei","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
}

中文两端对齐

{
  text-justify: inter-ideograph;
  text-align: justify;
}

省略文字

{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

文字适应浏览器宽度
```css
{
  white-space: pre-wrap;
  word-wrap: break-word;
}
```

### 自动换行
```css
{
  white-space: normal;
  word-wrap: break-word;
  word-break: normal;
}
```

### 三角形
```css
{
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 50px solid red;
}
```

### 自定义字体
```css
@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.eot');
  src: url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.woff') format('woff'),
  url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.svg#iconfont') format('svg');
}
```

### 移动端1px
```css
.box {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 20px 0;
}
.box::after {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: red;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}
```

### calc 函数
```css
#div {
  position: absolute;
  left: 50px;
  width: calc( 100% / (100px * 2) );
  border: 1px solid black;
}
```

### css 禁止用户选择
```css
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
```

### 消除 transtration 闪屏
```css
.css {
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
```

### 去掉Chrome中input获得焦点时的颜色边框
```css
input {
  outline: none;
}
```

2008-01-02

【JS】常用正则表达式
数字

判断数字
```
^[0-9]*$
```
n位的数字
```
^\d{n}$
```
至少n位的数字
```
^\d{n,}$
```
m-n位的数字：
```
^\d{m,n}$
```
零和非零开头的数字
```
^(0|[1-9][0-9]*)$
```
非零开头的最多带两位小数的数字
```
^([1-9][0-9]*)+(\.[0-9]{1,2})?$
```
带1-2位小数的正数或负数
```
^(\-)?\d+(\.\d{1,2})$
```
正数、负数、和小数
```
^(\-|\+)?\d+(\.\d+)?$
```
有两位小数的正实数
```
^[0-9]+(\.[0-9]{2})?$
```
有1~3位小数的正实数
```
^[0-9]+(\.[0-9]{1,3})?$
```
非零的正整数
```
^[1-9]\d*$
^([1-9][0-9]*){1,3}$
^\+?[1-9][0-9]*$
```
非零的负整数
```
^\-[1-9][]0-9"*$
^-[1-9]\d*$
```
非负整数
```
^\d+$
^[1-9]\d*|0$
```
非正整数
```
^-[1-9]\d*|0$
^((-\d+)|(0+))$
```
非负浮点数
```
^\d+(\.\d+)?$
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
```
非正浮点数
```
^((-\d+(\.\d+)?)|(0+(\.0+)?))$
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
```
正浮点数
```
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$
^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
```
负浮点数
```
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$
^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
```
浮点数
```
^(-?\d+)(\.\d+)?$
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$
```
字符

汉字
```
^[\u4e00-\u9fa5]{0,}$
```
英文和数字
```
^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
```
长度为3-20的所有字符
```
^.{3,20}$
```
由26个英文字母组成的字符串
```
^[A-Za-z]+$
```
由26个大写英文字母组成的字符串
```
^[A-Z]+$
```
由26个小写英文字母组成的字符串
```
^[a-z]+$
```
由数字和26个英文字母组成的字符串
```
^[A-Za-z0-9]+$
```
由数字、26个英文字母或者下划线组成的字符串
```
^\w+$ 或 ^\w{3,20}$
```
中文、英文、数字包括下划线
```
^[\u4E00-\u9FA5A-Za-z0-9_]+$
```
中文、英文、数字但不包括下划线等符号
```
^[\u4E00-\u9FA5A-Za-z0-9]+$
^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
```
可以输入含有^%&’,;=?$\"等字符
```
[^%&',;=?$\x22]+
```
禁止输入含有~的字符
```
[^~\x22]+
```
常用验证

Email地址
```
^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
```
域名
```
[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?
```
Internet URL
```
[a-zA-z]+://[^\s]*
^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
```
国内电话号码(0511-4405222、021-87888822)
```
\d{3}-\d{8}|\d{4}-\d{7}
```
身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X
```
(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)
```
帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
```
^[a-zA-Z][a-zA-Z0-9_]{4,15}$
```
密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
```
^[a-zA-Z]\w{5,17}$
```
强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)
```
^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$
```
强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)
```
^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
```
日期格式
```
^\d{4}-\d{1,2}-\d{1,2}
```
一年的12个月(01～09和1～12)
```
^(0?[1-9]|1[0-2])$
```
一个月的31天(01～09和1～31)
```
^((0?[1-9])|((1|2)[0-9])|30|31)$
```
xml文件
```
^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
```
中文字符的正则表达式
```
[\u4e00-\u9fa5]
```
双字节字符
```
[^\x00-\xff]
```
(包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))

空白行的正则表达式
```
\n\s*\r
```
(可以用来删除空白行)

HTML标记的正则表达式
```
<(\S*?)[^>]*>.*?|<.*? /> 
```
( 首尾空白字符的正则表达式：^\s|\s$或(^\s)|(\s$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)

中国邮政编码
```
[1-9]\d{5}(?!\d)
```
(中国邮政编码为6位数字)

IP地址
```
((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))
```
钱的输入格式：
- 有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：
```
  ^[1-9][0-9]*$
```
- 这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：
```
  ^(0|[1-9][0-9]*)$
```
- 一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：
```
  ^(0|-?[1-9][0-9]*)$
```
- 这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧。下面我们要加的是说明可能的小数部分：
```
  ^[0-9]+(.[0-9]+)?$
```
- 必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：
```
  ^[0-9]+(.[0-9]{2})?$
```
- 这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：
```
  ^[0-9]+(.[0-9]{1,2})?$
```
- 这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：
```
  ^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
```
- 1到3个数字,后面跟着任意个逗号+3个数字,逗号成为可选,而不是必须：
```
  ^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
```
备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
2007-01-02

分类： 前端

【微信小程序】学习笔记（持续更新）

1. WXML（WeiXin Markup Language）

2. WXSS（WeiXin Style Sheets）

3. JavaScript

4. WXS（WeiXin Script）

5. JSON

6. 小程序框架API

7. 小程序生命周期

8. 页面生命周期

9. 组件

10. 自定义组件

11. 事件系统

12. 路由

13. 数据绑定

14. 模块化

15. 云开发

16. 插件

17. 分包加载

18. 性能优化

19. 安全

20. 调试工具

【Webpack】学习笔记

构建作用

基本概念

流程概括

流程细节

关键的配置

前端知识点汇总（持续更新）

HTML5：

新增标签元素

新增 Input 类型

本地存储

<script> 加载方式

CSS3：

新增属性

自定义字体：@font-face

动画

rgba 颜色 / 线性渐变

flex 布局

媒体查询

命名规范

JS：

小数精度处理

for…in 和 for…of 的区别

任务队列（Task Queue）

call | apply | bind

ES：

有哪些新特性？

变量声明

箭头函数

模板字符串

解构赋值

默认参数

扩展运算符

Promise 和 异步处理

模块化：import 和 export

Set, Map

数组的 includes，检查是否包含某元素

async / await

Object.values() 和 Object.entries()

字符串填充：padStart() 和 padEnd()

空值合并运算符

动态导入模块

replaceAll 替换所有匹配的子串

require 和 import

微信小程序：

OpenID & UnionID

性能优化：

【JS】事件循环(Event Loop)

核心概念

三大关键组成部分

执行流程

执行顺序示例

重要特点

【CSS】常用样式（持续更新）

CSS Hack

Media Queries

Flex水平垂直居中

屏幕自动居中

分类：前端

`<script>` 加载方式

`for…in` 和 `for…of` 的区别

`call` | `apply` | `bind`

`Promise` 和异步处理

模块化：`import` 和 `export`

`Set`, `Map`