繁易の前端乐园

不为繁华易匠心

解读 DOMContentLoaded 与 load 事件

起因自己在最近的学习过程中，发现一些之前记住的知识点因为太久没有用到，而产生了模糊感。所以在回学校的空隙时间，准备好好的理一下这些基础知识。而自己又对性能优化比较感兴趣，所以这次从性能优化的角度出发。两种加载事件一般在加载的时候，会触发两种事件，一种是 DOMContentLoaded，一种是 Load 事件。两种看起来差不多，其实内部还是有很大的区别的。查看 MDN 的解释是：当初......

Posted by Lxxyx on 2017-08-31

TypeScript - 不止稳，而且快

前言关于 TypeScript 是什么，应该大部分人都已经知道了，但是在这儿，还是摘抄一下知乎的回答： TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。对于我个人而言，使......

Posted by Lxxyx on 2017-07-23

状态决定视图——基于状态的前端开发思考

前提在现在的前端社区，关于MVVM、Model driven view 之类的概念，已经算是非常普及了。React/Vue 这类框架可以算是代表。而自己虽然有 React/Vue 的使用经验，也了解 MVVM，状态机等核心概念，但是却一直没有很好的应用。直到前几天接手一个组件开发的需求，写之前尝试细细分析时，才突然想通这之间的联系。Emmm……内容比较浅，并不是什么了不得的神兵利器。更多的......

Posted by Lxxyx on 2017-07-09

浅析Node与Element

起因起因有二：在看winter老师的分享：《一个前端的自我修养》时，有注意到这么一幅图，里面有写childNode和children属性。昨天有学弟问起我，能否自己定义一个所有元素节点通用的方法，就像数组可以用 Array.prototype.xxx 来添加一个所有数组的方法。于是发现自己对于Node和Element的概念其实还不太清晰，所以上MDN看了看，写篇博客沉淀一下。 No......

Posted by Lxxyx on 2017-06-25

Redux源码阅读笔记(2) - Redux的原理与适配

范式与其说Redux是一个工具类库，我更想说它是一套处理状态与数据变更的范式。官方有明确的一些规则，社区也累积了很多最佳实践。从谷歌搜索来看，这是个很有趣的现象。至于个人看法则是根据项目和团队实际情况来选用Redux方案，而非强制上马，避免未来可能会背的技术债。 Redux FlowRedux是单向数据流，其工作流如下图所示（看不懂或者没用过的小伙伴可以先看看Redux文档，用一用）......

Posted by Lxxyx on 2017-05-22

Redux源码阅读笔记(1) - Why Redux?

起因日常的习惯里，就有阅读开源项目源代码的习惯。之前的项目中则大量的应用了Redux作为状态容器，也积累了一些问题，所以今天试着阅读Redux源代码，去解决自己的困惑。在网络上Why Redux、Redux原理分析、Redux源代码分析之类的文章层出不穷，之所以写这篇文章的原因是为了解决自己在使用Redux时说产生的一些好奇与困惑。并非科普文,如果你有遇到类似的问题，不妨看看~ 问题一直......

Posted by Lxxyx on 2017-05-20

如果我们不曾相遇

风起你推荐了这首歌给我，细细的听了一遍，然后开始了一下午的单曲循环。歌曲在线试听歌词如果我们不曾相遇我会是在哪里如果我们从不曾相识不存在这首歌曲每秒都活着每秒都死去每秒都问着自己谁不曾找寻谁不曾怀疑茫茫人生奔向何地那一天那一刻那个场景你出现在我生命从此后从人生重新定义从我故事里苏醒如果我们不曾相遇你又会在哪里如果我们从不曾相识人间又如何运行晒伤的脱皮意......

Posted by Lxxyx on 2017-05-18

开源了两个小插件

开源两个自己之前写的小工具，koa-router-decorator与react-native-dynamic-stylesheet. koa-router-decorator链接在此：koa-router-decorator第一个是用装饰器写路由的工具。想法源于 flask，之前看 flask 写的路由，觉得用装饰器写的话，会比较优美，然后就写了这个插件。效果如下： react-nati......

Posted by Lxxyx on 2017-05-14

这些天做过的一些分享

这段时间，一直专注于给家园工作室团队内部去做一些分享。有规范的制订，也有前端的学习，还有关于学习方面的分享。 REM + Flex 布局第一份：REM + Flex 布局讲的是我在写移动端页面，和学习 Flex 布局中的一些经验和好的资源。家园项目 Git 规范第二份：家园项目 Git 规范讲的是给家园工作室制订的 Git 规范，参照 Git Flow，但是根据我们的实际情况，增......

Posted by Lxxyx on 2017-05-06

JavaScript实现列表无限加载

起因之前自己在使用这种网站时，经常看到无限加载的效果。今天正好看到了getBoundingClientRect这个Api，就想着试试看如何实现Infinite scroll的效果。原理在需要无限加载的列表底部，埋下一个隐藏元素。当不断滑动时，隐藏元素将出现在视窗(viewport)里，也就意味着当前浏览的列表已经到底部了。这时候就需要进行列表加载。大概的HTML结构如下： 12345678......

Posted by Lxxyx on 2017-04-27