跳到主要内容

· 阅读需 8 分钟
Auver

之前都是借助浏览器直接使用SourceMap，只知道里面储存着位置信息，来将压缩混淆后的代码还原回压缩混淆前的代码，但对其具体格式并不了解。因为笔者近期在对NEJ打包脚本做升级，希望只保留NEJ对代码模块依赖分析的部分，对于代码编译引入Babel，对于代码混淆则引入UglifyJS 3的版本。因此必须对SourceMap格式做详细的了解，以实现SourceMap经过Babel，UglifyJS，文件合并后，依然能保持正确，实现代码的反混淆。

如何告知SourceMap文件地址

在JS文件底部，增加一行注释

//# sourceMappingURL=/path/to/file.js.map

或者设置特殊的 HTTP HEADER

SourceMap: /path/to/file.js.map
X-SourceMap: /path/to/file.js.map (deprecated)

· 阅读需 15 分钟
Auver

本文旨在通过提取官方文档的关键内容，略去一些知识，快速了解插件的基本编写方式，方便你在较低学习成本下写出插件。

基础

Babel 是 JavaScript 编译器，更确切地说是源码到源码的编译器，通常也叫做“转换编译器（transpiler）”。 意思是说你为 Babel 提供一些 JavaScript 代码，Babel 更改这些代码，然后返回给你新生成的代码。

抽象语法树（ASTs）​

这个处理过程中的每一步都涉及到创建或是操作抽象语法树，亦称 AST。

