King Mui

TypeScript 高级特性

2023-03-01T15:06:49.000Z

前言

TypeScript 是由安德斯·海尔斯伯格（Anders Hejlsberg）在微软开发的严格超集语言，是 JavaScript 的一个强类型版本。任何 JavaScript 中的特性都可以在 TypeScript 中使用，这也就意味着我们可以运用已熟知的 JavaScript 技能，以及以前不支持的编码功能去开发复杂的大型应用，从而提高代码的可读性和可维护性。此外，TypeScript 还提供了诸如类型推断、联合类型、类型保护和泛型等高级特性，以便我们可以更好地处理日趋复杂的代码库。

为什么需要 TypeScript

TypeScript 为 JavaScript 添加了类型系统的支持。使用 TypeScript 的好处有很多，例如：

代码即文档
编译器自动提示
一定程度上能够避免低级 bug
代码的可维护性更强

TypeScript 可以让我们在编写 JavaScript 代码时拥有更好的代码质量和更强的编译时错误检查。在开发阶段能够帮助我们更快速、更精准地定位问题，以降低代码在运行时才能引发错误的风险。并且在开发大型项目时，TypeScript 的类型系统可以帮助我们更好地组织代码，使团队成员能够更快地了解项目。

TypeScript 的高级特性

操作符

TypeScript 支持 JavaScript 中的大多数操作符，包括算数、关系、逻辑、位、赋值、条件、类型转换和其他操作符。此外，TypeScript 还提供了一些额外的特殊操作符，如类型保护和断言操作符。

深入理解 V8 的垃圾回收原理

2020-09-13T08:45:15.000Z

JS 语言不像 C/C++，让程序员自己去开辟或者释放内存，而是类似 Java，采用自己的一套垃圾回收算法进行自动的内存管理。作为一名资深前端工程师，需要对 JS 的内存回收机制非常清楚，以便在极端的环境下能够分析出系统性能的瓶颈，另一方面，学习这其中的机制，也对我们深入理解 JS 的闭包特性、以及对内存的高效使用，都有很大的帮助。

垃圾回收机制

V8 的垃圾回收策略基于分代回收机制，该机制又基于世代假说。该假说有两个特点：

大部分新生对象倾向于早死
不死的对象，会活得更久

基于这个理论，现代垃圾回收算法根据对象的存活时间将内存进行了分代，并对不同分代的内存采用不同的高效算法进行垃圾回收。

CommonJS 模块和 ES6 模块的区别

2020-08-04T15:00:03.000Z

历史上，JS 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的 require、Python 的 import，甚至就连 CSS 都有 @import，但是 JS 任何这方面的支持都没有，这对开发大型复杂的项目形成了巨大障碍。

在 ES6 出来之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

Deno 1.0：你需要了解的

2020-05-24T06:03:24.000Z

Deno 是使用 V8 引擎并用 Rust 语言编写的 JavaScript 和 TypeScript 的简单，现代且安全的运行时。它汇集了许多最佳的开源技术，并在一个小的可执行文件中提供了全面的解决方案。它还解决了 Ryan 在我对Node.js感到遗憾的十件事演讲中谈到的设计缺陷。

前言

不知道大家还记不记得两年前在 Github 发生的「学不动」事件。那次事件的起因便是著名的 Node 之父 Ryan Dahl 宣布新开一个叫 Deno 的项目，于是就有国人以一种类似于贴吧灌水的形式在 Deno 的 issiue 区里用中文大量发“学不动啦”，“求别更新”等帖子，顿时引起一片争论。如今两年时间过去了，ry 也带着他的 Deno 1.0 正式与我们会面。不论我们学的动还是学不动，技术就在那里，不以人的意志为转移。在这篇文章中，我们将会涵盖所有令人激动的 Deno 特性。

前端安全总结

2020-03-21T11:56:55.000Z

随着互联网的高速发展，网络迅速普及。人们在享受网络带来便捷的同时，也面临着日益严重的网络安全问题。在一些出名的案例中，上百万的密码、邮件地址和信用卡信息被泄露给了公众，导致网站用户面临个人尴尬和财务威胁。在移动互联网时代，前端人员除了传统的 XSS、CSRF 等安全问题之外，又时常遭遇网络劫持等新型安全问题。当然，浏览器自身也在不断地进化和发展，引入内容安全策略（Content Security Policy）、Same-Site Cookies 等新技术来增强安全性，但是仍存在很多潜在的威胁，这需要前端开发人员不断进行“查漏补缺”。

本文介绍以下几种常见的前端安全问题及其解决方案：

同源策略
XSS
CSRF
SQL 注入
点击劫持
window.opener 安全问题
文件上传漏洞

macOS下使用国内镜像安装Homebrew

2019-11-23T14:58:57.000Z

Homebrew 是一款自由及开放源代码的软件包管理系统，用以简化 macOS 系统上的软件安装过程。它拥有安装、卸载、更新、查看、搜索等很多实用的功能，通过简单的一条指令，就可以实现包管理，十分方便快捷。

获取最新安装脚本到本地编辑

1
2
3

cd ~

curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install >> brew_install

JavaScript 函数式编程

