Leophen

摘要： 工厂模式·抽象工厂——理解“开放封闭” 上一节提到工厂模式中的简单工厂，这节开始理解抽象工厂。 1、从一个不简单的简单工厂开始 在实际的业务中，我们往往面对的复杂度并非数个类、一个工厂可以解决，而是需要动用多个工厂。 我们来看一个简单工厂函数： function Factory(name, age, 阅读全文

摘要： 工厂模式·简单工厂——区分“变与不变” 1、构造器 这里用个例子来介绍一下构造器模式： 有一天我写了个员工信息录入系统，起初这个系统开发阶段用户只有我，想怎么玩怎么玩。 于是在创建我这个唯一的用户的时候，可以这么写： const li = { name: "李", age: 23, career: 阅读全文

摘要： 一、reduce 方法 reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。 也就是说，这个累加器会从第一个累加值开始，不断对累加值和数组中的后续元素调用该累加器，直到数组中的最后一个元素，最后返回得到的累加值。 1、语法 arr 阅读全文

摘要： JS 如何创建一个简单的列表类？以下将描述如何实现该抽象数据类型（ADT） 一、 什么是列表 列表是一组有序的数据，每个列表中的数据项称为元素 在 JS 中，列表的元素可以是任意数据类型，且列表保存多少元素没有事先限定 要设计列表的抽象数据类型，我们需要列出列表的属性及方法： 1、列表的属性 属性名 阅读全文

摘要： 一、何为设计 设计即按照一种思路或者标准来实现功能 结合《UNIX/LINUX设计哲学》，设计可总结为： 小即是美 让每个程序只做好一件事 快速建立原型 舍弃高效率而取可移植性 采用纯文本来存储数据 充分利用软件的杠杆效应（复用，抽象） 使用 shell 脚本来提高杠杆效应和可移植性 避免强制性的用 阅读全文

摘要： 一、ES 5 中函数默认值写法 function total(x, y, z) { if (y undefined) { y = 2 } if (z undefined) { z = 3 } return x + y + z } console.log(total()) // NaN console 阅读全文

摘要： 这里直接上代码，根据结果来看比较直观 let arr = [ { name: 'Rick', age: 60 }, { name: 'Rick', age: 70 }, { name: 'Morty', age: 14 } ] let findResult = arr.find(i => i.nam 阅读全文

摘要： 一、什么是 UML 类图 UML 类图即统一建模语言（Unified Modeling Language），可使用图形来表示程序，包括： 用例图 时序图 类图 活动图 部署图 组件图 ... UML 主要面对的多为强类型的面向对象语言，如 Java 而 JS 是一个弱类型的语言，且没有接口、泛型等， 阅读全文

摘要： find 返回符合条件的第一个元素 如果没有符合条件的元素则返回 undefined 注意： find 对空数组不执行 find 不改变原数组 let arr = [1, 2, 3, 4, 5] let find = arr.find((item) => { return item % 2 0 }) 阅读全文

摘要： Array.of 创建新数组 let arr = Array.of(1, 2, 3, 4, 5) arr // [1, 2, 3, 4, 5] Array.fill 数组填充 Array.fill(value, start, end) let arr1 = Array(5) // 生成数组长度为 5 阅读全文

摘要： 一、ES5 伪数组转数组 伪数组：arguments 转换方法： let args = [].slice.call(arguments); 举个例子: 将 NodeList 转数组 let items = [].slice.call(document.querySelectorAll('item') 阅读全文

摘要： 一、Map 1、Map 的基本用法 JavaScript 的对象（Object），本质上是键值对的集合（Hash结构），但传统上只能用字符串当作键，这给它带来很大的使用限制 var data = {}; var element = document.getElementById('myDiv'); 阅读全文

摘要： 一、Set 1、Set 的基本用法 ES6 提供了新的数据结构 Set，它类似于数组，但是其成员的值都是唯一的，没有重复的值 Set 本身是一个构造函数，用来生成 Set 数据结构 var s = new Set(); [2, 3, 5, 4, 5, 2, 2].map(x => s.add(x)) 阅读全文

摘要： ###原数组对象： ###修改数组对象的 key 值 let objArr = [ { name: "Rick", age: 14, }, { name: "Morty", age: 70, }, ]; // 旧 key 到新 key 的映射 const keyMap = { name: "labe 阅读全文

摘要： 前面文章有讲到 svg 图标按需加载的优势以及 Vue 如何使用 vue-svg-icon 实现 svg 图标按需载入 今天来学习一下使用 svg-sprite-loader 在 Vue3 项目中实现图标按需加载 ###1、将 email.svg 文件导入项目 <svg width="24" hei 阅读全文

摘要： <input type="file" name="upload" @change="fileChange" > const picture = ref({} as unknown); const fileChange = (event: Event) => { const files = (even 阅读全文

摘要： composition API 中实现一键复制 <input type="text" ... onfocus="this.select()" ref="inputLink" > ... const inputLink = ref({} as unknown); ... const copyLink 阅读全文

摘要： ###vue2.x 通用写法: ... this.$message({ type: 'success', message: '删除成功' }) ... ###vue composition API 写法： ... setup(props, ctx) { ... const { $message } 阅读全文

摘要： computed 类型声明需要用泛型 ###错误写法 const a: Xx[] = computed(()=>{}) ###正确写法 const a = computed<Xx[]>(()=>{}) 直接使用时需要加上 .value 例如 a.value HTML 中可直接使用 :xx="a" 阅读全文

摘要： 当开发某个组件右键菜单时，需要禁止鼠标右键默认弹出的菜单 document.addEventListener("contextmenu", (event: MouseEvent) => { event.preventDefault(); }); 阅读全文