zz130428的博客

正则表达式是一组由字母和符号组成的特殊文本，它可以用来从文本中找出满足你想要的格式的句子。通俗的讲就是校验字符串是否满足规则或者在文本查找满足要求的内容。我在这里给大家举个简单的例子。如果我需要对一组qq号（字符串）进行检验，例如，要求qq号必须是6位到20位之内的，不能以0开头，还必须全是数字。按照正常来说，我需要写一个比较复杂的检测方法。像下面这个是不是看起来比较麻烦。

定义和作用网络爬虫是自动抓取互联网信息的程序或脚本。它们被广泛用于搜索引擎、数据挖掘等领域，能够从公开网页抓取数据，为不同领域如金融分析、市场趋势预测等提供数据支持。在一定程度上代替了手工访问网页，实现自动化采集互联网的数据，从而更高效地利用互联网中的有效信息。历史沿革网络爬虫技术起源于 1990 年代初的搜索引擎。1990 年，Archie 搜索引擎的出现标志着网络爬虫研究的开始。

Flexbox布局是一种一维布局方式，适合用于在行内或列内排列子项。开发者通过display: flex;实现Flexbox布局，之后可以利用各种属性调整子项在容器内的行为。Grid布局是一种二维布局可配置方式，允许开发者同时设置行与列的结构。它使得布局设计更加直观且易于维护。

分享 20 个最佳 CSS 动画库它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。1.Animate.css一个开箱即用型的跨浏览器动画库，可供你在项目中使用。2.Magic Animations CSS3一组简单的动画，可以包含在你的网页或应用项目中。3.Animista - On-Demand CSS Animations Library

众所周知，jQuery 是一个跨主流浏览器的 JavaScript 库，它封装了 JavaScript 的常用功能代码，简化了 HTML DOM 操作、事件处理、动画设计和 Ajax 交互等任务。jQuery 中的 Ajax 是对 XMLHttpRequest 或 ActiveXObject（IE9以下版本中）的封装，它提供了一种更加方便和强大的方式来与服务器进行数据交换，从而实现在不重新加载整个页面的情况下，对网页进行局部更新。

自>= umi@2起，dva的整合可以直接通过来配置。按目录约定注册 model，无需手动 app.model文件名即 namespace，可以省去 model 导出的 namespace key无需手写 router.js，交给 umi 处理，支持 model 和 component 的按需加载内置 query-string 处理，无需再手动解码和编码内置 dva-loading 和 dva-immer，其中 dva-immer 需通过配置开启开箱即用，无需安装额外依赖

在一些场景中，无法做服务端的 html fallback，即让每个路由都输出 index.html 的内容，那么就要做静态化。对于需要在 html 里管理 publicPath 的场景，比如在 html 里判断环境做不同的输出，可通过配置。有些静态化的场景里，是不会自动读索引文件的，比如支付宝的容器环境，那么就不能生成这种 html 文件，，那就匹配不上了，而又没有定义 fallback 的路由，比如 404，那就会显示空白页。为什么我本地开发是好的，部署后就没反应了，而且没有报错？

Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。

umi 允许在.umirc.js或config/config.js（二选一，.umirc.js优先）中进行配置，支持 ES6 语法。为简化说明，文档里只会出现。区分不同环境来指定配置。，所以通常需要配置到。

倾向于使用配置式的路由，可以配置 .umirc.(ts|js) 或者 config/config.(ts|js) 配置文件中的 routes 属性，此配置项存在时则不会对 src/pages 目录做约定式的解析。可能需要针对不同路由输出不同的全局 layout，umi 不支持这样的配置，但你仍可以在 layouts/index.js 对 location.path 做区分，渲染不同的 layout。然后 umi 会用 ./routes/PrivateRoute.js 来渲染 /list。

‌Umi‌是一个基于React的前端框架，它提供了一套完整的开发工具和脚手架，帮助开发者更高效地构建单页应用(SPA)。以下是使用Umi的一些基本步骤和技巧。

一个基于webkit引擎、展现web页面的控件Android 4.4前：Android Webview在低版本 & 高版本采用了不同的webkit版本的内核Android 4.4后：直接使用了Chrome内核Android去调用JS的代码JS去调用Android的代码二者沟通的桥梁是WebView通过WebView的loadUrl（）通过WebView的evaluateJavascript（）通过WebView的addJavascriptInterface（）进行对象映射。

在TypeScript中,接口是一种用于定义对象类型的方式。它描述了一个对象应该具有的属性和方法,但不包含实现细节。接口可以看作是一种"契约",定义了对象应该遵守的规则。使用interface。

通过上述示例，我们可以看到Ajax和JSON如何协同工作，以实现无需重新加载页面即可更新网页部分内容的功能。这种技术极大地提高了Web应用程序的用户体验和交互性。随着Web开发技术的不断进步，Ajax和JSON的使用将更加广泛和深入。JSON数据格式易于阅读和编写，同时也易于JavaScript解析。对象，它是浏览器提供的用于与服务器进行通信的API。1、创建XMLHttpRequest对象。2、设置请求的方法、URL和异步标志。3、定义请求完成后的回调函数。

