分类： 前端

基于 navigator.userAgent 的 User Agent 检测

function isMobileDevice () {
  const ua = navigator.userAgent || navigator.vendor || window.opera;
  const mobileRegex = /android|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile|windows phone|phone|webos|kindle|tablet/i;
  return mobileRegex.test(ua.toLowerCase());
}

通过 navigator.userAgent 获取浏览器标识字符串‌。正则表达式匹配移动端关键词（如 android、iphone、mobile 等）‌。返回 true 表示移动端，false 表示 PC 端。

‌基于 navigator.userAgent 的插件方案‌

插件：mobile-detect.js

插件通过解析 navigator.userAgent 中的设备标识符（如 Android、iPhone、Windows 等）实现设备判断‌。 支持更细分的设备类型检测（如平板、手机、PC）‌。

import MobileDetect from 'mobile-detect';

const md = new MobileDetect(navigator.userAgent);

if (md.mobile()) {
  console.log("移动端登录设备（手机/平板）");
} else if (md.tablet()) {
  console.log("平板设备");
} else {
  console.log("PC 端设备");
}

构建作用

构建工具就是将源代码转换成可执行的 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 的一些内置功能均是以插件的形式提供。

核心概念

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

三大关键组成部分

1. 调用栈(Call Stack)：

   • 执行同步代码的地方
   • 后进先出(LIFO)结构

2. 任务队列(Task Queues)：

   • 宏任务队列：setTimeout、setInterval、I/O 等
   • 微任务队列：Promise.then、MutationObserver 等

3. 事件循环机制：

   • 不断检查调用栈和任务队列
   • 决定何时执行哪个任务

执行流程

1. 从宏任务队列取出一个任务执行（如 script 整体代码）
2. 执行过程中：
   • 同步代码立即执行
   • 遇到异步操作，注册相应回调
3. 当前宏任务执行完毕：

• 立即执行所有微任务
• 如果微任务产生新微任务，继续执行直到队列清空

4. 必要时进行UI 渲染
5. 从宏任务队列取下一个任务，开始新循环

执行顺序示例

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

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

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

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

/* 输出顺序：
1. 同步代码
2. 同步代码
3. 微任务
4. 宏任务
*/

重要特点

• 微任务优先级高于宏任务：每执行完一个宏任务，就会清空微任务队列
• 避免阻塞：长时间同步代码会阻塞事件循环
• 不同环境差异：Node.js 与浏览器实现有细微差别

理解事件循环是掌握 JavaScript 异步编程的基础，有助于编写高效、无阻塞的代码。

数字

判断数字

^[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})?$

备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里