2019-06-02T05:44:00.000Z

函数式编程风格起源于 20 世纪 30 年代 lambda 演算的发明。函数自 17 世纪诞生以来，一直是作为微积分的一部分而存在的。函数可以作为函数的参数传递，还可以作为函数的执行结果被返回。更复杂的函数被称为高阶函数，它可以精确的控制函数，既可以将函数当作参数传递，也可以将函数作为执行结果返回，或者二者兼而有之。在 20 世纪 30 年代，Alonzo Church 在普林斯顿大学用高阶函数做实验时发明了 lambda 演算。

20 世纪 50 年代初，John McCarthy 借鉴了 lambda 演算的概念，并将它应用到一门新的名为 Lisp 的编程语言上。Lisp 实现了高阶函数的概念，并将函数作为第一类成员或者第一类公民。一个函数被当作第一类成员时，它不仅可以被声明为一个变量，而且可以被当作函数参数传递。这些函数甚至可以作为函数的执行结果被返回。

什么是函数式编程

JavaScript 可以进行函数式编程，因为 JavaScript 中的函数就是第一类公民。这意味着变量可以做的事情函数同样也可以。ES6 标准中还添加了不少语言特性，可以帮助我们更充分地使用函数式编程技术，其中包括箭头函数、Promise 对象和扩展运算符等。

ECMAScript 5的严格模式

2019-04-10T08:48:09.000Z

ECMAScript 5 引入了 strict mode，现在已经被大多浏览器实现(包括 IE10)。会使 web 浏览器更容易的解析代码(只需要添加 "use strict"; 在源码的最上面)。

严格模式不仅仅是一个子集：它的产生是为了形成与正常代码不同的语义。不支持严格模式与支持严格模式的浏览器在执行严格模式代码时会采用不同行为。所以在没有对运行环境展开特性测试来验证对于严格模式相关方面支持的情况下，就算采用了严格模式也不一定会取得预期效果。严格模式代码和非严格模式代码可以共存，因此项目脚本可以渐进式地采用严格模式。

严格模式对正常的 JavaScript 语义做了一些更改。

严格模式通过抛出错误来消除了一些原有静默错误。
严格模式修复了一些导致 JavaScript 引擎难以执行优化的缺陷：有时候，相同的代码，严格模式可以比非严格模式下运行得更快。
严格模式禁用了在 ECMAScript 的未来版本中可能会定义的一些语法。

非严格模式到严格模式的区别

严格模式同时改变了语法及运行时行为。

申城四月花争艳，最美樱花绽顾村

2019-04-07T03:31:26.000Z

不是要和你玩捉迷藏

大朵的云可以作证

这黄金的花园里

一条光影斑驳的小路伸向了远方

JavaScript 的 Async/Await

2019-04-05T09:01:33.000Z

在过去很长的时间里，JavaScript 开发人员在处理异步代码时不得不依赖回调函数来解决。结果，我们中的很多人都经历过回调地域。

然后我们迎来了 Promise。他们为回调提供了更有组织的替代方案，并且大多数社区很快也都转而使用它们。

现在，随着最新添加的 Async / Await，我们终于可以编写更高质量的 JavaScript 代码！

什么是 Async/Await？

Async / Await 是一个备受期待的 JavaScript 功能，它使异步函数的使用更加愉快和易于理解。它构建在 Promise 之上，并与所有现有的基于 Promise 的 API 兼容。

Async - 定义异步函数

1	async function someName(){...}

自动把函数转换为 Promise
当调用异步函数时，函数返回值会被 resolve 处理
异步函数内部可以使用 await

认识和使用 Promise

2019-04-05T05:35:53.000Z

Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及该异步操作的结果值。

1	new Promise( function(resolve, reject) {...} /* executor */ );

Promise 构造函数执行时立即调用“处理器函数”（executor function）， resolve 和 reject 两个函数作为参数传递给“处理器函数”。“处理器函数”内部通常会执行一些异步操作，一旦异步操作执行完毕(可能成功/失败)，要么调用 resolve 函数来将 promise 状态改成 fulfilled，要么调用 reject 函数将 promise 的状态改为 rejected。如果在“处理器函数”中抛出一个错误，那么该 promise 状态为 rejected。

一个 Promise 有以下几种状态:

pending: 初始状态，既不是成功，也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。
settled: 处在 fulfilled 或 rejected 状态而不是 pending 状态。

因为 Promise.prototype.then 和 Promise.prototype.catch 方法返回 promise 对象，所以它们可以被链式调用。

JavaScript设计模式

2019-03-27T13:55:32.000Z

设计模式的定义：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案

当然我们可以用一个通俗的说法：设计模式是解决某个特定场景下对某种问题的解决方案。因此，当我们遇到合适的场景时，我们可能会条件反射一样自然而然想到符合这种场景的设计模式。

单例模式

单例模式的定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。

算法的复杂度

2019-03-26T14:15:44.000Z

算法（algorithm）的定义

算法是解题方案的准确而完善的描述，是一系列解决问题的清晰指令。其实就是解决一个问题的完整性描述。

算法的效率

