风中告退-优快云博客

转载 yarn 和 npm 的区别

Yarn的优点？速度快。速度快主要来自以下两个方面：并行安装：无论 npm 还是 Yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能。离线模式：如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了。安装版本统一：为了防止拉取到不同的版本，Yarn 有一个锁定文件 (lock file) 记录了

2022-05-30 10:04:32 333 1

原创 Node process&模块化规范&eventloop

processprocess.env表示的是当前系统中的一些环境。环境变量分为两种：用户变量、系统变量。设置环境变量的两种语法： windows系统→ set a = 1，mac系统→ export b = 2执行代码时传入环境node test.js --port 8085 --method kill// 解析命令行传入的指令 let env = process.argv.slice(2).reduce((memo, current, index, arr) => { i

2021-09-11 20:17:20 209 1

原创浅析webpack tree-shaking

首先区分一下 es modules 和 common.jses modules 用于浏览器环境的js模块化，export default 、export 来导出。编译时引入。common.js 用于node.js 平台，module exports 、 exports 来导出。运行时导入。es modules 可以静态解析哪个模块引入但没有调用，最后打包bundle.js 就不会打包那些没引入的模块。另外，tree-shaking 除了可以shake掉没有用到的模块，还可以摇掉没有用到的.

2021-08-13 00:20:50 1346

原创 react-router4传递数据的两种方式

使用LinkLink是react-router4中很常见的一个类，很多人在页面跳转的时候都会用到它。在用Link的时候传递数据的方法如下：import { Link } from 'react-router-dom';//不传递数据<Link to={模块路径}>{内容}</Link>//传递数据,在目标模块用this.props.location.state调用数据。 <Link to={{ pathname: {模块路径},

2021-02-16 10:23:09 610 1

原创 React setState是同步还是异步？

React setState默认是异步，但有时候是同步1.1 setState为什么默认是异步假如所有setState是同步的，意味着每执行一次setState时(有可能一个同步代码中，多次setState)，都重新vnodediff + dom修改，这对性能来说是极为不好的。如果是异步，则可以把一个同步代码中的多个setState合并成一次组件更新。1.2 setState什么时候是同步在setTimeout或者原生事件中，setState是同步的。1.3 React中setStat

2020-11-05 17:54:40 4564 1

原创 Generator函数暂停恢复执行原理

要搞懂函数为何能暂停和恢复，那你首先要了解协程的概念。一个线程（或函数）执行到一半，可以暂停执行，将执行权交给另一个线程（或函数），等到稍后收回执行权的时候，再恢复执行。这种可以并行执行、交换执行权的线程（或函数），就称为协程。协程是一种比线程更加轻量级的存在。普通线程是抢先式的，会争夺cpu资源，而协程是合作的，可以把协程看成是跑在线程上的任务，一个线程上可以存在多个协程，但是在线程上同时只能执行一个协程。它的运行流程大致如下：协程A开始执行协程A执行到某个阶段，进入暂停，执行权转移到协程B

2020-11-05 17:48:17 1146 5

原创闭包解决var的索引缓存问题

