10 2018 档案
摘要：React 等框架使用 index 做 key 的问题 假如有两个树，一个是之前，一个是更变之后，我们抽象成两种可能性。 1. 插入内容在最后 2. 插入内容在最前 关于插在中间，原理一样，就不阐述。 使用 ul 代表树，并且使用了 index 做 key： 先说原理 diff 树的时候，是一句一句
阅读全文
摘要：Stencil 一个轻量化，渐进式编译器， 注意 ，不是框架。 使用 TypeScript 进行所有操作，这是一个门槛，有一定技术门槛要求。 PS：个人强烈推荐所有的前端同学都学习，或至少了解这个超集语言。 生命周期 componentWillLoad componentDidLoad compon
阅读全文
摘要：本文使用 Vue 做例子，其他框架或原生一样原理 先看效果 这个文章的启发是来自这几天跟别人讨论跨平台解决方案时候意外发现，许多多年前端经验的跨平台开发工程师，都在考虑组件切换引起的瞬间白屏以及组件返回，原组件显示还原问题。 误导思路 厉害的前端工程师总是可以解决问题，比如上面那个问题，我们拿 A、
阅读全文
摘要：阿里试用排序 _抱歉，之前莫名其妙把配置文件给 ignore 了，已经修复，抱歉_ 前景提要 说来简直丢尽了钢铁直男的脸，没错，昨晚我在愉快的做着外包的活（中国移动的小程序，自由职业，喂），11点多了，女友突然脑子一抽：“你能不能帮我把这个玩意排序一下给我用啊，我好薅点羊毛，技术能实现嘛？” 我比较
阅读全文
摘要：骚写法 或许你知道，总之我觉得很酷，希望你也这么认为。 递增遍历 最常见场景，从 0 到 10 的遍历，不输出 10： 原理解析： 执行顺序： 1. l1 整个循环开始前执行一次 2. l2 当次循环执行前执行一次，判断是否需要执行 3. l3 每次循环结束执行一次 留个小问题，尝试把两个简写的 与
阅读全文
摘要：近两天准备出个拼图游戏的教程，准备时候遇到一些问题，收集保存分享下来，一来自己用，二来涨点知识，三来有需要的小伙伴刚好也看看。 事情起因很简单，比如下面这个拼图（矩阵）： 1 2 3 空 这样一个2 2矩阵，是标准原始矩阵，但是变一下： 3 1 2 空 这样是可还原的（空和附近的可以换位置，空2，空
阅读全文
摘要：拼图小游戏 先来预览，咳咳，这个比上次那个地鼠会好看点…… ![预览][1] 代码是可以设置难度的，3就是9,9就是81…… 相比来说，此程序难度可是远远高过打地鼠的，希望小伙伴能跟上~ html header好理解，注意其中的“新标签打开图片”相当于过关福利，平常是隐藏的。 之所以内容这么少，是因
阅读全文
摘要：别问我为什么上汤不热（猥琐脸），友尽！ 正经事 Tumblr 分享成功会有这么个动画，觉得挺有意思，就扒出来看了看…… 第一感觉以为是 canvas 绘制的，后来发现居然是原生DOM操作，嘿嘿，我就喜欢这种！ ![原图][1] 首先自然是去找 DOM 结构，Chrome 调试出来结果如下： 就是普通
阅读全文
摘要：网格布局 Grid 布局，好用又简单，至少比 Flex 要人性化一点，美中不足就是浏览器支持度差点。 DOM结构 中间夹层为了后续拓展。 CSS .grid 的意思是网格布局，2 列平分宽度，单行为 10px，自动拓展行数，列间距 4px，超出高度滚动。 这里 10px 是颗粒度，颗粒度越小，效果越
阅读全文
