LeoEatle's World

Do have faith in what you are doing.

升级到Babel 7的经验

Babel的最新版本Babel 7 已经在Henry Zhu的不断努力下发布了，他真的是全身心地投入到了Babel的开发中，而Babel对于前端界的贡献也是有目共睹，没有这个神奇的编译器，前端界要落地ES6语法恐怕还要再等十年。最近我在给自己团队的UI组件库升级到Babel 7，没有想象中那么难，但也有一些需要注意的问题，这里分享一些升级的体会和经验。关于stage-x插件的废弃Babe......

Posted by Leo Eatle on 2018-09-17

iOS webview scrolling issue

在iOS中，有很多苹果为了用户过度设计的一些特性，这导致一些出奇意料的结果。比如我这篇要说的，是iOS中webview上下滑动，即使到了顶部，也会有个可以拉下去再回弹的效果。要解决这个问题其实也容易，只需要在iOS中设置这两个属性：webView.scrollView.bounces = false; 如果希望webview完全不能滑动，常见于一些全屏的活动页面，可以这样设置：webVie......

Posted by Leo Eatle on 2018-08-30

释放webpack的真正潜力

在上周末广州举办的feday中，webpack的核心开发者Sean在介绍webpack插件系统原理时，隆重介绍了一个中国学生于Google夏令营，在导师Tobias带领下写的一个webpack插件，webpack-deep-scope-analysis-plugin，这个插件能够大大提高webpack tree-shaking的效率。 tree-shaking目前的缺陷tree-shakin......

Posted by Leo Eatle on 2018-08-27

React16源码解析（Fiber）

前言在看这篇解析Fiber源码的文章之前，建议可以先去看看Fiber的相关文章，Fiber算法相比原来的虚拟DOM，其实在结构上还是保持了DOMElement和Fiber对象的对应关系，只是原来是用树的形式，Fiber改用了链表存储。另外就是Fiber招牌的异步渲染，原来的React在render过程中如果组件过多，会导致浏览器忙于执行js而不会响应诸如onInput的事件。而Fiber能......

Posted by Leo Eatle on 2018-08-05

React16源码解析（ReactDOM）

前言上篇文章中看完了React库的react部分，这次我们来看React是如何将React框架渲染成DOM的。 ReactDOM.jsReactDOM.js是react-dom这个库的入口，我们最关心的当然是reactDOM.render这个方法的实现，在这个文件里面搜索render，我们很快发现其实调用的是一个legacyRenderSubtreeIntoContainer方法，之所以带上......

Posted by Leo Eatle on 2018-08-05

React16源码解析(React篇))

前言虽然分析React源码的文章已经很多了，但大部分都是以自己的理解将React划分成每个模块来说的，对于一个不知道如何开始阅读源码的人，几乎没有什么帮助。再加上最近React 16版本的发布，相比之下以前一些分析文章已经过时了，所以这里我写一篇按照源码阅读顺序来分析React源码的文章，建议可以参考这篇文章看React源码，可以作为阅读React源码的地图使用。入口git clone了R......

Posted by Leo Eatle on 2018-08-04

SDT自我决定理论

SDT自我决定理论最近在内网看到一篇很有意思的将游戏玩家心理的文章，主要在解释一个理论叫做SDT自我决定理论 SDT的提出是在2000年，但是是在2006年才被引入游戏领域。 SDT将人们玩游戏的需求分为三块，自主（Autonomy）、能力（Competence）、关系（Relateness），这代表了三种游戏动机自主自主即玩家能够自由选择自己的游戏体验，这体现在游戏的方方面面，可以说是游......

Posted by Leo Eatle on 2018-07-31

UI库的目录设计和babel-plugin-import

最近在规划小组里使用的UI库，事实上也已经开发了一段时间了，但是最近想使用antd这种引入的方式时出现了问题 import { DatePicker } from 'antd' 这种引入方式自然是很爽的，但是如果不用babel-plugin-import做相应的转换的话，这样会把整个UI库都引入到代码中。 import DatePicker from 'antd/lib/......

Posted by Leo Eatle on 2018-07-12

阅读代码和英文文章小技巧

最近在看一篇Medium技术文章的时候突然想到一个问题，我们应该如何加快阅读英语文章甚至代码的速度，脑海中逐渐形成一个重要的结论，那就是只看重点就如同英语老师告诉我们的，看句子首先抓主谓宾，that后面的基本都是形容这个事物，可看可不看，看到this就应该脑海中自动联系上下文代入名词，等等这些技巧在代码中也可以通用。代码中最常见的函数调用，最重要的也是抓住函数调用者、函数以及传参，J......

Posted by Leo Eatle on 2018-07-02

flex-end make scrollbar disappear

又遇到一个神奇的问题目前在做一个消息列表，新信息必须在div的底部首先出现，然后一直向上堆积，并且要可以滑动来查看之前的信息问题在于，如何让新的信息div能首先出现在底部搜了一下，果然已经有前人遇到了类似的问题，第一个解决方案如下：.parent { display: flex; justify-content: flex-end; flex-direction: co......

Posted by Leo Eatle on 2018-06-26