-
使 JS 对象属性变成只读
在 JavaScript 中，你可以使用 Object.defineProperty() 或 Object.freeze() 方法来将对象的属性变为只读。 1. 使用 Object.defineProperty() 设置属性为只读 你可以使用 Object.defineProperty() 来定义一个只读属性。通过设置 writable 为 false，可以确保属性不可被修改。 12345... -
ES6 面向对象编程的语法糖
书接上文： 继承的手写实现 既然我们已经搞明白继承的原理了，下面我们就可以看看 ES6 里是怎么做的了。 还是那个模态框的例子，这次我们使用 ES6 的方式实现 12345678910111213141516171819202122232425class Modal { constructor(title, content) { this.title = title ... -
更深入的认识 this 语句和 new 关键字
这篇文章能让你对 this 和 new 语句的理解更深刻。如果你需要深刻明白原型链、继承等等内容，这块内容将变得很重要。 关于 this 场景A： 在构造函数里 我们先搞懂这块代码： 12345const obj = {}obj.a = 1console.log(obj.a); // 1 是不是很好理解？说简单点，当我们这样写 1234function Hero(name, hp) ... -
prototype 和 __proto__ 的关系，它们一样吗？
一句话：完全不一样！ prototype 是函数的“户口本”，用来登记“子孙后代”应该继承什么。 proto 是实例对象的“寻根指针”，用来指向自己的“祖籍”（也就是它爹的户口本）。 一个是“设计图纸”，一个是“指向图纸的箭头”。 通常来说： function 或者说 ES6 里的 class 才有 prototype。 __proto__ 是实例有的，指向构造函数的 prot... -
用 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... -
使用 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 这几个固定的属性来组...