1.在已打开的代码编辑器窗口单击右键点击Code Linter，或在工程管理窗口中鼠标选中单个或多个工程文件/目录，右键选择Code Linter > Full Linter执行代码全量检查2.通过git 提交，可在commit界面右下角点击齿轮图标，选择Incremental Linter执行增量检查不在工程根目录新建code-linter.json5文件的情况下，Code Linter默认会检查@performance/recommended 和。

要实现，往上拉，拉到最底部时，显示更多的数字，需要在goods.json文件中配置onReachBottomDistance。onReachBottomDistance的意思是，当拉到距离底部距离多少rpx时开始触发加载更多。滑动加载数据，在js代码中是固定的函数名 onReachBottom。###json中配置###小程序上拉，显示更多数据。重新建个tarbar。

实现样式1、底部容器设置定位，按钮和文本容器利用z-index设计容器层级，并使按钮定位在右下角；2、设置高度=指定隐藏行数*一行文本的高度，此处一行高度为21px，指定两行隐藏，最大高度就为42px；3、设置按钮背景为白色，覆盖在文本上方；

对于这个API谷歌有提供示例工程：在线使用：https://googlechromelabs.github.io/serial-terminal/项目地址：https://github.com/GoogleChromeLabs/serial-terminal使用 Web Serial API 访问串口非常方便，目前来说唯一的问题是这还是实验性质的功能，可能之后接口还会变动，需要根据实际情况进行调整。

组件库，同一组件在不同平台的功能一致，但是样式有所不同，如果仍然使用上面的方式进行打包，显然很难满足不同平台对不同样式的需求，因此我开始调研相关的解决方案。发现在诸如 ant-design 这样的知名组件库中，React 组件的书写和样式的书写是分开的，用户在使用过程中，除了需要引入 React 组件之外，还需要统一引入打包好的 css 样式文件。到这里，其实基本上完成了我的需求，只需要将不同主题的各个样式文件统一到对应的入口 less 文件中，之后统一运行编译命令即可生成对应主题的 css 文件。

