-
更深入的认识 this 语句和 new 关键字
这篇文章能让你对 this 和 new 语句的理解更深刻。如果你需要深刻明白原型链、继承等等内容，这块内容将变得很重要。 关于 this 场景A： 在构造函数里 我们先搞懂这块代码： 12345const obj = {}obj.a = 1console.log(obj.a); // 1 是不是很好理解？说简单点，当我们这样写 1234function Hero(name, hp) ... -
用 98K 狙击步枪实现 JS 继承
手写继承就像使用 Kar98 狙击步枪，老、繁琐，但是稳固、可靠。 要实现子类继承父类的属性和方法，Java 来的小伙伴可能直接一个 extend 就解决了，JS 里确实也有这个语法糖，可见：ES6 面向对象编程的语法糖。 但是手写一遍能帮助你深入理解 JS 的原型链以及面向对象编程，更别提后来的很多新特性也是基于这个实现的 例子介绍 这次我们就来实现一个模态框（Modal），父类模态... -
地图类程序前端——使用阈值和噪声过滤算法处理平滑 UI
在前端层面解决 GPS 精度、信号强度等各种不可控因素造成的定位坐标抖动的问题
-
通过封装一个自定义 UI 组件来学习 v-model 原理
v-model 是 vue 的响应式体系里很方便的一个指令，了解其源码可以加深对各种 UI 组件库的理解，在某些企业的面试中也会发挥作用。 用于 HTML 标签的 v-model 下面两种方式完全等价 1<input type="text" v-model="username"> 1<input type="text" :value="username" @inp... -
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 这几个固定的属性来组... -
使用 BEM 规范设置 CSS 类名
BEM 提供语义化和结构化的 CSS 类命名约定。它让你和你的团队成员仅通过阅读 class 名就能理解 HTML 结构和元素关系，虽然写起来可能比随意起的类名长，但是在大型、工程化项目，亦或者参与开源社区等需要和他人合作的项目中显得尤为重要。 BEM 是什么？ BEM 代表 Block (块)、Element (元素)、Modifier (修饰符)。 它的核心思想是：把用户界面拆分成... -
解决 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. 处理什么，怎么处理...
