狗焕sama-CSDN博客

原创实现数组扁平化

利用apply和some方法实现var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]; flatten = (arr) => { while (arr.some((item) => Array.isArray(item))) { arr = [].concat.apply([], arr); console.log(arr); } .

2020-09-23 16:27:27 211

原创数组去重

// 数组去重方法： //1.将原数组传入set中 // let arr = [1, 1, 2, 3, 4, 2]; // let set = new Set(arr); // console.log(set); // 2.双重循环遍历数组如果值相同，使用splice方法删去后一个相同的值 // let arr = [1, 1, 2, 3, 4, 2]; // Array.prototype.distinct6 = function () { // for (let i

2020-09-13 19:40:20 253

原创 JS继承的原理和几种方式

改变构造函数的继承并不是继承例如：function User(){} function Member(){} Member.prototype = User.prototype; function Admin(){} Admin.prototype = User.prototype Admin.prototype.role = function(){ console.log('Admin In'); } Member.prototype.role = function

2020-09-12 09:55:49 572

原创 2021-03-22

解决为了省略一行导致字母消失问题如图所示：当前的g下面被遮住了此时的CSS样式：解决办法：把margin变成padding即可。我们overflow: hidden是隐藏掉盒子元素content + padding之外的。无论是怪异模型和标准盒模型。...

2021-03-22 17:07:10 159

原创 2021-03-17

CSS外边距重叠的计算在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下：a: 全部都为正值。那么实际的margin值为最大值b：不全是正值。则都取绝对值，然后利用正值减去最大值c：没有正值，则都取绝对值，然后用0减去最大值。...

2021-03-17 00:13:43 151

原创虚拟DOM和diff算法

什么是虚拟DOM虚拟DOM：用JS对象描述DOM的层次解构。DOM中的一切属性都在虚拟DOM中有对应的属性例如我们的真实DOM为：<div class="box"> <h3>我是一个标题</h3> <ul> <li>牛奶</li> <li>咖啡</li> <li>可乐</li> </ul>此时我们对应的虚拟DOM结构为（以snabbdom为例）：

2021-03-14 16:40:37 214

原创 2021-01-15 Vuex是如何保证每个组件都拿到同一个store实例的

Vuex是如何保证每个组件都拿到同一个store实例的当我们在使用Vue.use()的时候install方法的时候。

2021-01-15 15:53:50 277

原创 2021-01-06 JSON5的用处

JSON5的用处详情见：https://zhuanlan.zhihu.com/p/108119490JSON5是对JSON的扩展具有以下特点：key值允许没有双引号{ code:1, msg:"Hello"}const JSON5 = require('json5')const obj = { name: 'keliq', age: 12,}const res = JSON5.stringify(obj)console.log(res) // {nam.

2021-01-06 10:39:37 199

原创 2021-01-04 inline-block出现间隙的问题 Blob对象 git更新远程分支

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

2021-01-04 14:03:55 80

原创 v-for的解构赋值

v-for的解构赋值<template> <div class="about"> <div class="han" :key="index" v-for="({id,name},index) in list"> {{id}}---->{{name}}{{index}} </div> </div></template><script>export default { d.

2020-12-23 11:28:08 444

原创 Node 事件循环和异步IO 进程和线程的关系

什么是事件循环浏览器的事件循环会有一个调用执行栈，只要栈为空的时候才会执行宏任务微任务。并且执行任何一个宏任务之前，会查看微任务队列是否有任务需要执行，也就是说宏任务的函数里如果有微任务的入列，执行下一个宏任务之前会除了执行完当前宏任务的主线程代码后再执行优先把刚刚加入微任务队列的微任务常见的宏任务：ajax，DOM监听常见的微任务：mutation Observer API(提供了监视对DOM树所做更改的能力), queueMicrotask()(自定义微任务)进程和线程的关系进程（

2020-12-21 01:22:17 236

原创 Buffer和二进制

为什么要用Buffer类因为服务器端为了做很多的功能，必须直接去操作其二进制的数据，而Buffer可以看作是一个二进制的数组，可以存储很多的二进制。并且在Node中是全局的8位为一个单元，一个单元被称为一个字节（byte）也就是1 byte = 8bit。1kb = 1024byte。1M = 1024kbBuffer可以看作是一个二进制的数组。这个数组的每一项可以保存8位二进制，也就是一个字节。也就是Buffer数组中的每一项对应一个字节的大小Buffer的存储以字符串为例：如图可知每个中

2020-12-20 22:48:32 1397

原创 commander配合node的使用 (实现自定义脚手架。。。更新中....)

使用commander的option时只有–xxx （两个必须一致才能通过.xxx获取）例如：#!/usr/bin/env nodeconst {program} = require('commander')program.version(require('./package.json').version)//获取package.json的版本号program.option('--ha <ha>','must input gogo')program.parse(process.a

2020-12-20 16:10:50 603 1

原创 package.json常用配置 npm install原理 npm link

package.json常用配置：name（必填）项目的名称version: （必填）当前项目的版本号main：入口文件（前端因为有webpack的存在基本上用不到，只是作为发布的时候别人下载下来用的时候的入口文件）description: 描述信息author：作者信息（发布时用到）license：开源协议（发布时用到）private：是否为私密（设置为true不可以发布）script：脚本执行我们都知道执行某个js文件的时候我们通过：node index.js来执行index.j

2020-12-19 12:51:42 2397 1

原创 2020-12-18 实现异步队列面试题

解决方法：问题是按顺序执行，那么就抓住核心一定在一个宏任务执行完再执行下一个宏任务。总结就是利用cb回调方法function fun1(cb) { setTimeout(() => { console.log('fun1'); cb() }, 3000)}function fun2(cb) { setTimeout(() => { console.log('fun2'); cb() }, 1000)}function fun3(cb) .

2020-12-18 15:34:12 113 1

原创 Node的常用内置模块

1.path模块path包括常用方法：path.resolve([from…],to)//from为选填，path.resolve() 该方法将一些的路径解析为绝对路径。会根据是否有/或//或./或…/或反斜杠\来判断如何拼接path.join(path1,path2…）join是把各个path片段连接在一起path.dirname(path)//输出该文件所在的目录的绝对路径path.basename(path)//整个文件的名字path.extname(path)//文件的后缀名pat

2020-12-18 10:10:27 945

原创使用nvm管理node

首先是安装nvm：在girhub上搜索nvm找到nvm-windows再下载nvm-setup.zipNVM下载：常用指令:nvm list：查看当前已安装的node版本nvm list available：查看官网当前可以按照的版本我们可以按照指定的node版本例如按照15.4.0版本指令：nvm install 15.4.0也可以使用nvm install lts（latest的缩写，目前只支持win32系统）或者 nvm install latest 来安装最新版本需要注意的是安装可

2020-12-17 12:47:47 91

原创 2020-12-16 require的查找规则模块的加载过程 require和import区别（ES和commonJS区别） commonJS和ES的交互

1. require的查找规则情况一：require的是核心模块情况二：如果是判断为目录总结一下：有后缀找后缀，无后缀找.js>.json>.node。都没有找到当成目录找index.js>index.json>index.node（注意一定是index，main都不可以！）如果都没有就报错xxx not found情况三：require里并非目里但也不是核心模块此时会向当前文件最近一级目录的node_modules里查找是否有X模块，如果没有再向上上级，

2020-12-16 00:56:56 626

原创 2020-12-15 node的架构 global和window全局对象的区别函数自执行与JS模块化 module.exports和exports的区别

node的架构应用程序（apllication）是由V8引擎（C++编写）来解析JS代码的。然后再通过Bingdings（JS编写）也就是node的api将任务放到LIBUV（C语言编写）进行事件循环，文件系统和网络IO等操作node的应用：我们常见的npm包管理其实就是我们前端开发常用的开发库的node包...

2020-12-15 10:10:27 475 1

原创 2020-12-11 V8引擎的大致执行步骤

V8引擎的大致执行步骤暂时不看第二行的turboFan，先看第一行的执行。我们执行JS代码的时候，因为JS是解释型语言，需要进行一系列操作转成机器码才能被CPU执行，V8引擎会有内置模块把JS代码转化成抽象语法树（abstract syntax tree简称AST）。转成AST才能被后面的内置模块解释器ignition转化成类似于汇编语言的字节码（bytecode）。后面字节码还是要通过解释器转成汇编代码和机器码才能被运行。而V8引擎的特点就是还有一个叫TurboFan的内置模块会收集信息，比如传入

2020-12-11 12:08:19 1023

原创 2020-12-10 JS引擎浏览器渲染的过程 for循环用let和var的区别

js代码需要JavaScript引擎转换成汇编代码。再从汇编语言转化成0101二进制的机器语言才能被计算机识别浏览器渲染的过程：HTML解析成DOM树。CSS解析成CSSOM成为Attachment（附加）。CSSOM和DOM形成Render渲染树。此时还需生成另外一个layout布局计算每个元素的位置大小等。这样就可以对渲染树进行绘制Painting。然后展示在页面上...

2020-12-10 19:35:13 185

原创 2020-12-07 Git 解决 git cherry-pick could not apply

Git 解决 git cherry-pick could not apply当git cherry-pick 出现error: could not apply 3e86ed8… Added Copy Patron button to circ-toolbarhint: after resolving the conflicts, mark the corrected pathshint: with 'git add ’ or 'git rm ’hint: and commit the resu.

2020-12-07 10:45:02 1929

原创 2020-12-01 vue props接受数组/对象

vue props default 数组/对象的默认值返回应该用函数嵌套数组data: { default: () => []} 对象data: { default: () => ({})}

2020-12-01 14:40:38 276

原创 2020-11-25 el-table踩坑总结

el-table边框没对齐的原因：一是设置了border-collapse: collapse;将其table-layout：fixed改成table-layout: auto;即可。.customList .custom-repeat-card .el-table__body-wrapper .el-table__body,.customList .custom-repeat-card .el-table__fixed-body-wrapper .el-table__body,.customL.

2020-11-25 15:08:28 658 1

空空如也

空空如也