可以通过给module.red {color: red;

1、删除 —— 可以删除任意数量的项，只需要指定2个参数：要删除的第一项的位置和要删除项的项数。2、插入 —— 可以向指定位置插入任意数量的项，只需要提供3个参数：插入起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，一直任意多个项。3、替换 —— 可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需要指定3个指定参数：起始位置、要删除的项数和要插入的任意数量项。插入的项数是不必与删除的项数相等。

常见的前端性能优化方法包括减少HTTP请求，合并和压缩资源文件，使用CDN加速，使用缓存，优化图片，延迟加载，使用懒加载，使用异步加载，优化DOM操作，使用CSS Sprites，优化JavaScript代码等。浏览器缓存是指浏览器在访问网页时，将网页的资源（如HTML、CSS、JavaScript、图片等）保存在本地磁盘中，以便在下次访问相同网页时直接从本地加载，提高访问速度。跨域请求是指在浏览器中，通过JavaScript发起的请求，请求的目标与当前网页所在的域名不一致。

第一种方式会对服务器造成很大的压力，因为即使WebSocket连接正常，也要定时发送心跳包，从而消耗服务器资源。WebSocket心跳机制是必要的，它可以使WebSocket连接保持长连接，避免断开连接的情况发生。WebSocket心跳机制的原理是利用心跳包及时发送和接收数据，保证WebSocket长连接不被断开。WebSocket需要心跳，因为WebSocket连接可能会因为长时间没有数据传输而被断开，而心跳机制可以及时检测连接状态，保持WebSocket长连接。

Webpack是目前比较物流的前端构建工具，它基于入口，用不同的Loader来处理不同的文件Webpack的核心概念Entry：入口，Webpack执行构建的第一步将从Entry开始，可抽象成输入。告诉Webpack要使用哪个模块作为构建项目的起点，默认为./src/index.jsoutput：出口，告诉Webpack在哪里输出它打包好的代码以及如何命名，默认为./distModule：模块，在Webpack里一切皆模块，一个模块对应着一个文件。Webpack会从配置的Entry开始递归找出

存在网络忽然断开的情况，这时服务器端并没有触发onclose的事件。服务器会继续向客户端发送多余的信息，这些数据会丢失。为了解决上面的问题，就需要⼀种机制来检测客户端和服务端是否处于正常的连接状态。因此就有了websocket的心跳机制。（1）websocket在连接后，如果长时间服务端和客户端不发消息，服务端会把websocket给断开。1、创建webSocket。2、websocket事件。3、WebSocket方法。

源码位置：src\platforms\web\runtime\index.js。方法，但发现本文件中并没有此方法，但仔细可以看到文件下方定义了很多初始化方法。源码位置：src\core\instance\lifecycle.js。源码位置：src\core\instance\render.js。源码位置：src\core\instance\index.js。源码位置：src\core\instance\state.js。源码位置：src\core\instance\init.js。的挂载，因此无法访问到。

2022年02月23日发布第一篇博客。​获得了一些粉丝的关注获得了不少正向的反馈，如赞、评论、阅读量等同时还认识了许多技术大神不叫猫先生、经海路大白狗......​创作已然是生活的一部分在有限的精力下，可以很好平衡创作和工作学习

当一个组件在显示与消失过程中存在过渡动画，可以很好的增加用户的体验。属性，让元素在两个状态之间平滑过渡，从而得到相应的动画效果。发生变化的时候，先保存移除的节点，当动画结束后才真正移除。在日常开发中，页面切换时的转场动画是比较基础的一个场景。可以帮助我们方便的实现组件的入场和离场动画。，然后开始执行动画，当动画结束后，移除两个。插入的节点，先渲染dom，然后再做动画。删除的节点，先做动画，然后再删除dom。当有一组动画的时候，就可将这些。当动画执行结束后，会移除两个

良好使用key属性是性能优化的非常关键的一步，注意事项为：key 应该是唯一的key不要使用随机值（随机数在下一次 render 时，会重新生成一个数字）使用 index 作为 key值，对性能没有优化react判断key。当拥有key的时候，react根据key属性匹配原有树上的子元素以及最新树上的子元素，像上述情况只需要将000元素插入到最前面位置当没有key的时候，所有的li标签都需要进行修改同样，并不是拥有key值代表性能越高，如果说只是文本内容改变了，不写key反而性能和效率更高

性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能。请求后，并不知道后续还有 9 次更新操作，因此会马上执行流程，最终执行 10 次流程。，意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实。跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行。第二个参数是个对象，里面存着标签的一些属性，例如 id、class 等。节点，浏览器没这么智能，收到第一个更新。执行，返回值是一个对象，也就是虚拟。

组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件组件的优势降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单。

我们都听过知其然知其所以然这句话那么不知道是否思考过new Vue()这个过程中究竟做了些什么？过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等首先找到vue的构造函数源码位置：src\core\instance\index.js是用户传递过来的配置项，如等常用的方法vue构建函数调用_init方法，但我们发现本文件中并没有此方法，但仔细可以看到文件下方定定义了很多初始化方法首先可以看initMixin方法，发现该方法在Vue原型上定义了_init方法。

当浏览器尝试加载一个 Web 页面时，它会检查页面是否包含 CSP 头，并根据该头信息确定允许加载哪些资源。CSP 通过限制 Web 应用程序能够加载和执行的内容，来减少恶意攻击的成功率。需要注意的是，在实际应用中，Web 开发人员需要谨慎设置 CSP 规则，以确保不会限制正常的 Web 应用程序功能。此外，开发人员也需要定期审核 CSP 规则，以确保其仍然适用于最新的 Web 应用程序版本。总之，CSP 的原理是通过限制 Web 应用程序能够加载和执行的内容，来减少恶意攻击的成功率。

Electron 的架构采用了 Chromium 和 Node.js 的组合方式，将 web 技术栈和底层系统功能完美地结合起来，提供了一种灵活、可扩展的桌面应用程序开发方式。对于前端开发人员来说，它提供了一种全新的开发方式和编程思路，为构建高质量的桌面应用程序提供了更多的便利和选择。与传统的桌面应用程序不同，Electron 应用程序使用 HTML、CSS 和 JavaScript 技术栈来实现界面设计和业务逻辑，并且具有良好的跨平台性能和扩展性。

在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理vue。vue中修饰符分为以下五种：表单修饰符事件修饰符鼠标按键修饰符键值修饰符v-bind修饰符

动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬。（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观。background-size属性常用来调整背景图片的大小，主要用于设定图片本身。通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。当我们设置背景图片时，图片是会以左上角对齐，但是是以。

继承（inheritance）是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类”继承的优点继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码在子类别继承父类别的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获得与父类别不同的功能虽然JavaScript并不是真正的面向对象语言，但它天生的灵活性，使应用场景更加丰富

并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费。进入环境的变量所占用的内存就不能释放，当变量离开环境时，则将其标记为“离开环境“然后，它会将所有在上下文中的变量，以及被在上下文中的变量引用的变量的标记去掉。这很麻烦，所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为"垃圾回收机制"随后垃圾回收程序做一次内存清理，销毁带标记的所有值并收回它们的内存。语言中，因为是手动管理内存，内存泄露是经常出现的事情。

AJAX全称(Async Javascript and XML)即异步的JavaScript和XML，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页Ajax的原理简单来说通过对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面流程图如下：Ajax请求数据流程与“领导想找小李汇报一下工作”类似，上述秘书就相当于对象，领导相当于浏览器，响应数据相当于小李浏览器可以发送HTTP。

引擎会尝试在当前作用域下去寻找该变量，如果没找到，再到它的上层作用域寻找，以此类推直到找到该变量或是已经到了全局作用域。可见上述代码中在函数内部声明的变量或函数，在函数外部是无法访问的，这说明在函数内部定义的变量或者方法只是函数作用域。词法作用域，又叫静态作用域，变量被创建时就确定好了，而非执行阶段确定的。把作用域比喻成一个建筑，这份建筑代表程序中的嵌套作用域链，第一层代表当前的执行作用域，顶层代表全局作用域。变量的引用会顺着当前楼层进行查找，如果找不到，则会往上一层找，一旦到达顶层，查找的过程都会停止。