前端事件总线（Event Bus）是什么？前端事件总线的简单介绍
参考文章：https://www.pipipi.net/questions/13598.html 事件总线是对发布-订阅模式的一种实现，它是一种集中式事件处理机制，允许不同的组件之间进行彼此通信而又不需要相互依赖，达到一种解耦的目的。 发布订阅模式定义对象间一种一对多的依赖关系，使得每当一个对象改变状态，则所有依赖于它的对象都会得到通知并被自动更新。 发布订阅模式主要有两个角色： 发布方（Publ
HTML5中手势原理分析与数学知识的实践
在这触控屏的时代，人性化的手势操作已经深入了我们生活的每个部分。现代应用越来越重视与用户的交互及体验，手势是最直接且最为有效的交互方式，一个好的手势交互，能降低用户的使用成本和流程，大大提高了用户的体验。 拖动: drag 双指缩放: pinch 双指旋转: rotate 单指缩放: singlePinch 单指旋转: singleRotate 长按: tap 滑动: swipe 所有的手势都是基
如何用JS实现在网页上通过鼠标移动批量选择元素的效果？
简单说就是类似电脑桌面，通过鼠标选择多个图标的那种效果。如下： 监测外部容器的mousedown、mousemove、mouseup事件来进行选择判断，大致dom结构如下： <div class=\"test\"> <!--鼠标移动时显示的选择框--> <div class=\"move\"></div> <!-- 待选项 --> <div
记录一些在此之前不知道的Web API
首先回顾一下以前了解过的Web API（强确实强，但很少用到...） Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。 相关文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API 全屏 API 为使用用户的整个屏幕展
Canvas学习笔记，记录使用过程中遇到的一些问题
fill()，方法用于填充已有的闭合路径，假设有一个如下图的路径，默认情况下圆和方形都会被填充，最后的效果就是一个黑色的方形； 通过fillRule参数，可以指定填充的算法，决定点是在路径内还是在路径外。 允许的值： \"nonzero\": 非零环绕规则，默认的规则。 \"evenodd\": 奇偶环绕规则。 将填充规则设置为evenodd，绘制的结果会变为下面这样，通过这种方式可以实现反向裁剪。 通过
前端canvas基础复习，canvas学习笔记
最开始学html5的时候，曾特意了解过canvas，还记得当时为了搞明白canvas的api，绞尽脑汁了很多个日日夜夜。 但实际工作后用的非常少，到现在canvas的api忘的也差不多了。目前打算好好学一下canvas，尝试一下更多的可能性。 一些资料的收集： Canvas相关的框架的使用，小程序有自带的Canvas框架，还有Egret 、Phaser等；可视化数据的相关框架有：echarts、h
React 学习笔记，从入门到精通，持续记录
相关书籍：https://www.zhihu.com/pub/book/119565131 React Native：https://github.com/reactnativecn/react-native-guide Create React App：https://create-react-app.dev/ 最简易的 React 示例如下： const root = ReactDOM.cr
Typescript学习笔记，从入门到精通，持续记录
//安装 npm install -g typescript //编译 tsc hello.ts //初始化 tsc --init Typescript可以理解为带静态类型的Javascript； 布尔值，boolean 数值，number 字符串，string 空值，void 表示没有任何返回值的函数 Null 和 Undefined /* 先声明后使用 */ let a: string; a
- Typescript
- 友人a丶
- 2022-10-08
- 1297 热度
- 0评论
Node Puppeteer 该如何使用？相关知识点总结
Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包，用来模拟 Chrome 浏览器的运行。 中文文档：https://puppeteer.bootcss.com/ CDP 基于 WebSocket，利用 WebSocket 实现与浏览器内核的快速数据通道 CDP 分为多个域（DOM，Debugger，Network，Profiler，Console...）
Vue渲染函数该如何使用？有哪些需要注意的地方？
Vue的模板语法适用于绝大部分的需求场景（模板最终会被编译为渲染函数），在绝大多数情况下，Vue 推荐使用模板语法来创建应用。然而在某些使用场景下，我们真的需要用到 JavaScript 完全的编程能力，举例如下： 假设设计一个开源的后台管理系统，侧边栏菜单需要根据路由自动生成菜单，由于系统可能会被用于不同的功能需求。所以路由的层级、数量都是不确定的。 如果通过模板语法来写，假设路由最多只有三层，
不使用构建工具，如何对css进行模块化？
使用构建工具进行开发，最终通过构建工具打包编译出最终的前端代码是现在的大趋势，但是构建工具生产出来的大都是前后端分离的代码。如果对seo有要求，通过构建工具就不符合需求了（不考虑SSR，毕竟它局限于Node）； 在PHP的世界里还是有很多不分离的场景的（例如wordpress）。 对于html可以通过PHP自身的特性去拆分，对于JS 已经有了很多成熟的模块化方案。 那么对于css呢？ 这里的模块化
Vue项目开发过程中，该如何维护全局状态？
什么是状态？在代码的世界里，状态就是指数据，简单的理解：你现在的情绪状态是怎样的? “高兴”,“悲伤”，这就是描述你当前情绪状态的数据。 抽象到一个描述用户的Vue组件，当前登录的用户的头像和昵称，就是这个组件的状态（数据）； 从字面意思理解就是，在系统任意地方都可以调用的数据（类似全局变量的概念）。 全局变量，一般特指系统内任意代码位置都可以调用的变量； JS有很多实现全局变量，或者类似全局变量
Ant-Design-Vue 3.x 图标库如何实现自动引入？
Ant-Design-Vue升级到2.x以上的版本之后，自带的图标库就不支持通过给组件传递一个代表指定图标的属性来使用了。 <-- 显示Home图标 --> <a-icon type=\"home\" /> <template> <message-outlined :style=\"{fontSize: \'16px\', color: \'#08c\'}\" />
Stylelint该如何配置？Stylelint使用以及相关配置说明
官方网站：https://stylelint.io/ stylelin本体：https://www.npmjs.com/package/stylelint stylelint-config-standard 拓展配置：https://www.npmjs.com/package/stylelint-config-standard npm install --save-dev stylelint st
Eslint该如何配置？Eslint使用以及相关配置说明
Eslint在过往接触过的很多开源项目内都有它的身影，习惯一个人写代码了，总觉得它可有可无，但是归根结底，好处还是很多的。 可强制规范团队编码规范，让新旧组员编码习惯得到一致提升 可灵活定制团队编码风格，让预设规则符合新旧组员心理预期 增加项目代码的可维护性和可接入性，让新组员能快速适应项目的架构与需求 保障项目整体质量，可减少无用代码、重复代码、错误代码和漏洞代码的产生几率 中文官网：https
网页元素相交监测：Intersection Observer API
参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。 过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发
重新理解：什么是页面生命周期API？
简而言之，在此之前，Web网页在浏览器内可以无限期地保持运行状态。随着大量网页的运行，内存、CPU、电池和网络等关键系统资源可能会被超额使用，然后就会出问题。 虽然 Web一直有和生命周期相关的事件（例如load、unload和visibilitychange），但这些事件只允许开发人员响应用户发起的生命周期状态变化。为了让Web页面能够更加稳定的运行，浏览器需要一种主动回收和重新分配系统资源的方
Vue 2.7 “Naruto”发布，新特性介绍
2.7 是 Vue 2.x 的最终版本。在这个版本之后，Vue 2 进入了 LTS（长期支持），从现在开始持续 18 个月，并且将不再接收新功能。这意味着Vue 2 将在 2023 年底结束生命周期。 官方博客：https://blog.vuejs.org/posts/vue-2-7-naruto.html?continueFlag=24b18743108fc3e584f79dec07a79f02
Vite4新特性介绍，相较于Vite3有哪些新功能？
官方介绍更新日志：https://vitejs.dev/blog/announcing-vite3.html#dev-improvements Github更新日志：https://github.com/vitejs/vite/blob/v4.4.1/packages/vite/CHANGELOG.md Vite 不再支持 Node v12，因为它已经进入了 EOL 阶段。现在你必须使用 Node
Vue后台管理系统开发，相关代码的笔记。
从零开始开发后台管理系统，还是有很多值得记录的地方。构建工具Vite、使用Vue3。 /* * @author 友人a丶 * @date 2022-07-11 * @app Vue应用对象 * */ export default function (app) { /* * 指定要导入的文件目录 * 直接加载用{eager:true},懒加载用glob * */ const modules = im
Ant Design Vue自定义主题失效解决办法
antd 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，可以根据需求进行相应调整 。 @primary-color: #1890ff; // 全局主色 @link-color: #1890ff; // 链接色 @success-color: #52c41a; // 成功色 @warning-color: #faad14; // 警告色 @error-color: #f5
Pinia状态管理器学习笔记，持续记录
足够轻量，Pinia 重约 1kb，甚至会忘记它的存在！ 去除 Mutation ，Actions 支持同步和异步（Actions一个顶俩，写起来简洁）； 无需手动注册 Store，Store 仅需要时才自动注册。如果从不使用，则永远不会“注册”（省心）； 没有模块嵌套，只有 Store 的概念，Store 之间可以自由使用，更好的代码分割； Vue2 和 Vue3 都能支持； 支持大型项目迁移期
Vue2.x中使用composition API，平滑过渡Vue3
Vuejs官方出品：https://github.com/vuejs/composition-api/blob/HEAD/README.zh-CN.md 基于组合式API的一组实用函数：https://vueuse.org/guide/ npm install @vue/composition-api -D import Vue from \'vue\' import VueCompositionAP
PostCss学习笔记，持续记录
CSS 的隔离主要有两类方案，一类是运行时的通过命名区分，一类是编译时的自动转换 CSS，添加上模块唯一标识。 运行时的方案最典型的就是 BEM，它是通过 .block__element–modifier 这种命名规范来实现的样式隔离，不同的组件有不同的 blockName，只要按照这个规范来写 CSS，是能保证样式不冲突的。 但是这种方案毕竟不是强制的，还是有样式冲突的隐患。 编译时的方案有两种
Vite该如何使用？Vite学习笔记，持续记录
配置文档：https://cn.vitejs.dev/config/，基于ESM； 插件大全：https://github.com/vitejs/awesome-vite 通过插件支持低版本浏览器：https://github.com/vitejs/vite/tree/main/packages/plugin-legacy Vite使用scss预处理器：npm install sass -D，安装
Vue组件设计学习笔记，持续记录
组件化思想并不是前端独有的，但却是前端技术的延伸 任何软件开发过程，或多或少都有那么一些组件化的需求。 每个组件对应一个目录，组件所需的各种资源都在这个目录下就近维护；（最具软件工程价值） 页面上的每个独立的可视/可交互区域视为一个组件； 由于组件具有独立性，可以自由组合； 页面是组件的容器，负责组合组件形成功能完整的界面； 当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换 分子是由原
Xpath学习笔记，持续记录
很早之前就想研究研究，一直没有合适的时间，今天刚好没啥事，乘机瞧一瞧xpath的“庐山真面目”。 XPath全称XML路径语言（XML Path Language），它是一种用来确定XML文档中某部分位置的语言。XPath基于XML的树状结构，提供在数据结构树中找寻节点的能力。起初XPath的提出的初衷是将其作为一个通用的、介于XPointer与XSL间的语法模型。但是XPath很快地被开发者采用
Vue-Cli该如何使用？Vue-Cli学习笔记，持续记录
修改.Env环境变量文件之后，需要重新运行server才会生效。环境变量通过process.ENV访问。可以在项目根目录中放置下列文件来指定环境变量： .env # 在所有的环境中被载入 .local # 在所有的环境中被载入，但会被 git 忽略 .env. # 只在指定的模式中被载入 .env..local # 只在指定的模式中被载入，但会被 git 忽略 以 VUE_
SVG学习笔记，持续记录。
SVG是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象：矢量图形（vectorgraphicshape，例如：由直线和曲线组成的路径）、图像()、文本(text)。图形对象还可进行分组、添加样式、变换、组合等操作，特征集包括嵌套变换（）、剪切路径（）、alpha蒙板（）、滤镜效果（）、模板对象（）和其它扩展（）。 SVG 是使用 XML 来描述二维图形和绘
JS实用函数收集，持续记录
function getBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = e