上一页 1 2 3 4 5 6 ··· 9 下一页
摘要: 工厂模式·抽象工厂——理解“开放封闭” 上一节提到工厂模式中的简单工厂,这节开始理解抽象工厂。 1、从一个不简单的简单工厂开始 在实际的业务中,我们往往面对的复杂度并非数个类、一个工厂可以解决,而是需要动用多个工厂。 我们来看一个简单工厂函数: function Factory(name, age, 阅读全文
posted @ 2021-03-10 22:50 Leophen 阅读(36) 评论(0) 推荐(0) 编辑
摘要: 工厂模式·简单工厂——区分“变与不变” 1、构造器 这里用个例子来介绍一下构造器模式: 有一天我写了个员工信息录入系统,起初这个系统开发阶段用户只有我,想怎么玩怎么玩。 于是在创建我这个唯一的用户的时候,可以这么写: const li = { name: "李", age: 23, career: 阅读全文
posted @ 2021-03-06 21:40 Leophen 阅读(25) 评论(0) 推荐(0) 编辑
摘要: 一、reduce 方法 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。 也就是说,这个累加器会从第一个累加值开始,不断对累加值和数组中的后续元素调用该累加器,直到数组中的最后一个元素,最后返回得到的累加值。 1、语法 arr 阅读全文
posted @ 2021-03-01 21:01 Leophen 阅读(50) 评论(0) 推荐(0) 编辑
摘要: JS 如何创建一个简单的列表类?以下将描述如何实现该抽象数据类型(ADT) 一、 什么是列表 列表是一组有序的数据,每个列表中的数据项称为元素 在 JS 中,列表的元素可以是任意数据类型,且列表保存多少元素没有事先限定 要设计列表的抽象数据类型,我们需要列出列表的属性及方法: 1、列表的属性 属性名 阅读全文
posted @ 2021-02-25 21:12 Leophen 阅读(43) 评论(0) 推荐(0) 编辑
摘要: 一、何为设计 设计即按照一种思路或者标准来实现功能 结合《UNIX/LINUX设计哲学》,设计可总结为: 小即是美 让每个程序只做好一件事 快速建立原型 舍弃高效率而取可移植性 采用纯文本来存储数据 充分利用软件的杠杆效应(复用,抽象) 使用 shell 脚本来提高杠杆效应和可移植性 避免强制性的用 阅读全文
posted @ 2021-02-21 21:00 Leophen 阅读(44) 评论(0) 推荐(0) 编辑
摘要: 一、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 阅读全文
posted @ 2021-02-16 16:47 Leophen 阅读(50) 评论(0) 推荐(0) 编辑
摘要: 这里直接上代码,根据结果来看比较直观 let arr = [ { name: 'Rick', age: 60 }, { name: 'Rick', age: 70 }, { name: 'Morty', age: 14 } ] let findResult = arr.find(i => i.nam 阅读全文
posted @ 2021-02-03 19:30 Leophen 阅读(44) 评论(0) 推荐(0) 编辑
摘要: 一、什么是 UML 类图 UML 类图即统一建模语言(Unified Modeling Language),可使用图形来表示程序,包括: 用例图 时序图 类图 活动图 部署图 组件图 ... UML 主要面对的多为强类型的面向对象语言,如 Java 而 JS 是一个弱类型的语言,且没有接口、泛型等, 阅读全文
posted @ 2021-01-30 11:16 Leophen 阅读(88) 评论(0) 推荐(0) 编辑
摘要: find 返回符合条件的第一个元素 如果没有符合条件的元素则返回 undefined 注意: find 对空数组不执行 find 不改变原数组 let arr = [1, 2, 3, 4, 5] let find = arr.find((item) => { return item % 2 0 }) 阅读全文
posted @ 2021-01-24 20:04 Leophen 阅读(302) 评论(0) 推荐(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 阅读全文
posted @ 2021-01-15 20:05 Leophen 阅读(38) 评论(0) 推荐(0) 编辑
摘要: 一、ES5 伪数组转数组 伪数组:arguments 转换方法: let args = [].slice.call(arguments); 举个例子: 将 NodeList 转数组 let items = [].slice.call(document.querySelectorAll('item') 阅读全文
posted @ 2021-01-11 19:55 Leophen 阅读(73) 评论(0) 推荐(0) 编辑
摘要: 一、Map 1、Map 的基本用法 JavaScript 的对象(Object),本质上是键值对的集合(Hash结构),但传统上只能用字符串当作键,这给它带来很大的使用限制 var data = {}; var element = document.getElementById('myDiv'); 阅读全文
posted @ 2020-12-18 21:42 Leophen 阅读(36) 评论(0) 推荐(0) 编辑
摘要: 一、Set 1、Set 的基本用法 ES6 提供了新的数据结构 Set,它类似于数组,但是其成员的值都是唯一的,没有重复的值 Set 本身是一个构造函数,用来生成 Set 数据结构 var s = new Set(); [2, 3, 5, 4, 5, 2, 2].map(x => s.add(x)) 阅读全文
posted @ 2020-12-15 17:23 Leophen 阅读(60) 评论(0) 推荐(0) 编辑
摘要: ###原数组对象: ###修改数组对象的 key 值 let objArr = [ { name: "Rick", age: 14, }, { name: "Morty", age: 70, }, ]; // 旧 key 到新 key 的映射 const keyMap = { name: "labe 阅读全文
posted @ 2020-12-11 21:42 Leophen 阅读(3141) 评论(0) 推荐(0) 编辑
摘要: 前面文章有讲到 svg 图标按需加载的优势以及 Vue 如何使用 vue-svg-icon 实现 svg 图标按需载入 今天来学习一下使用 svg-sprite-loader 在 Vue3 项目中实现图标按需加载 ###1、将 email.svg 文件导入项目 <svg width="24" hei 阅读全文
posted @ 2020-11-26 21:51 Leophen 阅读(930) 评论(0) 推荐(0) 编辑
摘要: <input type="file" name="upload" @change="fileChange" > const picture = ref({} as unknown); const fileChange = (event: Event) => { const files = (even 阅读全文
posted @ 2020-11-14 20:21 Leophen 阅读(81) 评论(0) 推荐(0) 编辑
摘要: composition API 中实现一键复制 <input type="text" ... onfocus="this.select()" ref="inputLink" > ... const inputLink = ref({} as unknown); ... const copyLink 阅读全文
posted @ 2020-11-03 21:16 Leophen 阅读(114) 评论(0) 推荐(0) 编辑
摘要: ###vue2.x 通用写法: ... this.$message({ type: 'success', message: '删除成功' }) ... ###vue composition API 写法: ... setup(props, ctx) { ... const { $message } 阅读全文
posted @ 2020-10-25 21:10 Leophen 阅读(521) 评论(2) 推荐(0) 编辑
摘要: computed 类型声明需要用泛型 ###错误写法 const a: Xx[] = computed(()=>{}) ###正确写法 const a = computed<Xx[]>(()=>{}) 直接使用时需要加上 .value 例如 a.value HTML 中可直接使用 :xx="a" 阅读全文
posted @ 2020-10-17 20:05 Leophen 阅读(227) 评论(0) 推荐(0) 编辑
摘要: 当开发某个组件右键菜单时,需要禁止鼠标右键默认弹出的菜单 document.addEventListener("contextmenu", (event: MouseEvent) => { event.preventDefault(); }); 阅读全文
posted @ 2020-10-08 19:57 Leophen 阅读(513) 评论(0) 推荐(0) 编辑
上一页 1 2 3 4 5 6 ··· 9 下一页