最新文章Cypress 使用指南
什么是 CypressCypress 是一个现代化的前端端到端（End-to-End，E2E）测试框架。它被设计用于对 Web 应用程序进行自动化测试，可以模拟用户在真实环境中与应用程序的交互行为。
以下是 Cypress 的一些关键特点和优势：
简单易用: Cypress 具有简洁而直观的 API，使得编写和维护测试用例非常容易。
强大的调试能力: Cypress 提供了丰富的调试工具，开发人员可以通过断点、控制台日志和实时命令行等方式方便地调试测试用例。
可见即可信: Cypress 在测试过程中会记录并生成视频，可以可视化地查看每个测试用例的执行过程，方便回放和排查问题。
为什么要用 Cypress?
JavaScript 技术栈: Cypress 是以 JavaScript 为技术栈编写的，而我们团队 BCS 端都是使用 JavaScript 技术栈为主，切换为以 JavaScript 为主的自动化测试框架是一件低成本的事情。
简化测试流程: Cypress 提供了一个全面的测试解决方案，可以覆盖从用户界面到后端服务器的整个应用程序。它集成了测试框架、断言库和模拟工具，使得 ...
npm 别名---让小明变成小红
12345npm i lodash@npm:wuhu # 这样就把 lodash 的名称配置成了 wuhu# 实际使用一般来说 node-sass 是业界毒瘤,用 dart-sass 就可以替换掉 node-sassnpm install node-sass@npm:dart-sass# 如果你使用的是 yarnyarn add node-sass@yarn:dart-sass
发布-订阅模式
什么是发布-订阅模式以我们使用过的 documeng.body.addEventListener(“click”,function(){}) 为例，这样的就是发布-订阅模式的具体实现。我们订阅了 documeng.body 上的 click 事件，当被点击的时候 body 节点便会向订阅者发布者消息。
如果用生活中的例子举例，那就是我们订阅微信公众号，公众号发送消息，订阅的用户就会接收到消息。
基于以上的例子，我们总结出发布订阅模式的三要素：
一个订阅者
一个发布者
一个处理 订阅和发布的中间人
接下来让我们来实现一个发布-订阅模式。我们规定 listen-订阅 trigger-发布 -remove 取消订阅
一个简单的发布订阅模式调用的形式如下:
123456salesOffices.listen(function (price) { console.log("价格", price);});salesOffices.trigger(100);salesOffices.remove(100);
具体实现如下:
12345678910111 ...
未读
Vue Cli 配置
引入 cdnvue.config.js
12345678910111213141516171819202122232425262728293031323334353637const isProduction = process.env.NODE_ENV === "production";const cdn = { // 开发环境 dev: { css: [], js: [], }, // 生产环境 build: { css: ["//lib.baomitu.com/swiper/7.4.1/swiper-bundle.css"], js: [ "//lib.baomitu.com/vue/3.2.26/vue.cjs.js", "//lib.baomitu.com/vuex/4.0.0/vuex.cjs.min.js", "//lib.baomitu.com/vue-router/4.0.0/v ...
未读
Vue3-Setup语法糖
<script setup></script> 是一种编译时语法糖，用于在单文件组件中使用组合式 API，如果你同时使用单文件组件和组合式 API，建议使用该语法。
它与普通语法相比，代码更加简洁、性能更加强悍、更好的 TS 支持。
1npm install -g @vue/cli
1234567891011121314<script setup>// 此处代码将会被编译为 setup 函数代码// 也就是说此处代码将会在组件每次创建实例时执行// 在内部声明的顶级变量和函数都可以在模板中你直接使用const msg = "Hello Vue3 setup";function log() { console.log(msg);}</script><template> <div @click="log">{{ msg }}</div></template>
12345678910< ...
JavaScript 小技巧
1.sleep 延迟函数1234567891011121314function sleep(delay) { var start = new Date().getTime(); while (new Date().getTime() - start < delay) { continue; }}function test() { console.log("111"); sleep(2000); console.log("222");}test();
2.获取 URL 参数1234decodeURI("%E5%95%8A%E5%93%88%E5%93%88"); // 解码中文// window.location.search 获取 URL 参数let params = new URLSearchParams("?project=js&type=1").get("type");console.l ...
JavaScript 高级
01.call, apply 和 bind 的区别call 的使用方式：123456789101112131415161718192021222324252627//#region call// 定义一个对象let character = { name: "派蒙", weapon: [], // 得到一把武器 getWeapon: function (weapon, weapon2) { this.weapon = [weapon, weapon2]; },};let character2 = { name: "行秋", weapon: [],};console.log(character);// 调用方法获取了一把护摩character.getWeapon("护摩", "薙草之稻光");console.log(character);// character2也想得到一把武器,但是没有这个方法获得.character1表示可以把 ...
未读
Nuxt 笔记
Nuxt 是什么?Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。
我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。
Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。
除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。
我们相信这个命令所提供的功能，是向开发集成各种微服务（Microservices）的 Web 应用迈开的新一步。
作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。
目录结构Nuxt.js 的默认应用目录架构提供了良好的代码分层结构，适用于开发或大或小的应用。当然，你也可以根据自己的偏好组织应用代码。
pages 目录Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由 ...
未读
React-hooks
什么是 hooks?Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
我们先来看一个例子,这是传统的 class 组件的
12345678910111213141516171819import React from "react";class index extends React.component { state = { msg: "你好", }; updateMsg = () => { this.setState({ msg: "真好", }); }; render() { <div> <span>{this.state.msg}</span> <button onClick={this.updateMsg} ...
未读
React-常用库
5 个用于 React 项目的延迟加载库1. react-lazyloadreact-lazyload 可用于延迟加载 React 应用程序中的任何类型的组件。它是 React 社区中最流行的延迟加载库之一，支持装饰器和服务器端渲染。其特点如下：
具有一组属性，使用户能够自定义组件的功能。
提供诸如 forceCheck 之类的实用程序来显示隐藏的内容，这些内容在没有调整大小或滚动事件的情况下变得可见。
开箱即用支持水平延迟加载。
只为所有延迟加载的组件实现两个事件监听器，进一步优化性能。
GitHub：github.com/twobin/reac…
2. react-lazy-loadreact-lazy-load 是一个 React 组件，可用于以可预测的方式延迟加载内容。它相对较快，具有最小的包大小（缩小为 6KB）。其特点如下：
自动检测滚动容器，例如带有滚动条的
，因此甚至可以在滚动容器内使用。
允许用户设置阈值以从视口的任何一侧开始内容加载，使用诸如 offsetVertical、offsetHorizontal、offsetTop、offset ...
