跳到主要内容

6 篇博文 含有标签「javascript」

查看所有标签

· 阅读需 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来说，其本质是发送一条新的不同类型的消息，该消息指定了接收方。

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

· 阅读需 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
});