SegmentFault 思否技术周刊 Vol.76 — 破解 Javascript 玩法

本期技术周刊一起了解 Javascript，欢迎大家阅读 ～

文章推荐

浅谈 Javascript 闭包 // magnesium

闭包的概念是有很多版本，不同的地方对闭包的说法不一

维基百科：在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），是在支持头等函数的编程语言中实现词法绑定的一种技术。

MDN: 闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。

个人理解：

• 闭包是一个函数（返回一个函数）
• 返回的函数保存了对外变量引用

JS 如何返回异步调用的结果？ // 现实的理想技术

在 JS 中处理异步调用的结果，最佳实践就是“异步转同步”：使用 Promise + async/await 语法关键字。在这里 async 总是与 await 成对出现，一个 async 函数总是返回一个 Promise，一个 await 关键字总是在尝试“解开”一个 Promise，结局要么等到有价值的数据，要么异步出现异步，什么也没有等到。为了避免出现异常，影响主线程的正常运行，一般要用 catch 规避异常。

从 await-to-js 到 try-run-js // jump__jump

之前在做 code review 时候发现有同事使用 try catch 包装了一堆异步代码，于是个人就觉得很奇怪，难道不应该只 catch 可能出问题的代码吗？同事告诉我说 try catch 太细的话会出现内外作用域不一致，需要提前声明变量。

let res: Data[] = [];

try {
  res = await fetchData();
} catch (err) {
  // 错误操作或者终止
  // return
}

// 继续执行正常逻辑

前端性能优化到底该怎么做 // 熊的猫

性能指标，如下：

• 首字节达到时间（Time to First Byte，TTFB）
• 首次绘制（First Paint，FP）
• 首次内容绘制（First Contentful Paint，FCP）
• 首屏时间 / 最大内容绘制（Largest Contentful Paint, LCP）
• 累积布局偏移（Cumulative Layout Shift, CLS)
• 首次输入延迟（First Input Delay, FID）

关键资源越早到达客户端，证明 TTFB 时间越短，而这也能间接的减少 FP 和 FCP 的时间；对资源进行了压缩处理意味着能够尽可能提升 LCP 的时间；减少了页面的 回流/重绘 就能使得 CLS 的数值越小，视图越趋于稳定；FID 是一个用于跟踪浏览器对用户输入做出反应之前的延迟时间的指标，包括点击和敲击，保证资源的快速加载和页面尽早渲染，其对应的数值就越小，视图响应就越快。

javaScript 进阶之路 --- 《手写 Promise（中篇）》 // FFF方

至此距离我们完成自己的 MyPromise 类已经成功了一大半！我相信通过消化这一篇的内容，你会收获很多很多额外的知识。是不是有一种原来 Promise 不过如此的感觉～

其实有很多很多东西都是用很基本的函数，通过很巧妙的设计去完成一些看起来很复杂的逻辑。在下一章我们会迎来最后的几个关键点，如：微任务的创建，then 函数的链式调用，希望你能坚持下去。

Javascript 变量命名规范 // 一丁目

驼峰命名

首先，和其他语言一样，大部分变量建议采用驼峰命名法。

var articleTitle = 'javascript变量命名规范' 

而对于常量，使用大写字母和下划线来组合命名。

const COUNTRY_NAME = 'China'

问答推荐

• js 数组汉字排序？
• js 如何获取数组元素的前置属性（如下图）？
• js 中拥有相同值的两个基本数据类型的变量，它们的内存地址相同吗？
• 如何优化对象跟数组匹配获得新数组的算法？
• js 获取一串数字中某个数字的索引？
• 请教一下 js 中这种异步的初始化该怎么设计？
• 我想要 trim 掉左边的# == 和右边的==,请问 js 如何做到呢？
• js 需要等待长时间执行的代码，我需要怎么处理？
• js 怎么删除 style 中某个类样式？

---

# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列，一周一主题。

每周二更新，欢迎「关注」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。

如有问题可以添加小姐姐微信~