leuisken.github.io
leuisken.github.io copied to clipboard
LeuisKen
My personal blog in Chinese.
## 从一个需求谈起 在我之前的项目中，曾经遇到过这样一个需求，编写一个级联选择器，大概是这样：  图中的示例使用的是Ant-Design的Cascader组件。 要实现这一功能，我需要类似这样的数据结构： ``` js var data = [{ "value": "浙江", "children": [{ "value": "杭州", "children": [{ "value": "西湖" }] }] }, { "value": "四川", "children": [{...
今天想着做一件事情，给自己的收藏夹分类。结果做着做着，发现这个任务的工作量超乎我的想象。有一些文章，可能很难界定说，它是哪一类的；而且自己还没有特别去梳理自己对前端知识结构的理解，使得在分类的时候层级也有些模糊。所以在这里梳理一下自己理解中的知识结构。 这既是一篇总结，也是一篇指南，有些地方我自己亲身经历可能丰富一点，就说的多一些；有些地方自己没什么实践，就少说话，简单提一提，免得贻笑大方。 还有一点，这份指南中，个人色彩其实很重。有些学习方法上的建议，我都是从自己的经历出发的，但肯定不适合所有人。比如我喜欢浅阅读，看很多东西，需要用到的时候，心里有个大概，然后再深入研究，用到项目中。但我也遇到过一些喜欢深阅读的同学，他们看到一个东西就喜欢深入学习，举一反三。认识自己的特点并且选择适合自己的方法非常重要，就像小马过河的故事一样。 ## JavaScript 就语言本身来说，JavaScript值得深究的地方不多。很多同学在最开始入行的时候（就像我），可能根本不懂就已经开始开发了。虽说在开发中踩坑，在踩坑中理解也未尝不可，不过我现在觉得，一开始先了解一些很常用的语法，还是很重要的。 我对前端的JavaScript学习，列出了这样的结构： - 语法 - 框架与类库 - 设计模式 - 函数式 - 底层 - 发展 接下来就各个层面进行阐述： ### 语法 关于语法，JavaScript中值得注意的大点，其实也不是特别多，大概就以下几方面是比较常用的： - 变量提升 - this 指向 - 深复制和继承的写法...
## 什么是往返缓存（Back/Forward cache） 往返缓存（`Back/Forward cache`，下文中简称`bfcache`）是浏览器为了在用户页面间执行前进后退操作时拥有更加流畅体验的一种策略。该策略具体表现为，当用户前往新页面时，将当前页面的浏览器DOM状态保存到`bfcache`中；当用户点击后退按钮的时候，将页面直接从`bfcache`中加载，节省了网络请求的时间。 但是`bfcache`的引入，导致了很多问题。下面，举一个我们遇到的场景：  页面A是一个任务列表，用户从A页面选择了“任务1：看新闻”，点击“去完成”跳转到B页面。当用户进入B页面后，任务完成。此时用户点击回退按钮，会回退到A页面。此时的A页面“任务1：看新闻”的按钮，应该需要标记为“已完成”，由于`bfcache`的存在，当存入`bfcache`时，“任务1”的按钮是“去完成”，所以此时回来，按钮也是“去完成”，而不会标记为“已完成”。 既然bug产生了，我们该如何去解决它？很多文章都会提到`unload`事件，但是我们实际进行了测试发现并不好用。于是，为了解决问题，我们的`bfcache`探秘之旅开始了。 ## bfcache 探秘 在检索`page cache in chromium`的时候，我们发现了这个issue：https://bugs.chromium.org/p/chromium/issues/detail?id=229605 。里面提到 chromium（chrome的开源版本）在很久以前就已经将`PageCache`（即`bfcache`）这部分代码移除了。也就是说现在的chrome应该是没有这个东西的。可以确定的是，chrome以前的版本中，`bfcache`的实现是从`webkit`中拿来的，加上我们项目目前面向的用户主体就是 iOS + Android，iOS下是基于Webkit，Android基于chrome（且这部分功能也是源于webkit）。因此追溯这个问题，我们只要专注于研究`webkit`里`bfcache`的逻辑即可。 同样通过上文中描述的commit记录，我们也很快定位到了`PageCache`相关逻辑在Webkit中的位置：[webkit/Source/WebCore/history/PageCache.cpp](https://github.com/WebKit/webkit/blob/0fce2cb9b2fd61f9f249f09a14b40ac163ab16c6/Source/WebCore/history/PageCache.cpp)。 该文件中包含的两个方法引起了我们的注意：`canCachePage`和`canCacheFrame`。这里的`Page`即是我们通常理解中的“网页”，而我们也知道网页中可以嵌套``、``等标签来置入其他页面。所以，`Page`和`Frame`的概念就很明确了。而在`canCachePage`方法中，是调用了`canCacheFrame`的，如下： ```cpp // 给定 page 的 mainFrame 被传入了...
昨天晚上接到用户反馈，我们提供的一个脚本执行卡死。这个脚本里面会下载一个我们编译好的 Node.js 12.13.0，并用它来执行一个 js 脚本。经过初步定位，发现是卡死在了 node tool.js 这一句，非常奇怪，于是对这个问题进行了追踪。 ## 遇事不决先升级 首先升级到了 Node.js 的 12.16.1 版本，但还是会卡死，不行。 ## 尝试远程调试 初步的猜想，可能是 tool.js 里面的逻辑哪里有问题，于是让用户执行以下命令： ```sh node --inspect-brk=0.0.0.0:8080 tool.js ``` 打算远程调试，但是发现远程调试无法连接到用户机器上面。同时用户反馈说，执行后控制台没有任何输出，而如果调试能启动，那么至少会有如下的输出。  由于 `--inspect-brk` 能帮我们排除掉所有...
> 如题，欢迎在 issue 下方评论你认为优秀的 talk，共同学习。 ## FEDAY 2017 - 如何用JavaScript做好一个大型应用 by 孟红伦（云际） 分享了钉钉是如何在业务中实践 typescript 和 rxjs 的。[链接](https://v.qq.com/x/page/e0552rvx0db.html) - 从Cycle.js谈函数式与响应式编程 by 叶俊星(Jasin Yip) Cycle.js的入门性质分享，虽然没有分享落地经验，但作为开拓眼界值得一看。[链接](http://v.qq.com/x/page/u0552xvi3hg.html) - WebAssembly 在白鹭引擎中的实践 by 王泽 客观阐述了 WebAssembly...
## 背景 在 JavaScript 中充满了大量的异步任务，比如： - 获取远程资源，如 HTTP 请求； - 与后台任务交互，如 WebWorker ，Node 中调用 shell 命令等等； - 长时间执行的任务，如 CSS 动画。 这些异步任务都有着一些共同的特点： - 需要提供 API 让外部执行这一异步任务； - 需要提供 API 让外部知道执行的结果，即成功还是失败，对应的参数是什么； -...
关于ts的一个疑问？
# 关于ts的一个疑问？ > 这篇文章本质上是我作为一个`typescript`初学者的请教，希望能有各位更有经验的朋友的指点。 一直以来没有在项目中实践过`typescript`，所以今年过年休假的时候，打算尝试一下。 在使用`Function.prototype.bind`的时候，注意到了一个让我很诧异的点。VSCode中，对于`bind`方法的定义如下： ```ts /* lib.es5.d.ts */ /** * For a given function, creates a bound function that has the same body as the original function. *...
**2018年10月11日更新：** 截至`3.6.11`，`evalExpr`支持了执行调用表达式（readCall） --- **2018年9月2日更新：** 随着 San 的版本迭代，截至`3.6.7`，`parseExpr`支持了新的特性： - `parseExpr`支持解析调用（readCall），但`evalExpr`中并没有相应的支持：https://github.com/baidu/san/commit/ed2d6c4424f32ff5c625c7585002b3d623fd8084 - 支持新的一元表达式`-`：https://github.com/baidu/san/commit/3c43143ce95eb3a1630eb08fcb9d49981afc4fd3 --- ## 方法说明 [san.parseExpr](https://baidu.github.io/san/doc/main-members/#parseExpr)是[San](https://baidu.github.io/san/)中主模块下的一个方法。用于将源字符串解析成[表达式对象](https://github.com/baidu/san/blob/master/doc/anode.md#user-content-%E8%A1%A8%E8%BE%BE%E5%BC%8F)。该方法和[san.evalExpr](https://baidu.github.io/san/doc/main-members/#evalExpr)是一对，后者接收一个表达式对象和一个[san.Data](https://baidu.github.io/san/doc/main-members/#Data)对象作为参数，用于对表达式进行求值。如下例： ```js /** * 解析表达式 * * @param {string} source 源码 * @return {Object} 表达式对象 */...
## 什么是异步迭代器 关注[tc39](https://github.com/tc39)或者通过其他渠道关注JavaScript发展的同学应该早已注意到了一个新的草案：[proposal-async-iteration](https://github.com/tc39/proposal-async-iteration)。该草案在本文成文时，已经进入了[ECMAScript® 2019](https://tc39.github.io/ecma262/#sec-async-generator-function-definitions)规范，也就是说，成为了JavaScript语言本身的一部分。这项草案就是我本文中，我将要提到的`异步迭代器(Asynchronous Iterators)`。 这个新的语法，为之前的生成器函数(generator function)提供了异步的能力。举个例子，就是下面这样。 ```js // 之前的生成器函数 function* sampleGenerator(array) { for (let i = 0; i < array.length; i++) { yield array[i]; } } // 现在的异步生成器函数，让我们可以在生成器函数前面加上 async...