![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 66
小的时候可菜了
这个作者很懒,什么都没留下…
展开
-
通过 Css 的 Grid 布局实现数据键盘
虽说不要重复造轮子,但 Ant-Design-Mobile 中的 NumberKeyboard 数字键盘点击没反应,只好自己写一个了,无耐~思路:每次点击数字,执行 addNumber 函数,该函数会将该数字压入一个数组中如果点击的第一个是小数点,或者在数组中已经出现过小数点了,则直接返回 addNumber 函数,不执行后面的结果...原创 2022-07-03 22:39:54 · 556 阅读 · 0 评论 -
使用 JavaScript 模拟 Linux 终端
一道面试题,记录下来,两个文件,一个是 html,一个是 js通过 JavaScript 仿Linux终端控制台,假定目录结构由 描述文件代码sh.js 文件分析项目源码给 input 添加 keyup 事件o 函数用于给添加,每次命令执行两次,一次用于添加,一次用于添加完成实际效果如下实现思路:定义一个 Path ,用一个数组存储当前路径的值每次 cd 的时候,拿到当前目录,判断 cd 的参数是否存在于当前存在,存在则进入,不存在给出提示ls、pwd 直接输出当前目录的 object原创 2022-07-03 22:03:05 · 962 阅读 · 0 评论 -
Typescript No definition found
问题:No definition found for 'xxxxx'原创 2022-06-06 20:39:39 · 647 阅读 · 0 评论 -
重构:改善既有代码的设计(第二版)笔记总结
重构,第一个示例为何,以及如何提炼一个函数如何处理过长的函数A First Set of RefactoringsSplit PhaseEncapsulate Variablelet defaultOwner = { firstName: "Martin", lastName: "Fowler" };// after encapsulate variablelet defaultOwnerData = { firstName: "Martin", lastName: "Fowler"原创 2022-05-03 21:02:54 · 596 阅读 · 0 评论 -
如何处理过长的函数
最好,最持久的程序,里面的函数都比较短。更好的表达力,更好的分享,更好的选择 —— 都是通过小函数来实现的因此,有这样一个原则:当想给某个函数写注释的时候,都将要说明的东西写进一个独立的函数中。Replace Temp with Query以查询替代临时变量在类中使用效果最好,类更适合承载数据与行为的组合Query在类中为get Value()❗️ 只适用于只读变量,如果某个变量被多次赋值,则将这些计算代码一并提炼到函数中,如下方的discountFactor确保提炼的函数无副作用原创 2022-05-02 22:21:29 · 833 阅读 · 0 评论 -
为何,以及如何提炼一个函数
什么是函数Function: [countable](computing) part of a program, etc. that performs a basic operationprogram:a set of instructions in code that control the operations or functions of a computerinstructions:[countable] a piece of information that tells a compute原创 2022-05-02 14:56:32 · 588 阅读 · 0 评论 -
重构,第一个示例
来自《重构,改善既有代码的设计(第二版)》在原来的基础上加了点个人注解,希望可以帮助后来者学习前几章试读题目设想有一个戏剧演出团,演员们经常要去各种场合表演戏剧通常客户(customer)会指定几出剧目,而剧团则根据观众(audience)人数及剧目类型来向客户收费。该团目前出演两种戏剧:悲剧(tragedy)和喜剧(comedy)给客户发出账单时,剧团还会根据到场观众的数量给出观众量积分(volume credit)优惠下次客户再请剧团表演时可以使用积分获得折扣——你可以把它看作一种提升客原创 2022-04-28 10:50:11 · 573 阅读 · 0 评论 -
基于vue3源码及《vue设计与实现》―手写 vue 响应式系统
根据<vue设计与实现>及vue3源码所做的笔记初始1s 后, 修改 obj.text 的值,document.body.innerText上的内容随之发生更改使用如下<html></html><script src="./index.js"></script><script> let obj = { text: "hello world" } obj = createReactiveObject(ob原创 2022-04-18 21:38:27 · 863 阅读 · 0 评论 -
使用 Nodejs 中的 Stream 进行文件压缩, 加密, 传输
流: 两点之间流动的数据流会被分割成一个一个小块(chunks)buffer: 等待的区域 – 数据填充到一定量的时候, 进行处理压缩文件缓冲模式压缩文件, 存在大小限制import { promises as fs } from 'fs'import { gzip } from 'zlib'import { promisify } from 'util'const gzipPromise = promisify(gzip)const filename = process.argv[2原创 2022-04-08 17:18:28 · 1308 阅读 · 0 评论 -
JavaScript 行为型设计模式
怎样将对象组合起来, 并规定这些对象之间的交流方式, 使其易扩展, 复用, 适配Strategy 策略模式将某对象逻辑里面可能发生变化的部分单独抽出来, 这部分可用各种策略来实现, 不同的策略, 该对象表现不同的行为比如: 汽车换轮胎平常: 使用普通轮胎,雪天: 使用雪地轮胎我们不需要仅仅因为换轮胎, 就把整个车都换掉// Car 中轮胎是可能发生变化的部分, 将其单独抽出来class Car { constructor(trie) { this.tire = trie原创 2022-04-07 23:53:47 · 642 阅读 · 0 评论 -
JavaScript 结构型设计模式
结构型设计模式: 提供一种管理实体的方式Proxy 代理模式proxy: 一个对象, 管控用户对 subject 的访问行为proxy 会把用户想要对 subject 所执行的操作全部拦截下来用一个 poxy 对象, 把 subject 的实例包裹取来, 让用户通过 proxyu 去访问 subject, 而不要直接访问 subject使用场景: 1️⃣ 数据验证 2️⃣ 权限判断 3️⃣ 缓存 4️⃣ 惰性初始化 5️⃣ 日志记录通过组合方式实现 Proxy 模式一个类或一个函数接受一个实例原创 2022-04-07 18:00:56 · 1072 阅读 · 0 评论 -
JavaScript 创建型设计模式
设计模式的目的: 解决反复出现的问题而提出的可重用解决方案Factory 工厂模式工厂模式: 将对象创建的逻辑封装成函数工厂函数只关心是否可以制造出实例就行, 而不关心其实现细节创建一个测评类, 非生产模式下, 测试函数运行时间const changeColor = color => input => `\x1b[${color}m${input}\x1b[0m`const changeGreen = changeColor(92)const changeViolet = chan原创 2022-04-06 21:04:26 · 1135 阅读 · 0 评论 -
同步函数与异步函数混用可能造成的问题
上面这段函数会遍历 listeners 中所有的listener(监听器), 而listener又是通过函数返回的对象中的 onDataReady 方法添加的传给 inconsistentRead 函数的第二个参数是一个回调函数, 它的执行时机应该是等待所有的 onDataReady 方法执行完成再执行, 这样才有意义inconsistentRead 是一个同步调用与异步调用混用的函数如果 cache 中有值, 直接调用传入的回调函数如果 cache 中没有值, 通过 readFile 读取传入.原创 2022-04-05 21:52:32 · 1138 阅读 · 1 评论 -
Nodejs 控制台彩色文字输出
\x1b[(文字装饰);(颜色代码)1、文字装饰0147正常加粗下划线背景2、颜色代码基本7色 30 ~ 36基本高对比色 90 ~ 96node 中的 process.stdout.write() 输出不换行, 自己试试吧~for (let i = 0; i <= 107; i++) { process.stdout.write(`\x1b[0;${i}m 0;${i} \x1b[0m`)}console.log('\n---------原创 2022-04-02 22:10:45 · 1836 阅读 · 0 评论 -
JS 正则中的 exec, replace, 断言查找的使用
使用\将一些特殊字符进行转义 (如果你不清楚那个字符需要使用\ 都加上也没有问题)() 作用 : 充当捕获组, 同时, 用于回引无回引使用 (?:)exec在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null。var re = /quick\s(brown).+?(jumps)/ig;var result = re.exec('the quick brown for jumps over the lazy dog');console.log(result) // object原创 2022-04-02 18:07:41 · 557 阅读 · 0 评论 -
lerna 使用
npm i lerna -g生成 lerna.json 文件lerna init如下{ "packages": [ "packages/*" ], "version": "0.0.0"}创建子包 (默认配置 -y)lerna create lib -ylerna create test -y此时项目结构如下进入 .\packages\test\lib\test.js, 修改为如下内容'use strict';module.exports = test;原创 2022-04-02 17:23:52 · 752 阅读 · 0 评论 -
koa 洋葱模型的简单实现
需求: 让一个函数, 执行到一半的时候, 去执行其他函数,大致如下输出顺序依次为: 1 > 3 > 5 > 6 > 4 > 2实现如下const foo = (callback) => { console.log('1') callback() console.log('2')}const bar = (callback) => { console.log('3') callback() console.log('4')}原创 2022-03-31 22:45:14 · 449 阅读 · 0 评论 -
JavaScript 二分查找的一些注意细节
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]const target = 3const binarySearch = (arr, target) => { let l = 0, r = arr.length - 1 while (l <= r) { // 为何要 = ? 如 [1] 中找 1, 无等号都进不去 // mid 表示当前查找的索引 const mid = (l + r) >>> 1 // 位运算,原创 2022-03-25 19:38:27 · 697 阅读 · 0 评论 -
reactive 依赖 ref 却未发生变化
reactive 中的数据依赖 ref 中的数据, 当 ref 发生变化的时候, reactive 不会发生变化import { ref, reactive } from 'vue'const indexRef = ref([1, 2, 3])const arr = [1, 2, 3, 4, 5]const data = reactive({ data: indexRef.value.map(i => arr[i])})console.log(data.data) // [2,原创 2022-03-25 12:50:16 · 448 阅读 · 0 评论 -
输入 url 到页面渲染完成的过程
用户从输入 url 到页面渲染完成, 之间发生了什么?url 解析 => dns 解析 => tcp 连接 => 反向代理 => http 连接 => 缓存 => html + css => render tree => 遍历可见节点, 根据规则, 计算位置, 大小 => 绘制url 解析输入 url , 会进行 url 的解析, 如果是 http 协议, 浏览器会新建一个网络请求线程去下载所需资源DNS 解析: 将 host 字段转化为网络中具原创 2022-03-17 20:11:00 · 1683 阅读 · 0 评论 -
Vue 设计与实现-响应式部分总结
看的后面有的没看懂, 于是总结下之前的, 思路连贯, 就清晰了初设计无响应式却更新obj.ok ? obj.text : 'not'obj.ok = false依赖应和 obj.text 没什么关系所以, 每次调用 effect 函数的时候, 首先清除依赖, 如下方法function cleanup(effectFn) { for (let i = 0; i < effectFn.deps.length; i++) { const deps = effectFn.deps[原创 2022-03-08 16:07:08 · 208 阅读 · 0 评论 -
JavaScript 函数式编程思想
函数式编程是一种编程范式, 所谓范式, 就是一种编程规范面向对象: 将现实世界的事物抽象为类与对象, 通过封装, 继承, 多态来表示事物之间的联系函数式: 将现实世界事物与事物之间的联系抽象到程序中这里的函数指的是映射原创 2022-03-04 15:10:37 · 534 阅读 · 0 评论 -
Vue3 响应式原理
何为响应? 当我依赖你的时候, 你变我也变当数据发生变化, 如果页面的某个地方使用到了这个数据, 那么该页面的内容也会跟着发生变化在 vue3 中 参考 Vue3 源码流程图// 该函数的目的就是 更新页面const componentUpdateFn = () => { // ...}该函数的目的就是更新页面也就是说, 当数据发生变化的时候, 就会运行 componentUpdateFn 这个函数所以, 你要做的就是让 componentUpdateFn 这个函数, 依赖响原创 2022-02-12 21:15:57 · 541 阅读 · 0 评论 -
Node 核心模块 event 源码
来解析这段源码const EventEmitter = require('events');const myEmitter = new EventEmitter();myEmitter.on('qweasd', function (a, b) { console.log(a, b, this === myEmitter);});// a b truemyEmitter.emit('qweasd', 'a', 'b');拆开来看初始化const EventEmitter = req原创 2022-02-08 11:52:04 · 554 阅读 · 0 评论 -
JS Iterator 迭代协议
一个对象, 默认是不可迭代的let foo = { foo1: 1, foo2: 2}// 如果使用 of 或 展开运算符迭代 foo 会报错for (const v of foo) { console.log(v)}console.log([...foo])那么, 如何使得 foo 变的可迭代呢?最基本的不会报错的写法, 给 foo 这个对象添加一个 [Symbol.iterator] 的键, 其值为一个函数, 函数取啥名不重要, 重要的是它会返回一个具有 next 函原创 2022-02-05 21:38:15 · 659 阅读 · 0 评论 -
Vue3 生命周期
beforeCreate 是在设置组件实例之前调用的> 而组件实例就是存储着组件运行过程中的所有信息, 如 生命周期, 是否挂载, 状态(data) , propsCreated 是在设置完组件实例之后调用BeforeMount 是在第一次挂载组件内部的 patch 函数(将 vdom 渲染到页面) 之前调用的mounted 是在 patch 之后调用 他会将注册的函数放到一个微任务队列中, 等到所有 vnode 全面渲染完成, 然后刷新那个微任务队列原创 2022-02-01 20:20:58 · 1565 阅读 · 0 评论 -
Vue3 源码流程图
随缘不定期更新processon原创 2022-02-01 14:46:51 · 1356 阅读 · 0 评论 -
VScode安装TypeScript后JS代码没有语义检查(不报错)
settings 中javascript.validatetypescript.validate都设置为 enable原创 2022-01-14 16:00:37 · 889 阅读 · 0 评论 -
js 展开运算符
const foo = (...args) => { console.log(args) console.log(...args)}foo(1,2,3,4,5,6)// [1, 2, 3, 4, 5, 6] 将各个参数加到一个数组中// 1 2 3 4 5 6 怎么输入怎么返回foo([1,2,3,4,5])// [Array(5)] 将数组加到一个数组中// [1, 2, 3, 4, 5] 怎么输入怎么返回…args 中的原创 2021-12-25 23:13:51 · 898 阅读 · 0 评论 -
changing the ‘lib‘ compiler option to include ‘dom‘
在tsconfig.json文件中可直接复制全部{ "compilerOptions": { "lib": ["dom"] }}原创 2021-11-25 14:48:43 · 524 阅读 · 0 评论 -
IVIEW Form 表单验证
下面的代码是简单的,不会报错,可以运行下,看看结果<template> <Form :model="qwe" :rules="zxc"> <FormItem prop="vvv"> <!-- 我用了 rules 中那个具体的属性 --> <Select v-model="qwe.vvv"> <!-- 有了要验证的属性,必有要有! --> <Option value="beijing"&原创 2021-11-25 10:52:15 · 736 阅读 · 0 评论 -
输入框的变态需求
老板给我提了一个变态需求,我咬着牙把它给完成了!后台会给你一个默认内容,你把这个内容默认放到输入框里边,要求是用户只能修改在小括号内的内容,其他的内容是不可修改的<template> <div> <el-input style="width: 1000px" :value="value" @input="onChange($event)" ref="inputRef" ></el-input&原创 2021-11-03 16:28:12 · 304 阅读 · 0 评论 -
JavaScript 实现 call、apply和 bind
原生JavaScript实现call、apply和bind - Web前端工程师面试题讲解apply实现Function.prototype.myApply = function (targetObject, arr) { targetObject = targetObject || {} arr = arr || [] // this 代表调用的函数 targetObject.targetFnKey = this let res = eval(`targetObject.targe原创 2021-10-06 13:20:39 · 93 阅读 · 0 评论 -
JavaScript prototype、__proto__ 与 继承
实例: let a = new Foo() 中的 a 就是实例 let b = new Foo() 中的 b 也是一个实例a 和 b 共享 Foo 的一个对象,这个对象称为 原型对象(prototype)在原型对象中 :有属性和方法a 和 b 可以使用原型对象里 定义的属性和方法,从而实现了共享的特性原型对象如何表示?通过 Foo.prototype创建任意一个函数,就有 prototype 这个属性,其内部有个 constructor 属性,用于指回函数,所以就有console.log(F原创 2021-10-04 00:44:50 · 153 阅读 · 0 评论 -
JavaScript 匿名函数的坑
如果加了花括号,但是没有 return 语句,默认会返回 undefinedconst foo1 = _ => 'haha'const foo2 = _ => { 'haha' }const foo3 = _ => { return 'haha' }console.log(foo1()); // hahaconsole.log(foo2()); // undefinedconsole.log(foo3()); // haha调用两次匿名函数a =>原创 2021-10-03 23:21:13 · 165 阅读 · 0 评论 -
JavaScript 防抖和节流
防抖JavaScript 防抖 - Web前端工程师面试题讲解???? 自动门感应到有人,打开门,并且开始5秒倒计时,在 5 s 内有另外一个人靠近到门,门感应到人,⭐️ 重新5秒倒计时当事件被触发时,设定一个延迟,若期间事件又被触发,则重新设定延迟,直到延迟结束,执行动作 (防止多次触发)web 应用上面改变页面大小的统计滚动页面位置的统计输入框连续输入的请求次数控制一开始,点击按钮,console.log('pay money')<body> <button原创 2021-09-26 22:59:07 · 786 阅读 · 0 评论 -
JavaScript 拖拽功能
JavaScript 拖拽功能 - Web前端工程师面试题讲解拖动图片<img draggable="true">拖动时开始 dragstart进行中 drag结束 dragendconst h1 = document.querySelector('h1')// 没有进行拖拽中,会显示document.addEventListener('dragstart', e => { h1.innerHTML = '开始拖拽' console.log('开始拖拽');原创 2021-09-24 13:41:59 · 830 阅读 · 0 评论 -
JavaScript 图片懒加载
JavaScript 图片懒加载 - Web前端工程师面试题讲解事件监听监听scroll监听scroll这个事件。鼠标滚动就触发我们需要知道两个高度窗口显示区的高度 window.innerHeight图片到视窗上边的距离高度 getBoundingClientRect().top图片未能看见:图片距离视窗顶部的距离 > 窗口显示区的高度图片能看见:图片距离视窗顶部的距离 < 窗口显示区的高度一开始,可以将图片设置为 <img data-src="">原创 2021-09-24 00:33:34 · 99 阅读 · 0 评论 -
Css 几种垂直居中方式
初始<style> .a { width: 600px; height: 600px; background-color: blanchedalmond; } .b { width: 150px; height: 150px; background-color: cornflowerblue; }</style><div class="outer a"> <div class="inner原创 2021-09-22 19:17:49 · 95 阅读 · 0 评论 -
Official_Node.js File
Working with file descriptors in Node.jsBefore you’re able to interact with a file that sits in your filesystem, you must get a file descriptor.A file descriptor is a reference to an open file, a number (id) returned by opening the file using the open()原创 2021-08-03 09:39:54 · 286 阅读 · 0 评论