枕月娘娘万寿无疆-CSDN博客

原创 vscode 配置文件

// 将设置放入此文件中以覆盖默认设置{ "editor.fontSize": 18, "editor.fontFamily": "'Source Code Pro', 'Noto Sans CJK SC', Consolas", "editor.rulers": [120], "editor.tabSize": 2, "editor.minimap.enabled": true, "editor.minimap.renderCharacters": fal

2021-04-16 10:35:35 242

原创【小结】从输入URL到页面显示发生了什么？（二）渲染

本文总结从输入URL到页面显示的第二部分内容：渲染（从拿到HTML资源到显示的过程）主要过程构建DOM树样式计算，分成三步把 CSS 转换为浏览器能够理解的结构–styleSheets转换样式表中的属性值，使其标准化计算出 DOM 树中每个节点的具体样式（继承和层叠规则）布局：计算出DOM树中可见元素的几何位置。在这个阶段完成两个任务创建布局树：额外构建一颗值包含可见元素的布局树布局计算对布局树进行分层，并生成分层树：并不是布局树的每个节点都包含一个图层，如果一个节点.

2020-10-31 17:43:03 168

原创【小结】从输入URL到页面显示发生了什么？（一）导航

本文总结从输入URL到页面显示的第一部分内容：导航（从用户发出URL请求到页面解析之前的过程）基本概念chrome浏览器包含5个进程：浏览器进程：主要负责用户交互、子进程管理和文件储存等功能。网络进程：面向渲染进程和浏览器进程等提供网络下载功能。渲染进程：主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。（为保证系统安全，渲染进程运行在安全沙箱中）4.插件进程：负责插件的运行，因插件易奔溃，所以需要通过插件进行来隔离，以保证插件进程.

2020-10-31 17:17:44 208

原创【学习】你不知道的JavaScript + 忍者秘籍 + 红宝书 -- 原型、对象、继承、instanceof

参考资料： js [[Prototype]]、proto 和Prototype

2020-10-13 23:37:54 348 1

原创【学习】你不知道的JavaScript + 忍者秘籍 -- 作用域 +闭包小结

Q:编译语言，动态语言Key2. 编译原理：分词/词法分析（Tokenizing/Lexing），解析/语法分析（Parsing），代码生成。3. LHS 和 RHS：左查找和右查找LHS：找到变量的容器本身；RHS：找到变量的值4. 引擎：负责整个JavaScript程序的编译及执行过程编译器：负责语法分析及代码生成作用域：负责收集并维护由所有声明的标识符（变量）所组成的一系列的查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。5. 词法作用域 &&

2020-10-11 18:19:26 111

原创 js的简单数组去重

介绍几种数组去重的方法//举例数组：const arr = [1,1,'2','2',null,null,undefined,undefined,new String('1'),new String('1'),/a/,/a/,NaN,NaN]set

2020-10-11 16:58:29 108 1

原创手写系列之--new/create

