-
使用 BEM 规范设置 CSS 类名
BEM 提供语义化和结构化的 CSS 类命名约定。它让你和你的团队成员仅通过阅读 class 名就能理解 HTML 结构和元素关系，虽然写起来可能比随意起的类名长，但是在大型、工程化项目，亦或者参与开源社区等需要和他人合作的项目中显得尤为重要。 BEM 是什么？ BEM 代表 Block (块)、Element (元素)、Modifier (修饰符)。 它的核心思想是：把用户界面拆分成... -
Vue3 -pinia 中的 getters 和 actions
刚学习 Pinia (或 Vuex) 的 store 的时候，发现 getters 和 actions 里都可以写方法，一时搞不懂两者有什么区别。但是事实上，虽然 Action 里也能写方法，但它和 Getter 的设计目的和工作方式完全不同。 关于 API 风格 本文只针对选项式写法的 store，对于组合式写法的 store 不存在这个问题，请见 pinia 的选项式和... -
vue3 - pinia 的选项式和组合式写法
选项式 vs 组合式 这两种写法的核心区别与 Vue 组件的选项式 API (Options API) 和组合式 API (Composition API) 非常相似，可以直接套用这个心智模型来理解。 1. 选项式写法 (Options Store) 这是更传统、更结构化的写法，类似于 Vue 2 的风格。你通过定义 state、getters 和 actions 这几个固定的属性来组... -
解决 CORS 跨域错误
造成 CORS 跨域报错的原因肯定不止一两种，但是我先归纳我遇到的 简单请求与非简单请求 我简单写了一函数，用于每次调用的时候来一张随机的小狗图片： 123456789101112131415161718// 该函数会引起 CORS 问题async function getDogImage(){ try { const data = await fetch('https... -
Vue3 - 使用 ref() 和 reactive() 实现响应式数据
什么是响应式数据 JS 里的变量值发生变化的时候，并不能总是更新到页面上，原生 JS 为了实现这个目标往往要写大量 element.innerHtml = xxx 语句。 Vue3 的响应式数据可以实现当 JS 变量值发生变化时候，自动渲染到页面上。 响应式系统的根基：reactive 个人认为学习 Vue3 响应式的正确的学习顺序应该是从它学起。 1. 处理什么，怎么处理... -
一篇 JS 的 Fetch API 与 axios 库的详细对比
本文是我个人在学习 AJAX （也就是 JS 异步编程）时候的学习笔记，假设你已掌握 axios 和 XMLHttpRequest 的情况下撰写。 关于三种请求方式 IE 时代 JS 里发起请求的方式是使用 XMLHttpRequest 对象，可见 使用 XMLHttpRequest 对象。这个方式没有实现异步处理，代码阅读感受比较反直觉。 Axios 是一个成熟的库，封装了 XMLH... -
一道经典的 JS 面试题弄懂事件循环
题目 1234567891011121314151617// 目标：回答代码执行顺序 console.log(1) setTimeout(() => { console.log(2) const p = new Promise(resolve => resolve(3)) p.then(result => console.log(result)) ... -
Promise 实现 JS 异步编程
promise 用作什么事情？ 要创建一个进程，其中一个函数只有在另一个函数完成后才会触发，请参见关于 Promise 的文档。 ——Window：setTimeout() 方法 - Web API | MDN 基本结构 1234567891011121314151617const promise = new Promise((resolve, reject) => {...