for (var i = 0; i < 5; i++) { (function(j) { // j = i setTimeout(function() { console.log(new Date, j); }, 1000); })(i);}console.log(new Date, i);

2020-11-03 14:25:28 384

原创 JS数组去重的三个高阶玩法

…newSet（）对于基本数据类型的数组去重,可以使用 …new Set() 来过滤数组中重复的值,创建一个只有唯一值的新数组.Array.from(new Set())Array的.filter及indexOf()注意,indexOf()方法将返回数组中第一个出现的数组项.这就是为什么我们可以在每次迭代中将indexOf()方法返回的索引与当前索引进行比较,以确定当前项是否重复....

2020-10-26 22:52:49 207

原创 vue中$router和$route的区别

$router$router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vu构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性。以history对象来举例：$router.push({path:‘home’})，本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录$router.replace({path:‘home’})，//替换路由，没有历史记录$rou

2020-10-22 09:55:13 329

原创两种前端路由的原理之hash&history

路由的分类hashhtml5 api history为什么使用路由？SPA：single page application页面的地址栏跳转index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0.

2020-10-21 16:17:20 170

原创 addEventListener的第三个参数

DOM方法 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数。这两个方法都需要三个参数，分别为：事件名称（String）、要触发的事件处理函数(Function)、指定事件处理函数的时期或阶段(boolean)。DOM事件流如图（剪自javascript高级程序设计，懒的画了）：由图可知捕获过程要先于冒泡过程当第三个参数设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。...

2020-10-21 16:00:43 857

原创 Vue前端路由建立流程

项目默认是vue-cli搭建的。Vue的前端路由是以模块引入的方式使用的。node_modules里面会有vue-router这个模块。开始使用vue-router搭建项目的前端路由。具体步骤：先在入口文件main.js导入,src目录默认有router文件夹，import router from “./router”然后vue的根组件上注册routernew Vue({ router, render: h => h(App)}).$mount('#app')再在网

2020-10-21 15:09:53 498

原创五道Vue基础面试题

created和mounted的区别created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。v-show和v-if指令的共同点和不同点？共同点：都能控制元素的显示和隐藏；不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false

2020-10-19 20:41:33 275 1

原创区分JS中的柯里化与偏函数

柯里化柯里化是将一个多参数函数转换成多个单参数函数。function add(a, b) { return a + b;}// 执行 add 函数，一次传入两个参数即可add(1, 2) // 3// 假设有一个 curry 函数可以做到柯里化var addCurry = curry(add);addCurry(1)(2) // 3偏函数（局部应用）偏函数则是固定一个函数的一个或者多个参数。function add(a, b) { return a + b;}

2020-10-17 14:44:47 350

原创 Vue的生命周期以及每个阶段做的事

beforeCreate(创建前）在数据观测和初始化事件还未开始。created(创建后）完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来。beforeMounted(挂载前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置:编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。mounted(挂载后）在el被新创建的vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替.

2020-10-16 09:02:38 4103

原创 Vue子组件和父组件执行顺序

加载渲染过程父组件 beforeCreate父组件 created父组件 beforeMount子组件 beforeCreate子组件 created子组件 beforeMount子组件 mounted父组件 mounted更新过程父组件 beforeUpdate子组件 beforeUpdate子组件 updated父组件 updated销毁过程父组件 beforeDestroy子组件 beforeDestroy子组件 destroyed父组件 destroye

2020-10-16 08:49:51 1320

原创 JS如何在不使用第三个变量的前提下交换已有的两个变量的值？

var a = 10;var b = 20;通过ES6的解构赋值var a = 10;var b = 20;[b, a] = [a, b];// a => 20// b => 10利用JS弱类型的特点var a = 10;var b = 20; a = [a, b]; // 让 a 变成数组b = a[0]; // 先取出 ba = a[1]; // 再覆盖 a利用计算(只能是Number，并且有计算溢出的风险)var a = 10;var b

2020-09-25 15:56:20 1036 1

原创从输入URL到页面加载的过程?

1.从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系)2.开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp/ip请求，五层因特网协议栈等知识)3.从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等)4.后台和前台的http交互(这一部分包括http头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）5.单独拎出来的缓存

2020-09-23 09:13:25 297

原创带你彻底弄懂JS中的节流和防抖

首先，节流和防抖都是用于不断触发事件的情况，比如onscroll事件，如果不设置节流和防抖，当你绑定onscroll事件并设置事件处理函数，你滑动滚轮就会执行n多次的事件处理函数，造成性能损耗。节流和防抖有时候也会应用在input keydown事件，根据具体情况选择节流还是防抖。先简单解释一下节流和防抖的概念。节流：当你不断触发某一事件时，每隔一个固定时间，执行一次你想要执行的代码。（为防止频繁触发事件而执行n多次的代码）防抖：停止触发事件之后的固定时间间隔内不再触发事件，才执行一次事件处理

2020-08-28 20:59:43 1698 1

原创前端学习笔记（23）之关于状态码

响应状态码+ 以一个数字表示本次请求的响应状态=> 成功: 创建成功, 删除成功, …=> 失败: 客户端失败, 服务端失败, …+ 是 100 ~ 599, 分成五类=> 100 ~ 199: 表示连接继续=> 200 ~ 299: 表示各种意义上的成功=> 300 ~ 399: 表示重定向=> 400 ~ 499: 表示客户端错误=> 500 ~ 599: 表示服务端错误常见状态码+ 101 表示连接继续+ 200 通用成功+ 302

2020-08-25 20:18:32 162

转载前端学习笔记（22）之JS中用逻辑与逻辑或来赋值

一、“||” 逻辑或逻辑或是“吐真”，第一个真不真，第二个真不真，直到遇到真的值返回，如果比对到最后也没有真值，那么没办法，返回最后一个值一个例子：后边的{}是为了保底，保证一定有个真可以吐var data = res.data || {};二、 “&&” 逻辑与逻辑与是“熔断”，第一个断不断，第二个断不断，一直比对，直到断了为止，如果都没断，比到最后了，显示最后一个值一个例子：可以取代if做熔断，如果第一个就断了，后边的值就不执行，返回false，如果第一个值不断，则&

2020-08-19 22:22:43 615

原创前端学习笔记（21）之JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍

offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）style.width //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）st

2020-08-19 22:15:39 922

原创前端学习笔记（20）之JS中箭头函数的this指向问题

先说一下普通函数的this指向，判断普通函数的this指向，不需要考虑函数的定义环境，只需要考虑函数的调用，谁调用的函数，谁就是该函数的this。关于ES6中的箭头函数，官方的解释是：箭头函数里面的 this 是上下文(context), 外部作用域的 this 就是箭头函数内的 this。判断箭头函数的this：技巧：它的外层没有函数，this是window。外层有函数，看外层函数的this是谁，它的this就是谁。（外层函数可能是常规函数可能是箭头函数，判断外层的this要根据函数种类用不

2020-08-19 20:50:44 467

原创前端学习笔记（19）之call（）、apply（）、bind（）的三个方法的区别

！call（）apply()bind()call（）语法:fn.call()obj.fn.call()参数:第一个参数, 就是函数内部的 this 指向第二个参数开始, 依次给函数传递参数特点:会立即执行函数(不适合用作定时器处理函数或者事件处理函数)作用:伪数组借用数组方法apply()语法:fn.apply()obj.fn.apply()参数:第一个参数, 就是函数内部的 this 指向第二个参数: 是一个数组或者伪数组都行, 里面的每一项依次给函数传递参数特点:

2020-08-19 20:37:47 322

原创前端学习笔记（18）之原生JS数据渲染之购物车案例

关于数据渲染的知识点总结模板字符串捕获数据渲染数据 ->bindHTML()下拉刷新 ->window.oncroll = function(){}添加商品到购物车 ->addCart()模板字符串使用模板引擎可以帮助我们更加快速的渲染页面，需要引入第三方的js文件来使用，习惯了语法还是很方便的。常见的模板引擎 ?=> art-template, 前后端都可以用=> underscroll, 后端 JS 不能用=> e.js, 后端 JS 不能用=>

2020-08-16 22:40:51 650

原创前端学习笔记（17）之QuickSort、InsertionSort 及JS的24个数组方法合集

快速排序、插入排序、数组方法QuickSortInsertionSortArray MethodsQuickSort递归二分排序（快速排序）原理：之所以用递归是因为要不断分解数组直到原数组为空，递归结束条件就是arr.length<1,即分解完全部数组内全部元素。运用的分治算法的思想。被重复的操作就是：不断的取中间元素，然后遍历数组，小于中间元素的放左边，大于中间元素的放右边。通过这个操作分出了两个数组，再对这两个数组进行之前的操作，不断分出来数组，对每个数组都执行之前的操作来分解，直到分

2020-08-07 17:36:35 332

原创前端学习笔记（16）之BubbleSort、SelectionSort、CountSort

冒泡、选择、计数排序BubbleSortSelectionSortCountSortBubbleSort双层for循环，一层减一次。里层减外层，变量相交换。 var arr = new Array(45, 65, 12, 48, 23, 18, 89) for (var i = 0; i < arr.length - 1; i++) { for (var j = 0; j < arr.length - 1 - i; j++) {

2020-08-05 21:45:06 294

原创浅析《人间失格》中的经典句段

《人间失格》是日本文学家太宰治临终遗作，它以自传体的文体记叙自己四十年的遭遇与心境，这本书的简短而精彩就像他自己短暂却不平凡的一生。纵览整本书，可以从字里行间感受他对美好生活充满无限希望，却无奈自身性格与种种际遇的不佳，导致了他并没过上理想的生活，相反地，他的生活甚至令人为其感到不幸和可悲。毋庸置疑的是，太宰治是个了不起的文学家，他作品中的许多金句在令人唏嘘人世间许多现实的残酷的同时，也引发读者无尽遐想。作为读者，我感叹他文学作品有着令人沉醉的魅力，同时，也对他个人的精神世界充满着无限的好奇。因为他实在是太

2020-08-04 14:03:14 2468

原创前端学习笔记（15）之JS中Number和String的相互转换

a标签里的herf写javascript：是为了区分跳转链接还是执行javascript代码。document.write 可以解析标签。alert（）的弹出会阻断程序向下执行。单引号双引号反引号里面的都算是字符串。Number（）能转成数字就转，不能就返回NaN。parseInt（）一位一位解析，保留可以转数字的部分。不能转返回NaN。不认识小数点。比如true ，Number会把它转为1 ，parseInt会转为NaN。parseFloat（）和p..

2020-08-03 17:35:17 1020

原创前端学习笔记（14）之详解数据_变量_内存

JS basical knowledge数据内存变量三者之间的关系Depressed emotion数据什么是数据？存储在内存中代表特定信息的东西，本质上是二进制的数字1010…数据的特点：可传递、可运算内存什么是内存？内存条通电后产生的可存储数据的空间。（临时的）内存产生和死亡：内存条（电路板）–>通电 -->产生内存空间 -->存储数据并对数据进行处理 -->断电 --> 内存空间和数据都消失。一块小内存的两个数据内部存储的数据地址值

2020-08-01 12:23:09 361

原创前端学习笔记（13）之JavaScript数据类型的概念及判断

JS basical knowledge值类型和引用类型判断基本类型typeof判断对象的具体类型instanceof全等===关于数据类型的相关问题每日情感值类型和引用类型数据（值）类型值String任意字符串Number任意数值Booleantrue/falsenullnullundefinedundefined对象（引用）类型值Object任意对象function特别的对象，一种可以执行的对象Array

2020-08-01 11:15:17 337

原创前端学习笔记（12）之css一些无聊的知识点

BFC、布局、属性选择符、非IE常见bugBFC计算值的表达式 calc（）width的属性值雪碧图非IE浏览器常见bug属性选择符（通过html属性选择元素）浏览器四大内核结构性伪类每日一丧BFCBFC:块级格式化上下文 -> 独立的渲染区BFC布局规则：一、内部的Box会在垂直方向，一个接一个地放置。二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）三、每个元素的margin box的左边，与包含块

2020-07-29 20:08:14 1318 1

原创前端学习笔记（11）之过渡属性（transition）详解

有四个transition属性可以影响过渡效果指定要执行过渡的属性 transition-property:过渡效果持续的时间 transition-duration：过渡的时序函数 transition-timing-function过渡效果的延迟 transition-delay简写属性transition指定要执行过渡的属性 transition-property:值width height，多个属性间使用逗号隔开。如果所有属性都需要过渡，可以用all关键字。大部分属性都支持过渡效果。只要

2020-07-28 18:16:21 4527 3

原创前端学习笔记（10）之PC端高度自适应的两种情况

PC端高度自适应内容多时自适应高度，内容少时有最小高度没有最小高度，DIV完全自适应高度内容多时自适应高度，内容少时有最小高度min-height的值是分界点，小于min-height 容器高度保持在min-height值，大于min-height值时容器自适应高度。a: 内容增加，会把父元素高度撑开。b: 当内容减少的时候，让容器保持一个最小高度。最小高度的设置：min-height没有最小高度，DIV完全自适应高度子元素高度跟随父元素高度发生变化：*想要全局都用百分比设置宽

2020-07-28 17:50:58 714 1

原创为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？

其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位还有一个是“已定位”，这个定位也不一定非要是相对定位，也可以是绝对定位，为什么一般都是用相对定位呢，因为相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方，但是它原来占的地方也不会让出来的，这样的好处是原来在它周围的其他元素不会因为它的离开

2020-07-27 21:59:09 2088

空空如也

空空如也