new创建一个新对象，这个对象的__proto__要指向构造函数的原型对象；执行构造函数返回值为object类型则作为new方法的放回置返回，否则返回新建的对象const myNew = function(){ const obj = {}; const [constructor, ...args] = [...arguments]; obj.__proto__ = constructor.prototype; const res = constructor.apply(ob

2020-10-11 16:00:20 258 1

原创手写系列之--promise

// classconst PENDING = 'pending';const FULFILLED = 'fulfilled';const REJECTED = 'rejected'class MyPromise{ constrctor(executor){ this._status = PENDING； this._value = null; this.fullfilledFuncs = []; this.rejectedFuncs = [];

2020-09-26 16:48:02 86

原创 js基础-函数中的this

函数的调用方式作为函数直接调用作为方法调用构造函数方式apply 和 call箭头函数箭头函数中的this在声明的时候确定，而不是调用的时候确定bind创建新函数创建新函数，并绑定到bind方法传入的参数中，被绑定的函数与原始函数具有一致的行为。...

2020-09-26 16:47:00 210

原创手写系列之--call/apply/bind/防抖/节流

callcall() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数语法：function.call(thisArg, arg1, arg2, …)JavaScript中由于函数的this指向它的直接调用者，我们变更调用者即完成this指向的变更：Function.prototype.myCall = function(thisArg, ...args) { const fn = Symbol('fn') // 声明一个独有的Symbol属性, 防

2020-09-15 09:56:40 183

原创 ES6-promise小技巧

Promise.all([…])从Promise.all返回的主promise在所有成员promise都完成后才会执行，如果这些promise中有任何一个被拒绝（reject/error），住promise就会被拒绝，并丢弃来自其他所有promise的结果。---- 所以针对Promise.all([…])中的成员promise，注意关联一个reject/error的catch如果数组为空，主promise会立即执行。Promise.race([…])一旦有任意一个promi.

2020-08-30 16:15:01 100

原创 git命令全家福

1. 切换分支git checkout dev2. 拉取远程分支到本地,并切换到该分支git pullgit checkout -b dev(本地分支名称) origin/dev(远程分支名称)

2020-08-21 15:33:36 105

原创 webpack本地调试起https

webpack.config.jsproxy:{ "api":{ https:true }}package.json"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --https"起来之后就是https

2020-08-21 12:08:44 1702

原创【持续更新之】CSS小技能

empty 伪类:empty 伪类用来匹配空标签元素，例如：<div class="cs"></div>.cs:empty{ width: 120px; height:120px; border:10px dashed;}此时，div元素就会匹配:empty伪类用法：隐藏空元素例如，某个模块里的内容是动态的，可能是列表，也可能是按钮，这些模块容器常包含影响布局的CSS属性，如margin、padding属性等。当然，这些模块里面有内容的时候，布局显.

2020-08-05 10:11:02 111

原创 ES6学习记录（一）--块级作用域

var 声明带来的疑惑–变量提升机制：在函数作用域或者全局作用域中通过关键字var声明的变量，无论实际上是在哪里声明的，都会被当成在当前作用域顶部声明的变量。块级作用域存在于：函数内部块中（{}之间的区域）let声明用法与var相同，可以把变量的作用域限制在当前代码块之中。const声明每个通过const声明的称量必须进行初始化。用const声明的常量，一旦被设定之后不允许修改绑定，但允许修改值：意味着用const声明对象之后，可以修改该对象的属性；但是用const声明一个字符串.

2020-05-16 11:42:20 269

原创 taro+微信云服务开发记录

准备工作本地全局安装 tarojs/clitarojs-cli初始化前端工程安装微信开发者工具上手用cmd运行npm run dev:weapp 【重要：运行起来才能热更新】打开微信开发者工具【在这调试】打开云函数调试模式【接口调试】...

2020-05-10 22:38:31 184

原创 Virtual DOM 和 diff 算法小结

什么是 Virtual DOM ？本质来说是一个 js 对象；在 vue 的 template 和真实的 dom 之间的一个桥梁。Virtual DOM 带来的好处？Virtual DOM最初的目的，就是更好的跨平台，比如 Node.js 就没有DOM，如果想实现 SSR(服务端渲染)，那么一个方式就是借助Virtual DOM，因为Virtual DOM本身是JavaScript对象...

2020-04-19 13:07:59 178

原创 Vue组件之间的通信方式

六种方式1. props / $emit 适用于父子组件通信略…2. ref 与 $parents / $children 适用于父子组件通信不好维护,不推荐使用3. EventBus 适用于父子隔代兄弟组件通信这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件.初始化新创建...

2020-04-11 21:32:24 120

原创 vue的双向绑定原理---defineProperty->Proxy

可以实现双向绑定的方法有很多,KnockoutJS基于观察者模式的双向绑定,Ember基于数据模型的双向绑定,Angular基于脏检查的双向绑定,本篇文章我们重点讲面试中常见的基于数据劫持的双向绑定。

2020-03-29 17:56:07 285

原创 js的克隆

浅克隆Objext.assign()lodash的 _.clone方法// 浅克隆函数function shallowClone(o) { const obj = {}; for ( let i in o) { obj[i] = o[i]; } return obj;}// 被克隆对象const oldObj = { a: 1, b:...

2020-03-28 17:09:42 119

原创 nextTick相关问题

nextTick引出的问题1.MessageChannelhttps://www.jianshu.com/p/4f07ef18b5d72.带源码的解析https://juejin.im/post/5ae3f0956fb9a07ac90cf43ehttps://juejin.im/post/5cd9854b5188252035420a13

2020-03-28 17:08:03 258

原创 v-loading使用(来自官网介绍)

记录使用Element-UI的v-loading指令。Element提供了两种调用Loading的方法：指令和服务。指令对于自定义指令 v-loading，只需要绑定 Boolean即可，默认情况下，loading遮罩会插入到绑定元素的子节点通过添加 body修饰符，可以使遮罩插入至DOM中的body上。自定义加载文案、图标和背景色在绑定了v-loading指令的元素上添加elemen...

2019-07-31 17:08:33 64265 2

sherpan的博客