月迷津渡丶的专栏

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

输入网址–>浏览器处理网址

原创 新老版本垃圾回收

标记清除引用计数新/老生代增量标记

原创 html-meta标签

原创 SHooks

SHooks api(0.5.0)https://www.npmjs.com/package/shooksSHooksyarn add shooks -Simport { useDebounce } from ‘shooks’useBattery [use Battery Status API]支持部分浏览器Firefox：43+Chrome：38+Opera：25+@return { charging,level,chargingTime,dischargingTime

原创 cookie/storage

原创 pm2原理

原创 hooks的优缺点

跨组件复用: 其实 render props / HOC 也是为了复用，相比于它们，Hooks 作为官方的底层 API，最为轻量，而且改造成本小，不会影响原来的组件层次结构和传说中的嵌套地狱；相比而言，类组件的实现更为复杂不同的生命周期会使逻辑变得分散且混乱，不易维护和管理；时刻需要关注this的指向问题；代码复用代价高，高阶组件的使用经常会使整个组件树变得臃肿；状态与 UI 隔离: 正是由于 Hooks 的特性，状态逻辑会变成更小的粒度，并且极容易被抽象成一个自定义 Hooks，组件中的.

转载 AMD、CMD、CommonJs、ES6的对比

都是用于在模块化定义中使用AMD、CMD、CommonJs是ES5中提供的模块化编程的方案import/export是ES6中定义新增的AMD-异步模块定义[依赖前置、异步定义]RequireJS在推广过程中对模块定义的规范化产出RequireJS：是一个AMD框架，可以异步加载JS文件通过define()函数定义，第一个参数是一个数组，里面定义一些需要依赖的包，第二个参数是一个回调函数，通过变量来引用模块里面的方法，最后通过return输出CMD-同步模块定义是SeaJS在推广.

转载 vue组件的通信方式

props/$emit 父子组件通信父->子props子->父 $on、$emit 获取父子组件实例 parent、children Ref 获取实例的方式调用组件的属性或者方法父->子孙 Provide、inject,官方不推荐使用，但是写组件库时很常用$emit/$on 自定义事件 兄弟组件通信Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() 自定义事件vuex 跨级组件通信Vuex、$attrs、$list..

原创 setState是同步的还是异步的(都有)

异步情况 在React事件当中是异步操作生命周期和合成事件中无论调用多少次 setState，都会不会立即执行更新，而是将要更新的·存入 _pendingStateQueue，将要更新的组件存入 dirtyComponent。当上一次更新机制执行完毕，以生命周期为例，所有组件，即最顶层组件didmount后会将批处理标志设置为 false。这时将取出dirtyComponent中的组件以及 _pendingStateQueue中的 state进行更新。这样就可以确保组件不会被重新渲染多次。se

转载 工厂 模式

什么是工厂模式工厂模式是用来创建对象的一种最常用的设计模式不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂工厂模式根据抽象程度的不同可以分为：简单工厂，工厂方法和抽象工厂简单工厂模式由一个工厂对象决定创建某一种产品对象类的实例主要用来创建同一类对象不同权限等级用户的构造函数中，保存该用户能够看到的页面在根据权限实例化用户使用ES6重写简单工厂模式时，我们不再使用构造函数创建对象，而是使用class的新语法，并使用static关键字将简单工厂

原创 Object.create

function a(){}a.prototype.age=1new a().age//1var p=Object.create(new a)p.age//1a.prototype.age=4p.age//4Object.create(a.prototype).age//4Object.create(a.prototype).__proto__ === a.prototype//trueObject.create(new a).__proto__ === a.prototype//fal

原创 MVVM和MVC有什么区别

什么是MVVM？视图模型双向绑定，是Model-View-ViewModel的缩写，也就是把MVC中的Controller演变成ViewModelModel层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据以前是操作DOM结构更新视图，现在是数据驱动视图。MVVM的优点：低耦合。视图（View）可以独立于Model变化和修改，一个Model可以绑定到

原创 Event Loop

单线程的原因与它的用途有关:与用户互动,多线程会带来复杂的同步问题避免复杂性任务队列所有同步任务都在主线程上执行，形成一个执行栈主线程之外，还存在一个"任务队列"。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，结束等待状态，进入执行栈执行。主线程不断重复第三步。只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。事

原创 keep-alive和多路复用

HTTP/1.x keep-alive 是什么HTTP/1.0 引入了 keep-alive 长连接，HTTP/1.0 中是默认关闭的，可以通过 Connection: keep-alive; 开启 ，HTTP/1.1 默认是开启的，无论加没加 Connection: keep-alive;所谓长连接，即在 HTTP 请求建立 TCP 连接时，请求结束，TCP 连接不断开，继续保持一段时间（timeout），在这段时间内，同一客户端向服务器发送请求都会复用该 TCP 连接，并重置 timeout 时间