既然算法是解决问题的描述，而解决同一问题的方法也是多种多样的，只是在这过程中我们所使用的时间或时间以外的代价（计算机消耗的则为内存）不一样。为了更快、更好、更强的提高算法的效率，很多时候一个优秀的算法就在于它与其他实现同一问题的算法相比，在时间和空间（内存）上得到明显的降低。

算法的效率主要由以下两个复杂度来评估：

时间复杂度：评估执行程序所需的时间。可以估算出程序对处理器的使用程度。
空间复杂度：评估执行程序所需的存储空间。可以估算出程序对计算机内存的使用程度。

Javascript 执行机制

2018-11-15T07:35:49.000Z

关于 Javascript

Javascript 是一门单线程语言，在最新的 HTML5 中提出了 Web-Worker，但 Javascript 是单线程这一核心仍未改变。所以一切的 Javascript 版“多线程”都是用单线程模拟出来的！

Javascript 事件循环

既然 JS 是单线程语言，那么就像只有一个窗口的银行，客户需要排队一个一个办理业务，同理 JS 任务也要一个一个的按顺序执行。如果一个任务耗时过长，那么后一个任务就必须等着。那么问题来了，假如我们想浏览新闻，但是新闻包含的超清图片加载很慢，难道我们的网页要一直卡着直到图片完全加载出来吗？因此聪明的程序员将任务分为两类：

中文简繁体切换功能的实现

2018-09-15T07:53:53.000Z

为了能够更好地照顾不同的用户，一些网站会提供简繁两种版本切换，提高用户的体验。

思路

一般而言，网站要实现简繁字体的切换，需要先准备两套字体库。而基本的思路是：找到当前文字在字体库中的索引，然后根据索引值去另一套字体库中取出对应的文字，从而实现字体的替换。具体逻辑如下：

使用Js判断鼠标移入元素的方向

2018-07-01T10:45:34.000Z

判断鼠标从元素矩形区域的哪个方向进入的标准为：
当鼠标从元素矩形区域外移入元素矩形区域，和鼠标行动轨迹发生交叉的那条边就认为是鼠标进入的方向，例如鼠标从上方往下和上边有交叉，就认为是从上方进入。

本文要介绍几种方法来判断当鼠标滑入元素时，是从哪个方向进入；滑出元素时，从哪个方向滑出，以此对元素做一些交互效果。

求最小值

该方法是当鼠标滑入元素的时，从事件对象 e 中获取其位于文档中的坐标 (e.pageX, e.pageY)，再计算出 x 轴方向坐标减去元素左侧距离文档左侧的距离和 x 轴方向坐标减去元素右侧距离文档左侧的距离，y 轴方向坐标减去元素顶部距离文档顶部的距离和 y 轴方向坐标减去元素底部距离文档顶部的距离，求出这四个数字的绝对值的最小值，即为鼠标进入元素的方向。

在线演示

函数防抖(debounce)与函数节流(throttle)

2018-06-20T03:03:39.000Z

在前端开发中有一部分的用户行为会频繁的触发事件执行，而对于 DOM 操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数节流(throttle)和函数防抖(debounce)就是为了解决类似需求应运而生的。

前言

浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

在开发的过程中，你可能会遇到下面的情况：

监听 Window 对象的 resize，scroll 事件
拖拽时监听 mousemove
文字输入时，对输入字符串进行处理，比如要把 markdwon 转换成 html
监听文件变化，重启服务

JavaScript如何使用变量设置对象的键名

2018-06-19T07:28:03.000Z

{thetop: 10} 是一个有效的对象字面量。代码将创建一个属性名为 thetop 且值为 10 的对象。与以下内容相同：

1 2	obj = {thetop: 10}; obj = {"thetop": 10};

在 ES5 及更早版本中，你不能直接在对象字面量中使用变量作为属性名称。唯一的选择是执行以下操作：

自定义浏览器横向滚动条

2018-06-03T03:07:20.000Z

自定义浏览器滚动条样式

IE浏览器

追溯浏览器对滚动条的自定义，恐怕最早的就是IE浏览器了（好像最开始支持的版本是IE5.5）。下面列出了多个版本的支持性：

学习Javascript闭包（Closure）

2018-05-05T07:52:28.000Z

闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。 – MDN

闭包是有权访问另一个函数作用域的函数。 – 《JavaScript 高级程序设计(第 3 版)》

函数对象可以通过作用域链相互关联起来，函数体内部的变量都可以保存在函数作用域内，这种特性在计算机科学文献中称为闭包。 – 《JavaScript 权威指南(第 6 版)》

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。 – 《你不知道的 JavaScript(上卷)》

闭包是个函数，而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」。 – 闭包的秘密

闭包就是能够读取其他函数内部变量的函数。 – 阮一峰

要使用闭包，只需要简单地将一个函数定义在另一个函数内部，并将它暴露出来。要暴露一个函数，可以将它返回或者传给其他函数。

内部函数将能够访问到外部函数作用域中的变量，即使外部函数已经执行完毕。

由于在 Javascript 语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成定义在一个函数内部的函数。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来。这显然类似于面向对象编程。在面向对象编程中，对象允许我们将某些数据（对象的属性）与一个或者多个方法相关联。