Bernie
Bernie
## React 更新视图过程 > 说在前面，着重梳理实际更新组件和 dom 部分的代码，但是关于异步，transaction，批量合并新状态等新细节只描述步骤。一来因为这些细节在读源码的时候只读了部分，二来如果要把这些都写出来要写老长老长。 真实的 setState 的过程： ```javascript setState( partialState ) { // 1. 通过组件对象获取到渲染对象 var internalInstance = ReactInstanceMap.get(publicInstance); // 2. 把新的状态放在渲染对象的 _pendingStateQueue 里面 internalInstance._pendingStateQueue.push( partialState )...
# SPA项目经验总结 最近选用了 React + React-Router 的技术栈，自然而然走了 SPA 的路线，下面总结下在所谓的 SPA 下的一些技术点的坑。 ### 登录态的维持 1. 现有方案 登录页面发起 Ajax 请求获得用户 token，把 token 存放在 localStorage 里面，然后通过前端路由跳转到用户主页。随后用户相关的请求都会在 http head 里面带上这个 token。服务器端只负责验证每次请求中 token 的合法性（譬如：是否过期）。 2....
## React组件编写思路（二） [上一篇](https://github.com/sixwinds/sixwinds.github.com/issues/7)讲了 React 两种最常见的组件：受控组件和非受控组件。为了可用性，我们一般编写出来的组件希望支持这两种特性：可以通过组件自身的方法来改变组件的某(些)状态，也可以通过 props 的值的变化来改变组件自身的同一个(些)状态。 组件改变自己的状态只能通过改变 state 完成，而把 props 的变化反映到 state 却是可以通过生命周期函数来实现。首先还是拿上一篇中受控 alert 组件代码为例： ```javascript class Alert extends React.Component { constructor( props ) { super( props ) this.state...
# 不深入只浅出ES6 Promise | 笔记 用例子直观的陈列 Promise 的行为作为笔记（如果能帮助新手快速了解 Promise 的使用自然最好，最终还是希望不但要学会使用还要了解规范），此行为规范基于的是 ES6 的规范，以后 JS 规范更新可能改变某些行为。原理及规范请查看考如下资料： 1. [《You Don't Know JS: Async & Performance - Chapter 3: Promises》](https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch3.md) 这是著名的《你不知道的JavaScript》的英文原版章节。-- 这篇对于新人的缺点是过长。 2. [Promises/A+...
# 从人如何思考看程序员解决问题的思路 - 论原理的重要性 威林厄姆教授的《为什么学生不喜欢上学》中阐述了，思考是把环境信息和长期记忆信息进行重新加工的过程。长期记忆是你对已有知识经验的认知，包括事实性知识和过程性知识。当某个问题超出了你的认知范围时人是没有办法思考的（譬如问你鲁菜中的清汤如何能做到煮时无泡沫）。所以对基础知识（事实性知识）的学习是有必要的。推演到技术上，很多前端前辈强调面试很看中面试者解决问题的能力和思路，但是这些都不是凭空产生的。你必须要知道很多的基础知识和日积月累的项目经验（过程性知识），才有可能通过推理把你存在长期记忆中的基础知识和面临的问题进行结合来解决问题。你不可能让一个完全不知道 HTTP 协议的人回答“当你在浏览器敲下地址后会发生什么”。 以下用一个我自己 debug 的实例来说明下基础知识（原理）和经验发挥的作用。 ### 项目技术背景: 移动端页面，使用 react 和 material-ui，淘宝 lib.flexible 做移动端适配。 ### bug现象 当页面加载时，按钮上的字会从下往上升的动画效果，见下图：  ### 对于这个问题 debug 的思路及分析步骤如下: 1. 看上去是一个动画效果，通常是 js 修改了...
# 5人以下团队 leader 职责(构想草图) 本人没有作为长期 leader 一线经验，这是我自己在工作中的观察和构想，如果让我做一个5人以下前端团队 leader 我需要做的一些事情。 1. 分配任务 在开需求会议接任务时，一定要带上对应的开发人员。因为据我自己的经验，理解需求对开发来说很重要，能减少因为沟通理解产生的逻辑 bug，能够在需求会议上就发现需求不严谨或者逻辑有问题的地方，从技术上可能提供更优的解决方案。并且为了提高开发人员的这个意识，会在平时和他们强调以上的这几个点。 在分配任务时要把业务相同的模块劲量划分给同一个人，这样可以避免很多沟通成本，利于此人产出更高质量的代码(因为相同逻辑的的模块编码前需要统一规划，如果多人做，这几个人不但要沟通，还要处理风格不同的，代码质量不同的问题)。 2. 技术选型 评估团队的技术能力，选择最适合的人做首次选型(这个人可能是在某方面经验最丰富，可能是技术最强的)，然后让此人做完选型及基础“架构”，全队评估。一来是为了让所有队员知道如此选型和架构背后的逻辑(同时间接可以提高其他同事的技术视野)，二来可以帮助选型者弥补欠考虑的地方。 3. 技术规范 和第二点类似也是找经验最丰富的人来做(无论是队员或者是 leader)，然后也是评审，为了达到的目的和第二点也相同。但是技术规范这点在实施时要充分考虑队员的顾虑，因为在规范上有些东西比较主观，如果碰到特肘的技术人员不认可某些规范，也要做好妥协的准备。平时是否要长期念叨良好规范这件事情我也没有经验，怎么做我也不知道。 4. 成员任用 不要怕团队成员技术超过自己而打压队员，leader 的任务之一就是服务团队，最大化团队战斗力。这点是最近在书中看到的，个人感觉是很有道理，所以就列一下。 5. 新人培养 个人觉得一直手把手教是不太可取的，新人刚刚上手的时候可以这样，但是需要在平时逐渐培养自己就工作中就某个知识点进行自我学习的能力，如何debug 的能力。这些能力也不是一蹴而就的，可以通过布置非公司任务给新人，让其完成，并在完成后进行评审来帮助其进步。 6....
# 移动H5页面开发多屏适配 - 方案篇 **此篇总结是在学习了 viewport 基础知识，再参考了淘宝的 lib.flexible 可伸缩布局这个库，自己推演了 lib.flexible 是怎么作出这个解决方案的。** 上一篇我们说过，对于 device-width 相同但是分辨率不同的手机我们可以通过设置 meta viewport 把移动页面的宽度归一到一个统一的宽度（这样一套布局就可以适用不同分辨率的手机）。但是现在不但 iphone 阵营自己出了好几个 device-width （320px，375px，414px），android 阵营更时百花齐放。那么我们对于不同的宽度的页面我们希望如果能用一套 css 搞定。最容易想到的就是使用百分比来设置尺寸。但是 css 百分比是根据父元素的尺寸来计算，而不是根元素譬如 viewport，这样对嵌套过深的元素计算尺寸非常不友好。同理使用 em 单位也会产生同样的问题。幸好 css3...
# 移动H5页面开发多屏适配 - viewport和像素篇 最近刚刚接触移动端的页面开发，遇到的第一个问题就是搞清楚多屏适配的方案。要知道多屏适配的原理就要知道移动端各种屏幕大小对开发的影响，最基础的是像素和 viewport 的概念。以下是网上一些像素及 viewport 的资料的知识梳理（绝大多数就是总结于 ppk 两篇谈论 viewport 的文章 [one](http://www.quirksmode.org/mobile/viewports1.html)，[two](http://www.quirksmode.org/mobile/viewports2.html)，图片亦是出自于 ppk 的文章）。 在 pc 开发时代我们 css 用的最多的长度单位就是 px，通常我们认为 css 里面的像素就是屏幕的物理分辨率。其实 css 像素和屏幕的物理像素标准上并没有 1:1 的关系，只是在 pc 时代他们通常正好是...
# css-loader 对图片的处理说明 | 笔记 css-loader 对图片的处理说明（基于 webpack 1 ） 项目目录结构 ``` proj ｜ ｜ --- webpack.config.js ｜ ｜ --- dist ｜ ｜ --- src ｜ ｜ --- index.js ｜...
# 防止网页在微信中下拉露黑底方案调研 ### 问题 如果用微信打开网页，如果我们在网页第一屏继续下拉的情况下，顶部 webview 上部会有一块黑底显示出来，类似于原生 App 的下拉更新的样子。现在我们希望禁止这个行为。 ### 分析 通过谷歌大法发现，这个行为应该是 touchmove 事件的默认行为。要禁止这个黑底出现，只要监听 touchmove 事件，在其中 preventDefault() 即可。但是如果简单的禁止了 touchmove 事件的默认行为，那么网页本身就无法进行上下滚动。那么我们是不是可以检测当前网页是否已经滚动到最上部，如果滚动到了最上面（无法继续下拉）那么我们再禁止 touchmove 的默认行为。 ### 解决方案 我们假设页面有一个容器 div#wrapper，它负责整个页面的滚动。为什么不用 body，因为谷歌大法告诉我，有的版本的浏览器会不让 js 去禁止 body...