codingmeup

#### Service Worker 场景 Service Worker除了可以缓存和离线开发，其可以应用的场景还有很多，举几个例子（参考自MDN）： - 后台数据同步 - 响应来自其它源的资源请求， - 集中接收计算成本高的数据更新，比如地理位置和陀螺仪信息，这样多个页面就可以利用同一组数据 - 在客户端进行CoffeeScript，LESS，CJS/AMD等模块编译和依赖管理（用于开发目的） - 后台服务钩子 - 自定义模板用于特定URL模式 - 性能增强，比如预取用户可能需要的资 源，比如相册中的后面数张图片 - Mock接口， 重构人员写高保真原型的时候，模拟请求伪造数据的时候，可以不用依赖web环境，直接在Service Worker中拦截和返回模拟数据，于是整个项目只有干净的HTML、CSS和JS

### SW和PWA技术的关系 PWA全称为“Progressive Web Apps”，渐进式网页应用。功效显著，收益明显 PWA的核心技术包括： - Web App Manifest – 在主屏幕添加app图标，定义手机标题栏颜色之类 - Service Worker – 缓存，离线开发，以及地理位置信息处理等 - App Shell – 先显示APP的主结构，再填充主数据，更快显示更好体验 - Push Notification – 消息推送，之前有写过“简单了解HTML5中的Web Notification桌面通知” 有此可见，Service Worker仅仅是PWA技术中的一部分，但是又独立于PWA。也就是虽然PWA技术面向移动端，但是并不影响我们在桌面端渐进使用Service...

## 15、组件中setState继承自ReactComponent、在挂载组件的时候实例会接受一个React的更新队列作为updater的属性、setState传递的对象(partialState)执行enqueneUpdate、如果更新已经在进展中、则注入到dirtyComponents如果没有则初始化打开更新事务再注入到dirtyComponents #### 一、 每个组件都有自己的一组处于等待的”状态“的列表，当你在一次事务中调用 setState 方法，其实只是把那个状态对象注入一个队列里，它会在之后一个一个依次被合并到组件 state 中。调用此setState方法同时，你的组件也会被添加进 dirtyComponents 列表。 ##### 简单说： setState后判断批处理事务有没打开，无就打开，把受到影响的组件添加到dirtyComponents列表、调用ReactUpdates.flushBatchedUpdates的同时关闭事务、再处理dirtyComponents列表的中的组件（这里有排序、挂载的时候组件获得的序列整数[mount order]、父组件先挂载先更新）、根据提升批号updateBatchNumber避免重复更新同一个组件 ## 16、关于更新组件 ##### 已经挂载后的组件执行再更新操作的时候、componentWillReceiveProps和shouldComponentUpdate方法会被调用、若这个更新有效那DOM会被更新、DIFF算法会生效、对复杂的实现往往会重写、componentWillUpdate不调用setState了、把componentDidUpdate压入队列、调用render方法拿到记过、判断组件是否需要被完全替换或者额外的更新、调用已经挂载后的组件执行再更新操作的时候、componentWillReceiveProps和shouldComponentUpdate方法会被调用、若这个更新有效那DOM会被更新、DIFF算法会生效、对复杂的实现往往会重写、componentWillUpdate不调用setState了、把componentDidUpdate压入队列、调用render方法拿到记过、判断组件是否需要被完全替换或者额外的更新、调用componentDidUpdate 

[第 18 题：React 中 setState 什么时候是同步的，什么时候是异步的？ #17](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/17) 这里所说的同步异步， 并不是真正的同步异步， 它还是同步执行的。 这里的异步指的是多个state会合成到一起进行批量更新。 在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state 。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。 原因： 在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是，有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。 注意： s**etState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”**，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。 详细请看 深入 [setState](https://github.com/LuNaHaiJiao/blog/issues/26) 机制

--- Axios使用及源码分析 --- ## 背景 工程院推进的React脚手架使用Axios网络库，Vue2.0也推荐使用。结合平常开发过程中的使用，总结遇到的问题以及分析部分核心源码。 ## Axios介绍 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 它有以下特性： - 支持Promise API - 支持request和response拦截 - 转换请求与响应数据 - 取消请求 - 支持客户端XSRF攻击防护 - 支持各主流浏览器及IE8...

#### 前端简易版接口聚合模块 request-combo 场景： - 一个支持参数合并的接口，在组件化或其他场景下调用了不同参数的相同的接口，这时把这些调用合并成一个或多个接口再请求。 - 避免发起相同的请求,某些情况下发起了相同的请求，经收集处理后，实际只发起一个请求。但是不同的发起端的callback 都能得到处理。 设计： - 要知道接口的基本信息,包括但不限于 url、params、callback… - 既然要聚合，那么得有一个收集接口的队列 - 每个接口的队列要有状态，当一个新接口到来时，该接口的队列可能还没创建，可能正在收集，可能刚发完请求。 - 要有接口队列发起请求的条件，收集时间够了或者收集长度够了… - 有缓存机制，已获取的数据暂时缓存起来 ```js import axios from 'axios'; interface ApiData { url:...

js中this的指向，如何改变，call和apply和bind的区别 ##### 在JavaScript中this可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式，this 绑定的对象即函数执行的上下文环境情况 #### 1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window(非严格模式，在严格版中的默认的this不再是window，而是undefined) #### 2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。#### 3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象 ```js // 作为对象方法调用 var test = { a : 5, b : 6, sum : function () { return this.a +...

https://juejin.im/post/5c0c87b35188252e8966c78a

## 总结 如果要判断一个**运行中函数的 this 绑定**， 就需要找到这个函数的**直接调用**位置。 找到之后 就可以顺序应用下面这四条规则来判断 this 的绑定对象。 - new 调用：绑定到新创建的对象，注意：显示return函数或对象，返回值不是新创建的对象，而是显式返回的函数或对象。 使用new操作符调用函数，会自动执行以下步骤。 1. 创建了一个全新的对象。 2. 这个对象会被执行[[Prototype]]（也就是__proto__）链接。 3. 生成的新对象会绑定到函数调用的this。 4. 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。 5. 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用会自动返回这个新的对象。 - call...

--- 适配器模式-设计模式 --- 适配器模式 Adapter ============= 将一个对象的接品（方法或属性）转化成另外一个接口，以满足用户需求，使对象之间接口的不兼容问题得于兼容。 两个成熟的类需要通信，但是接口不同，由于开闭原则，我们不能去修改这两个类的接口，所以就需要一个适配器来完成衔接过程。  ### 框架适配例子 ````js var A={ g : function(id){ return document.getElementById(id); } } ```` ````js var A={ g : function(id){ return $('#'+id).get(0);...