Vue 和 React 的区别
Vue 和 React 的区别看这里
简单说说 Vue 和 React 的区别青铜级只要真正了解一些，或者用过两个框架开发，就一定能说上来的一些语法层面：
Vue API 多，React API 少
Vue 双向绑定，修改数据自动更新视图，而 React 单向数据流，需要手动 setState
Vue template 结构表现分离，React 用 jsx 结构表现融合，html/css都可以写到js里
都可以通过 props 进行父子组件数据传递，只是 Vue props 要声明，React 不用声明可能直接使用
Vue 可以用插槽，React 是万物皆可 props
Vue2 利用基本都是 Mixin，React 可以用高阶函数、自定义 hook 实现
Vue 的 frgments、hook 到 Vue3 才有，Vue 还有丰富的指令，过滤器
都支持服务端渲染，都有虚拟 DOM，数据驱动，组件化开发，响应式，组件通信，生命周期，Diff，都有状态管理 Vuex/Pinia、Redux/Mobx，等等等等….
白银级1、可以加一些偏感受方面的，比如： ...
JS 前端常用工具方法
JS 前端常用工具方法邮箱验证
12345export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test( s );};
手机号码
123export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s);};
电话号码
123export const isPhone = (s) => { return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s);};
是否 url 地址
123export const isURL = (s) => { return /^http[s]?:\/\/.*/.test(s);};
是否字符串
...
什么是 Proxy
什么是 Proxy通常，当谈到JavaScript语言时，我们讨论的是ES6标准提供的新特性，本文也不例外。 我们将讨论JavaScript代理以及它们的作用，但在我们深入研究之前，我们先来看一下Proxy的定义是什么。
MDN上的定义是：代理对象是用于定义基本操作的自定义行为（例如，属性查找，赋值，枚举，函数调用等）。
换句话说，我们可以说代理对象是我们的目标对象的包装器，我们可以在其中操纵其属性并阻止对它的直接访问。 你可能会发现将它们应用到实际代码中很困难，我鼓励你仔细阅读这个概念，它可能会改变你的观点。
术语handler
包含陷阱（traps）的占位符对象。
traps
提供属性访问的方法。这类似于操作系统中捕获器的概念。
target
代理虚拟化的对象。(由代理对象包装和操作的实际对象)
在本文中，我将为 get 和 set 陷阱 提供简单的用例，考虑到最后，我们将看到如何使用它们并包含更复杂的功能，如API。
语法和用例1let p = new Proxy(target, handler);
将目标和处理程序传递给Proxy构造函数，这样就创建了一个proxy对象。现在， ...
reduce的妙用
reduce 函数可以根据需要进行累加、过滤、分组、映射等操作，是一个非常强大的数组方法。在数据处理时使用的非常频繁，很多复杂的逻辑如果用reduce去处理，都非常的简洁，在实际的开发工作过程中，积累了一些常见又超级好用的 reduce 技巧的代码片段，筛选了如下 10 个，以供大家参考
reduce 介绍reduce 是数组的方法，可以对数组中的每个元素依次执行一个回调函数，从左到右依次累积计算出一个最终的值。其语法为：
1arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
其中，callback 是每个元素执行的回调函数，其包含 4 个参数：
accumulator：累积器，即上一次回调函数执行的返回值。
currentValue：当前元素的值。
index：当前元素的下标。
array：原始数组。
initialValue 是可选的，表示累积器的初始值。
reduce 函数的执行过程如下：
1、如果没有提供 initialValue，则将数组的第一个元素作为累积器 ...
从零开始配置webpack
从零开始配置webpack(基于webpack 4 和 babel 7版本)webpack 核心概念:
Entry: 入口
Module:模块，webpack中一切皆是模块
Chunk:代码库，一个chunk由十多个模块组合而成，用于代码合并与分割
Loader:模块转换器，用于把模块原内容按照需求转换成新内容
Plugin:扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情
Output: 输出结果
webpack流程:webpack启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有Module.每找到一个Module,就会根据配置的Loader去找出对应的转换规则，对Module进行转换后，再解析出当前的Module依赖的Module.这些模块会以Entry为单位进行分组，一个Entry和其所有依赖的Module被分到一个组也就是一个Chunk。最好Webpack会把所有Chunk转换成文件输出。在整个流程中Webpack会在恰当的时机执行Plugin里定义的逻辑。
下面我们开始从零开始配置一个支持打包图片 ...
9个你不知道的 CSS 伪元素
9个你不知道的 CSS 伪元素CSS 伪元素是一项强大的功能，它允许您为所选元素的特定部分设置样式，而无需额外的 JavaScript 代码。虽然许多开发人员都熟悉常用的伪元素，如 ::before 和 ::after，但还有一些其他元素经常被忽视或未得到充分利用。
1. ::selection 伪元素::selection 伪元素以用户选择的文本部分为目标。它提供了一种将样式应用于所选文本并自定义其外观的方法。
例子：
1234::selection { background-color: yellow; color: red;}
在上面的代码中，当用户在页面上选择文本时，它将以黄色背景和红色文本颜色突出显示。
2.::first-letter伪元素::first-letter 伪元素允许您设置块级元素的第一个字母的样式。当您想将特殊格式应用于段落或标题的初始字符时，它会派上用场。
例子：
1234p::first-letter { font-size: 2em; color: red;}
在上面的代码片段中，每个段落的第一个字母 ...
H5 调用支付宝小程序 Alipay JSAPI
H5 调用支付宝小程序 Alipay JSAPI参考链接 官方文档：。demo：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script ...
图片加载不出来，使用默认图片的三种方法
vue 自定义指令，图片加载不出来，使用默认图片的三种方法一、常规解决方法我们都知道，img 标签支持 onerror 事件，在装载文档或图像的过程中如果发生了错误，就会触发 onerror 事件。可以使用一张提示错误的图片代替显示不了的图片。
1<img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';">
当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个 logoError.png 图片。也就是说图片存在则显示 logo.png，图片不存在将显示 logoError.png。但是，注意哦，这里有个大坑哦，如果 logoError.png 也不存在，则会继续触发 onerror，导致死循环，页面卡死。而且，就算图片存在，但网络很不通畅，也可能触发 onerror。当然，解决办法是有的：
123456789<img src="images/logo.png&quo ...
js倒计时
JS 实现倒计时功能html
12345678910111213141516171819202122232425262728<html> <head> <meta charset="UTF-8" /> <title>30分钟倒计时</title> </head> <body> <div id="timer" style="color: red"></div> </body> <script type="text/javascript"> var oBox = document.getElementById("timer"); var maxtime = 30 * 60; function CountDown() { if (maxtime >= 0) { minu ...
js window 页面事件
js window 页面事件123456789101112131415161718192021222324252627282930window.addEventListener("load", function (e) { console.log("load");});window.addEventListener("resize", function () { console.log("resize", document.body.offsetWidth); // console.log("clientWidth", document.body.clientWidth);});window.addEventListener("scroll", function (e) { console.log("scroll");});window.addEventListener(" ...