艾前端

摘要： 性能优化的目的是为了实现资源的快速加载和响应。性能优化前，需要先分析性能，目的是分析出包含页面渲染、网络传输和文件加载等时间指标，对该页面进行评估分析。找出影响性能的主要因素和瓶颈，对此给出性能优化解决方案。 1. 性能分析 1.1. Chrome 浏览器的 Performance Chrome 浏 阅读全文

摘要： Nginx 是一种轻量级、高性能、低内存的 Web 服务器和反向代理服务器。 1. 正向代理和反向代理 正向代理：客户端向服务器发送请求，并指定目标服务器地址，然后由代理服务器和原始服务器通信，转交请求并获得响应，再返回给客户端。正向代理隐藏了真实的客户端，使真实的客户端对服务器不可见。 反向代理： 阅读全文

摘要： 编译工具 Babel Babel 主要有三个功能： 转义 ES6 为 ES5，保证新语法也可以在旧版本浏览器中运行。 通过 polyfill 方式在目标环境中添加缺失特性。 源码转换。 1. 安装 Babel （1）生成 package.json mkdir babel-note && cd bab 阅读全文

摘要： package.json 文件 每个前端项目中都有 package.json 文件，它是用于声明依赖的 npm 包配置文件。 1. 生成 package.json 文件 yarn init -y { "name": "package", "version": "1.0.0", "descriptio 阅读全文

摘要： JavaScript 使用 JavaScript 的正则表达式是由 RegExp 对象表示的，同时也可以使用正则表达式字面量。 1. 使用 RegExp 对象 let pattern = new RegExp("pattern", "flags"); pattern 是字符串形式的正则表达式模式。f 阅读全文

摘要： 常用案例 1. 匹配邮箱地址 /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ 2. 匹配 URL /^(https?|ftp):\/\/(-\.)?([^\s\/?\.#-]+\.?)+(\/[^\s]*)?$/ 3. 匹配日期（YYYY-MM- 阅读全文

摘要： 运算符优先级 正则表达式从左到右进行计算，并遵循优先级顺序，这与算术表达式非常类似。 相同优先级的从左到右进行运算，不同优先级的运算先高后低。各种正则表达式运算符的优先级从最高到最低顺序： 序号 字符 含义 1 \ 转义符 2 (), (?:), (?=), [] 圆括号和方括号 3 *, +, ? 阅读全文

摘要： 断言 正则表达式的断言是一种特殊的模式匹配技术，用于在匹配时对字符串进行条件性的预测。断言不会消耗输入字符串，仅仅是在匹配的位置上进行条件判断。断言分为正向断言和负向断言，分别用于描述匹配位置前面或后面的条件。 正则表达式的断言有 4 种形式： (?=pattern) -- 零宽正向先行断言：匹配位 阅读全文

摘要： 修饰符 在正则表达式中，修饰符是用来修改搜索模式的标志，添加在正则表达式的末尾，以控制匹配的方式。格式为：/pattern/flags。pattern 为正则表达式，flags 为修饰符。 正则表达式的修饰符可以单独使用，也可以组合使用，它们提供了更灵活的匹配选项，适应不同的需求。 1. g - 全 阅读全文

摘要： 元字符 元字符在正则表达式中扮演着重要的角色，通过组合使用它们，能构建复杂的模式来匹配和处理文本。 序号 字符 含义 实例 1 . 匹配除换行符以外的任意单个字符 a.b 能匹配 "aab"、"axb"，但不匹配 "a\nb" 2 ^ 匹配字符串的开头 ^abc 能匹配 "abc"，但不匹配 "aa 阅读全文

摘要： 介绍 正则表达式 (Regular Expression，简称 RegExp) ，是一种文本模式匹配工具，可以匹配普通字符、特殊字符等。它提供了一种灵活且强大的方式来查找、替换、验证和提取文本数据。它可以应用于各种编程语言，如 JavaScript、Python、Java、PHP 等。 正则表达式在 阅读全文

摘要： 可以通过原生 JS 获取本地视频的时长，不需要借助第三方插件。 实现步骤如下： 使用 input[type=file]，设置上传文件控件，限制上传类型为 video/mp4，指定上传视频。 通过监听 change 事件，获取到原视频。 使用 FileReader 对象，用于读取 File 对象，并通 阅读全文

摘要： 关于微信安卓端网页字体适配的通知 微信安卓版 7.0.10 版本起，网页的字体会跟随微信设置里的字体大小更改而变化。 当用户修改微信客户端字体大小后，微信公众号网页的适配就会变得非常繁琐，Android 系统设备有 8 级字体大小，IOS 系统设备有 7 级字体大小，尤其将字体放大到最大一级后，页面 阅读全文

摘要： 有时候，当用户离开网页时，需要向服务器提交一些用户行为的统计信息。这时，传统的请求方式，数据可能无法发送，因为浏览器已经把页面卸载了。 为了能够成功发出请求，并让服务器处理，需要解决两个问题： 监听微信 H5 页面的卸载； 在页面卸载事件里，在浏览器后台保持 HTTP 连接，继续发送数据。可靠的发送 阅读全文

摘要： 微信公众号页面提供了转发给朋友的功能，如果没有设置隐藏“发送给朋友”，就可以转发给朋友。 ``` wx.hideMenuItems({ menuList: [ 'menuItem:share:appMessage' // 发送给朋友 ], // 要隐藏的菜单项 }); ``` 转发给朋友后，朋友可能 阅读全文