Babel 使用一个基于 ESTree 并修改过的 AST，它的内核说明文档可以在[这里](https://github. com/babel/babel/blob/master/doc/ast/spec. md)找到。.

function square(n) {
  return n * n;
}

这个程序可以被表示成如下的一棵树：

· 阅读需 7 分钟
Auver

本文将以热门的跨平台桌面应用构建方案 Electron 为例，讲讲在跨进程通信中出现的痛点，并使用RxJs解决这些问题，当然这里的方案不仅仅适用于Electron，同样可以复制到如跨页面通信，主页面与 worker 之间的场景。

Electron 主进程和渲染进程间，官方提供了基础的通信能力。例如，在主进程中向渲染进程发布消息的方式为：

webContents.send('ping', 'whoooooooh!')

渲染进程响应方式为：

.ipcRenderer.on('ping', (event, message) => {
    console.log(message) // Prints 'whoooooooh!'
})

支持在响应函数中同步（event.returnValue）或者异步（event.reply）的回复消息。对于event.reply来说，其本质是发送一条新的不同类型的消息，该消息指定了接收方。

在实际使用场景里，往往是甲方产生消费需求，发送消息告知乙方其需要消费数据，由乙方生产数据后回复消息供消费者消费。为了方便描述，我们把首先发送消息的甲方称为消费者，回复消息的乙方称为生产者。

· 阅读需 9 分钟
Auver

Electron的自动更新能力完全由Squirrel提供。我们先来了解下Squirrel能够提供怎样的更新能力：

在 Windows 上​

Squirrel提供了应用程序从打包到安装、更新各阶段的能力。换一句话说，如果需要使用自动更新能力，那么应用程序的打包、安装也需要Squirrel的参与。

通过Squirrel打包的应用程序，在安装阶段，无需用户选择安装目录，也没有UAC对话框，应用将自动安装到%USERPROFILE%\AppData\Local目录下。

在更新阶段，无需用户做任何操作，Squirrel将在后台静默下载，待用户下次打开应用时就会替换为新的包。

出于后续自动更新的需要，应用的包文件，存放在以版本号命名的目录下。当有更新可用时，Squirrel下载新的包文件，采用同样的命名规则，存放在新目录下。应用的安装目录是这样的：

folder

该目录下的Stetho.exe相当于启动引导，当运行该可执行文件时，将选择最新版本的包中的文件执行。

也正因为此，这个%USERPROFILE%\AppData\Local\Stetho.exe始终作为用户执行的入口，在第一次安装阶段，就建议以该可执行文件创建快捷方式（创建方法在下文有提到）。

· 阅读需 38 分钟
Auver

写在前面​

在过去的几个月里，React Hooks 在我们的项目中得到了充分利用。在实际使用过程中，我发现 React Hooks 除了带来简洁的代码外，也存在对其使用不当的情况。

在这篇文章中，我想总结我过去几个月来对 React Hooks 使用，分享我对它的看法以及我认为的最佳实践，供大家参考。

本文假定读者已经对 React-Hooks 及其使用方式有了初步的了解。您可以通过 官方文档 进行学习。

函数式组件​

简而言之，就是在一个函数中返回 React Element。

const App = (props) => {
    const { title } = props;
    return (
        <h1>{title}</h1>
    );  
};

一般的，该函数接收唯一的参数：props 对象。从该对象中，我们可以读取到数据，并通过计算产生新的数据，最后返回 React Elements 以交给 React 进行渲染。此外也可以选择在函数中执行副作用。

在本文中，我们给函数式组件的函数起个简单一点的名字：render 函数。

· 阅读需 36 分钟
Auver

前言​

网易云音乐 PC/MAC/Linux 这三大桌面端，均采用了在原生应用中嵌入前端页面的方式。

通俗地说，就是将一个本地的 HTML 页面在浏览器中打开，但这个浏览器内嵌在云音乐桌面应用内。我们云音乐前端技术团队负责开发这个 HTML 页面，需要在这个页面中使用 JavaScript 相关技术绘制界面，并控制这个页面的交互。播放器、桌面歌词等内容则采用原生技术开发，并在 JS 中注入接口，以供前端调用。

我们需要在这个单一的页面中，为用户提供桌面应用级的体验。在现有的方案中，我们也遇到一些应用体验不佳、开发效率低的问题。在最近一年里，我们也在寻找一些更好的解决方案，期望做得比以前更好。我们调研了一些解决方案，最终决定引入 RxJs，设计一套全新的数据层。

本文会以云音乐桌面端的场景为例，先介绍为了实现桌面应用级的体验，我们的目标是什么，再看看过去我们为了这些目标面临了哪些挑战，最后谈到我们目前在做的，使用 RxJs 应对这些挑战的一些探索。

· 阅读需 10 分钟
Auver

本文翻译自Hot vs Cold Observables

COLD 是指你的生产者在 observable 内部创建。

// COLD
var cold = new Observable((observer) => {
  var producer = new Producer();
  // have observer listen to producer here
});

HOT 是指当你的生产者在 observable 外部创建。

// HOT
var producer = new Producer();
var hot = new Observable((observer) => {
  // have observer listen to producer here
});

· 阅读需 4 分钟
Auver

1. 用法​

-webkit-mask样式是利用该属性指定的图片作为遮罩，利用这张图像的透明度来显示位于该遮罩图下方的图像。如果遮罩图某个像素点透明度为1则显示下方的图像，透明度为0则不显示，介于0-1之间则呈现相应的透明度。 详情参考 [mask - CSS | MDN][1] 可以看到，mask的语法基本上拷贝自background，可以设置遮罩的url, position, repeat, size等属性，但不能直接设置颜色（纯色的遮罩意味着用opacity就能实现）。-webkit-mask-url可以设置gradients的渐变图片，也可以设置base64编码的图片。

2. 利用mask实现图标变色​

想让图标可以任意变色，常见的方案有：font-awesome, SVG等，甚至还有[drop-shadow][2]。其实可以利用background变色，而利用遮罩去绘制图标。遮罩透过的地方是图标的填色部分，而遮罩盖过的地方则没有颜色。 这种方法的优点就是转换成本极低，可以直接利用已有的图标PNG图。具体方法如下：

  • 将图标保存为PNG图，注意非图标区域应该是透明的。如果原有图标是sprite图，没关系，不用变，因为mask支持position属性。原先输出的图标不是纯黑色的？也没关系，因为mask样式只认你图片的透明通道

  • 设置图标的CSS，例如：