Blog of waningflow

[译] 你还不了解JS：起步 (第二版) 第一章什么是JS

Sun, 30 Aug 2020 14:40:00 +0800

你还不了解 JS，我也不完全了解。我们没有人完全了解，但是我们都可以开始更好的了解 JS。在“你还不了解 JS（YDKJSY）”系列第一本书的第一章中，我们将花些时间来建立前进的基础。首先，我们会涵盖各种重要的背后的处理细节，消除有关这门语言到底是（和不是）什么的一些误解。这对于了解 JS 构成维护的特性和过程很有用。所有的 JS 开发者都应该理解。如果你想去了解 JS，那么这就是你踏进这个旅程的第一步。关于本书我强调旅程这个词，因为了解 JS 并不是一个终点，而是一个方向。不管你在这门语言上花了多少时间，你总能发现一些别的东西去学习和理解。因此，不要将本书视为速成书。相反，在你做这开始几步时，耐心和坚持才是最重要的。在本背景知识章节后，本书的其余部分列出了你在使用 YDKJSY 书籍深入研究和学习 JS 时会发现的内容的高级路线图。特别是第四章确定了构成 JS 语言的三个主要支柱：作用域/闭包、原型/对象、类型/强制转换。JS 是一种广泛而复杂的语言，具有许多的功能特性。但所有 JS 都建立在这三个基本支柱上。记住，即使这本书的标题是“起步”，也不能作为初学者/入门书使用。本书的主要任务是让你为在整个系列的其余部分深入学习 JS 做好准备。写本书时的假设是你在开始读 YDKJSY 之前已经至少有几个月的 JS 经验。因此要充分利用起步，确保你花大量的时间编写 JS 代码来积累经验。即使您之前已经写了很多 JS，本书也不该只是被快速扫过或者直接跳过。花时间把这里的内容完全消化掉。一个好的开始总取决于坚实的第一步。关于名字？ JavaScript 这个名字可能是最容易让人误解的编程语言名字。它跟 Java 有关吗？仅仅是 Java 的脚本形式？仅用于编写脚本而不是实际程序吗？事实上，JavaScript 这个名字是营销手段的产物。在 Brendan Eich 最初构想该语言时，它的代号为 Mocha。在 Netscape 公司内部，用的是 LiveScript。但是当公开命名该语言时，JavaScript 赢得了投票。为什么？因为该语言最初是主要为了吸引 Java 程序员而设计的，并且“script”一词在当时很流行，指的是轻量级程序。这些轻量级的“script”将是第一种嵌入在 web 页面上的脚本。换句话说，JavaScript 命名可以说是一种营销策略，将其定位为当时更重也更知名的 Java 的一种不错的替代方案。就这点而言，它很容易被称为“WebJava”。 JavaScript 代码和 Java 代码有些表面的相似之处，这些相似之处并不是来自于共同开发，而是它们对开发者来说具有 C（某种程度上为 C++）的语法期望。

About

Wed, 26 Aug 2020 22:22:16 +0800

代号 waningflow 主站 https://waningflow.com 博客 https://blog.waningflow.com Github https://github.com/waningflow 邮箱 jack1995woods@gmail.com

Webpack4中的Tree Shaking

Sun, 23 Aug 2020 07:31:00 +0800

名词解释 DCE (dead-code elimination) 去除不影响执行结果的代码，包括不会执行到的代码和未使用的变量等，如： var a = 1; function b() { return 'b'; return 'b2'; } var c = b(); 处理之后结果如下： function b() { return 'b'; } b(); webpack 中实现 DCE 依靠的是代码压缩工具 uglify-es/terser（uglify-es 已经不再维护，terser 是其 fork 版本，webpack 从 4.26.0 版本从 uglify-es 迁移到 terser）。 Tree-Shaking JS 环境中用于实现 DCE 的一种方式，主要用于跨文件（模块）间的 DCE。依赖于 ES2015 的模块语法（import 和 export）。三种场景为了方便理解 Webpack4 中的 Tree-Shaking 具体是如何实现的，这里总结了三种典型的场景，每种场景都有其相应的配置去处理。 Unused export // ./index.js（入口文件） import { cube, square } from '.

基于history stack检测canGoBack和canGoForward

Sat, 09 May 2020 22:15:44 +0800

最近写的一个应用涉及到路由的跳转，需要加一个像浏览器地址栏一样的“后退”和“前进”的按钮。单纯的控制“后退”和“前进”很简单，history 库提供了三个接口： history.go(n) history.goBack() history.goForward() 但是为了在不能“后退”或“前进”时 disable 掉相应的按钮，就需要判断 canGo。history 库确实提供了一个方法，但是只能在 createMemoryHistory 时使用： history.canGo(n)(only in createMemoryHistory) 常用的 createBrowserHistory 和 createHashHistory 并没有提供这个方法，所以只能自己实现。首先需了解 history stack 的形成过程，参考这篇文章。简单总结如下： history stack 记录一个标签页访问的历史记录序列，指针指向当前激活的历史记录增加历史记录如果指针在栈顶，则新记录直接被推入栈顶 A [B] -> A B [C] 如果指针不在栈顶，则先移除指针后面的所有历史记录，再将新纪录推入栈顶 A [B] C -> A B [E] 前进后退，移动指针即可后退 A B [C] -> A [B] C 前进 A [B] C -> A B [C] 根据这些就可以实现一个 HistoryStack 类来模拟真实的 history stack：

Blog of waningflow

[译] 你还不了解JS：起步 (第二版) 第一章 什么是JS

About

Webpack4中的Tree Shaking

基于history stack检测canGoBack和canGoForward

[译] 你还不了解JS：起步 (第二版) 第一章什么是JS