原创 函数节流（throttle）与函数防抖（debounce）

debounce:调用需要等待nms，如期间再次调用则重新计时，之后执行throttle:调用后nms无法再次调用debouncevar debounce = function(fun,time){ var last; const ctx = this; const args = arguments; return (function(){ clearTimeout(last) last=setTimeout(()=>{ .

原创 new操作符的作用是什么

创建一个空对象。由this变量引用该对象该对象继承该函数的原型（更改原型链的指向）把属性和方法加入到this引用的对象中新创建的对象由this引用，最后隐式地返回this，过程如下：var object = {}object.__proto__ = fun.prototypeobject instanceof fun //true...

原创 type的继承

如果key不一样，合并（增加），一样的话取交集（都生效）交集取交集type T1 = 'a' | 'c';type T2 = 'a' | 'b';type T0 = T1 & T2;const TT: T0 = 'a';// const TT: T0 = 'b'; // Type '"b"' is not assignable to type '"a"'交集为空，无解type T1 = { a: string };type T2 = { a: number };.

原创 js的闭包

什么是js的闭包闭包是指那些能够访问自由变量的函数，自由变量是指在函数中使用的，但既不是函数参数又不是函数的局部变量的变量由此可以看出，闭包=函数+函数能够访问的自由变量，所以从技术的角度讲，所有JS函数都是闭包但是这是理论上的闭包，还有一个实践角度上的闭包，从实践角度上来说，只有满足即使创建它的上下文已经销毁，它仍然存在在代码中引入了自由变量，才称为闭包闭包的应用：模仿块级作用域保存外部函数的变量封装私有变量单例模式var Singleton = (function()

原创 写一个bind

创建一个新函数，当这个新函数被调用时，bind（）的第一个参数将作为它运行时的this，之后的一序列参数将会在传递的实参前传入作为它的参数Function.prototype.bind2 = function (context) { if (typeof this !== "function") { throw new Error("Function.prototype.bind - what is trying to be bound is not callable"); } var

原创 在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么？

DNS解析TCP连接发送HTTP请求服务器处理请求并返回HTTP报文浏览器解析渲染页面连接结束输入url后，首先需要找到这个url域名的服务器ip为了寻找这个ip，浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存-》系统缓存-》路由器缓存缓存中没有则查找系统的hosts文件中是否有记录如果没有则查询DNS服务器得到服务器的ip地址后，浏览器根据这个ip以及相应的端口号，构造一个http请求这个请求报文会包括这次请求的信息，主要是请求方法，请求说明.

原创 call,apply,bind

call（）方法和apply（）方法的作用相同，他们的区别在于接收参数的方式不同。对于call（）第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。（在使用call（）方法时，传递给函数的参数必须逐个列举出来。使用apply（）时，传递给函数的是参数数组）如下代码做出解释：apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.

原创 hasOwnProperty.call

JavaScript 并没有保护 hasOwnProperty 这个属性名，因此，当某个对象可能自有一个占用该属性名的属性时，就需要使用外部的 hasOwnProperty 获得正确的结果：var foo = { bar: 'Here be dragons'};foo.hasOwnProperty('bar'); //truevar foo1 = { hasOwnProperty: function() { return false; }, bar: 'Here be.

转载 蓝绿发布、灰度发布和滚动发布

蓝绿发布：两套环境交替升级，旧版本保留一定时间便于回滚灰度发布：根据比例将老版本升级，例如80%用户访问是老版本，20%用户访问是新版本滚动发布：按批次停止老版本实例，启动新版本实例蓝绿发布项目逻辑上分为AB组，在项目系统时，首先把A组从负载均衡中摘除，进行新版本的部署。B组仍然继续提供服务当A组升级完毕，负载均衡重新接入A组，再把B组从负载列表中摘除，进行新版本的部署。A组重新提供服务最后，B组也升级完成，负载均衡重新接入B组，此时，AB组版本都已经升级完成，并且都对外提供服务优点.

转载 Symbol

什么是Symbol它是ES6的一种新的基础数据类型，它的功能类似于一种标识唯一性的IDlet s1 = Symbol()console.log(typeof s1)//symbollet s2 = Symbol('test')//添加descriptionconsole.log(s2 === Symbol('test'))//false 每个Symbol实例都是唯一的应用场景const name = Symbol('name')const sex = Symbol('sex')let

原创 CSRF 跨站请求伪造 为什么b网站请求a网站的地址能带上a网站的cookie

知道csrf后的问题：CSRF 跨站请求伪造 为什么b网站请求a网站的地址能带上a网站的cookie答：script、image、iframe的src都不受同源策略的影响。

原创 实现一个简易版的微博，包含 client 和 server 两部分，并实现四个基础功能：关注、取关、发微博、获取用户微博列表

const assert = require(‘assert’);const question = ‘实现一个简易版的微博，包含 client 和 server 两部分，并实现四个基础功能：关注、取关、发微博、获取用户微博列表’;// A 关注 B 后，A 和 B 就成为好友关系（即使 B 没有关注 A）// 某个用户的微博列表，包含他本人和他所有好友的所有微博// 数据存储在 server 端// 具体执行逻辑，参见本题的测试部分class WeiboClient {/**@param

原创 从url到页面加载

浏览器根据主机名去操作系统的Hosts文件中查找主机名对应的IP地址浏览器如果在操作系统的Hosts文件中没有找到对应的IP地址，就去互联网上的DNS服务器上查找对应的IP地址浏览器查找到对应的IP地址后，就使用IP地址连接到Web服务器（三次握手）第一次握手： 建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；第二次握手： 服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此.

转载 react16.8+的生命周期

React 16之后有三个生命周期被废弃(但并未删除)componentWillMountcomponentWillReceivePropscomponentWillUpdate官方计划在17版本完全删除这三个函数，只保留UNSAVE_前缀的三个函数，生命周期分为三个阶段,分别是挂载阶段、更新阶段、卸载阶段挂载阶段:constructor: 构造函数，最先被执行,我们通常在构造函数里初始化state对象或者给自定义方法绑定thisgetDerivedStateFromProps.

原创 micro_macro

setTimeout(function(){console.log(1)},0);new Promise(function(resolve){ console.log(2) for(let i=0 ; i<10000 ; i++ ){ i===9999 && resolve() } console.log(3)}).then(function(){ console.log(4)});console.log(5);.

原创 Observer的实现

> 当时想到了这是问的vue源码,但没想起`Object.defineProperty`问题Observer的实现，请按照要求实现Observervar o = { a: 1, b: 2, c: { x: 1, y: 2 }}observer(o, ['a', 'c.x'], (v, prev) => { console.log(v); console.log(prev);});// o.a = 2;// 1,

原创 node后台截图 box-shadow无效-解决

最近有这样的需求,出现一个bug,截图的时候,box-shadow无效但不是不支持box-shadow检查一下box-shadow的单位,是不是vw,如果是vw,试试改成其他,如px应该就能解决了 ...

原创 nginx配置多个二级子域名

 配置/etc/nginx/nginx.conf(例子是https)user nginx;worker_processes auto;error_log /var/log/nginx/error.log;pid /run/nginx.pid;include /usr/share/nginx/modules/*.conf;events { worker_connectio...

原创 合并数组内的对象的数字

### 标准用法```const oa = require('object_array')oa([{a:1,b:2,c:3},{a:4,b:5,d:6}])//{a:5,b:7,c:3,d:6}oa([{a:{a1:1,b1:2},b:2},{a:{a1:3,a2:4,a3:5}},c:{c:10}}])//{a:{a1:4,b1:2,a2:4,a3:5},b:2,c:{c:10}}...

原创 koa上传文件处理403

`403`一般是上传文件过大导致&gt; 使用koa-body 解决`koa`的话,如```const koaBody = require('koa-body')app.use(koaBody({      jsonLimit:'10mb'      textLimit:'10mb'      formLimit:'10mb'      maxFieldsSize:'10mb',}));```&g...

原创 forever 日志 按日期输出

package.json --scripts"for": "forever -p ./logs -l logfile.log -o ./logs/outfile.log -e ./logs/errfile.log -a -n --pidFile pidFile.log start app.js”,"for:restart": "forever -p ./logs -l logfile.log -...

转载 wine mac 中文 方块乱码 解决

新建文件  fonts.reg 内容为[HKEY_LOCAL_MACHINE\Software\Microsoft\Windows NT\CurrentVersion\FontLink\SystemLink]"Arial"="Lantinghei.ttc""Lucida Sans Unicode"="Lantinghei.ttc""Microsoft Sans Serif"="Lant.

原创 保存blob为本地文件

var reader = new FileReader()reader.onload = function(){ var buffer = new Buffer(reader.result) //temp文件夹应已存在 fs.writeFile(`temp/${Date.now()}.mp4`, buffer, {}, (err, res) => { if

原创 safari使用canvas引入域外的图片

> Uncaught DOMException: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.如遇到跨域问题,在非safari中一般可以添加:const _img = new Image _img.setAttribute('crossOrigin', 'a

原创 session-path

一般情况下,后台设置session的时候,path为空,这样在设置了session的网站,整个域名下都能从cookie中获取信息,但这里是设置了path如Response Header-Content-Length:50Content-Type:application/json; charset=utf-8Date:Sun, 03 Sep 2017 15:12:12 GMTProxy-C