Lolipop's Studio.

类（Class）是用于创建对象的模板，他们用代码封装数据以处理该数据，是面向对象编程方法的重要特性之一。JavaScript 中的 class 语法在 ES6 中引入，其底层实现基于原型（Prototype），系原型继承的语法糖（Syntactic Sugar）。

本博文将探讨 JavaScript 中如何使用类的相关知识，文章组织架构和内容基于 MDN 上关于类的章节。

定义类

类可以被看作一种“特殊的函数”，和函数的定义方法一样，类的定义方法有两种：类声明和类表达式。

第一种方法是，直接使用 class 关键字声明类，即类声明的方法。

1
2
3

class User {
    //
}

JavaScript 中有一个叫作闭包（Closure）的概念，非常有趣且适用，值得学习并整理为一篇博客。

为了更好理解闭包的作用，不妨看看我的这一篇博客关于 JS 变量提升（Hoisting）和函数提升现象的阐述。

作用域

在 JavaScript 中，作用域（Scope）是当前代码执行的上下文，也即是值和表达式在其中可访问到的上下文。

• 如果一个变量或其它表达式不在当前作用域中，就会沿作用域链（Scope Chain）往父作用域搜索。如果也仍未找到它的话，那么它就是不可用的。
• 最顶级的父作用域是全局对象。
• 父作用域不能引用子作用域中的变量和定义。

目前，作用域有三种：全局作用域和函数作用域，以及 ES6 新增的块级作用域。

JavaScript 中有一个叫作闭包（Closure）的概念，非常有趣且适用，值得学习并整理为一篇博客。

不过在学习闭包之前，为了更好理解它的作用，容我先从 JS 的变量提升（Hoisting）现象慢慢道来。

JS 变量提升和函数提升

在 ES6 规范出现之前，声明变量只有 var, function 以及隐式声明三种方式。

按照一般编程的正常思维，我们会选择使用“先声明，后调用”的方式去使用变量，例如：

1
2

var a = 3
console.log(a) // 3

在前端性能优化中存在一个老生常谈的问题：如何优化高频率执行的 JS 代码？例如：

1. 我们为浏览器滚动 scroll 绑定了监听事件，当滚动到某位置之下后，会在浏览器右下方显示一个点击后能快速回到页面顶部的浮动按钮；而滚动回该位置之上时，浮动按钮消失。现在我们发现，用户每次使用滚轮滑动页面，都会触发很多次该事件，判断当前在该位置之上还是之下，这在一定程度上降低了前端的性能。
2. 我们为网页添加了搜索功能，当用户输入搜索关键字后，会自动显示出搜索的结果。但是，用户每次更改输入都立即调用后端进行了搜索，彼时用户可能尚未输入完关键字，亦或是关键字输入错误需要修改。这样搜索出来的结果并非用户希望看到的，同时还降低了前端性能，浪费了大量的服务器资源。

针对上述列举的问题，我们应该怎么做，才能在优化前端性能的同时不至于影响到用户的体验，便是本文探讨的内容。

函数节流

函数节流（Throttle），指在触发事件后的一定时间内绑定的函数只能执行一次。

函数节流的实现思路比较简单，例如使用 setTimeout 方法实现：由于 setTimeout 方法的返回值是一个正整数，表示定时器的编号，所以可以利用闭包的方法维护一个定时器编号。每次触发事件时都通过定时器编号判断当前是否有尚未到期的定时器，如果有则结束，如果没有则启用一个定时器。定时器到期后调用绑定的需要节流的函数，并设置定时器编号为空，表示可以启用一个新的定时器。代码如下：

本博客基于 CMake 实现编译 gRPC 1.28.1 版本。

本博客的 Windows 端使用的命令提示符界面为 Powershell。

安装编译依赖软件

在 Windows 系统上编译 gRPC 需要首先准备下述软件：

• Visual Studio 2015（或 2017），将使用到 Visual C++ compiler
• Git
• CMake
• nasm
• ninja（可选）

Visual Studio 2015 (或 2017)

本文适用于 C++ 版本 gRPC 的离线编译安装，但对于下载 gRPC 步骤强烈建议使用 git 进行。

如果在能直接连接外网的机器上编译，可直接按照 gRPC 官网文档的指引快速执行编译操作。

安装基本依赖

确保机器上包括这些基本依赖：autoconf, libtool, pkg-config 与 C++ 编译环境。

1
2
3
4
5
6
7
8

# 检查是否有 autoconf
which autoconf

# 如果没有，则安装
# CentOS
yum install autoconf
# Ubuntu
apt-get install autoconf

gRPC 的编译需要 gcc 版本在 4.9 及以上。假如版本低于此，应当在 Docker 容器中安装较新版本的 GCC 再执行编译操作。

如果软件源可用，可以使用 CentOS 的 yum 包管理器或 Ubuntu 的 apt 包管理器等一键安装 GCC，例如：

1
2
3
4
5

yum -y install gcc
yum -y install gcc-c++

# 或是一键安装开发工具软件包，包括 gcc, g++ 等
yum groupinstall "Development Tools"

本文适用于系统中包含有其它版本的 GCC 编译器情况下，手动更新或降级 GCC 编译器。编译 GCC 的过程十分耗时，如果能使用包管理器尽量还是使用包管理器吧。

NOTE: 如果仅使用 GCC 进行编译操作或不确定当前系统能否兼容新版本的 GCC，建议在 Docker 容器环境中执行编译和安装操作，并在容器中使用 GCC 编译器进行编译源码。

1
2

# 查看当前系统中 GCC 的版本
gcc -v

下载 GCC 并解压

实习中学习一下 Protobuf 的功能和语法等，整理为此笔记。主要为翻译官方文档而来。

什么是 Protobuf

Protobuf 是 Google 公司研发的一种用于序列化结构数据的机制，全称为 Protocol Buffers，具有语言无关、平台无关以及可拓展的特性。

我们常常把 Protobuf 与 XML (Extensible Markup Language) 相比较，它们二者都被设计来传输和存储结构化数据。相比于 XML，Protobuf 有如下优势与缺点：

• Protobuf 占用的空间更小。Protobuf 采用二进制格式存储数据，适合网络传输和高性能场景；而 XML 采用文本格式存储数据，数据冗余度较高。
• Protobuf 编码和解码更快。测试 Protobuf 库和 tinyxml2 库执行序列化和反序列化操作（相关链接），Protobuf 序列化速度大约是 XML 的 5 - 9 倍，反序列化速度大约是 XML 的 9 - 12 倍，更加适合高性能场景。
• Protobuf 不具有可读性。Protobuf 传输的值为二进制数据，需要专用工具生成和解析；而 XML 自身的标签和文本内容具有一定的可读性。

迷途知反！腾讯地图的 JS API 文档实在过于简陋，且库很久没有更新，转身投入高德地图的怀抱，享受 this moment 的美好！

高德地图与腾讯地图定位功能区别

高德地图将定位功能和逆地理编码功能分开为两个操作，而腾讯地图将二者合并。

这意味着使用高德地图实现逆地理编码，首先需要执行定位操作，再将得到的结果传给逆地理编码插件获得最后的结果。

此外，高德地图的逆地理编码无法解析中国以外的地理坐标，只能解析中国境内省市区等地理坐标。

引入高德地图 JS API 库

正在开发的 Web 项目需要获取使用者的位置信息，而使用者主要通过移动端访问此 Web 服务。位置信息需要精确到区。在腾讯位置服务的定位解决方案里想要搜索可用的 JavaScript 库，只看到了服务端的 IP 定位和移动端的几个 SDK 包，甚异之。

终于在不起眼的地方找到了前端定位组件，适用于浏览器进行定位操作。

本文基于 Nuxt.js 实现前端定位功能。

它能做什么

组件旨在优化纯 HTML5 Geolocation 定位能力弱，定位成功率不高的问题，提供简单、易用的接口帮助业务层获取用户当前的位置信息（需用户授权），以降低开发成本，提升定位精准度。

除了常规的经纬度坐标以外，它返回的结果里还包含了 city 和 district 项，非常方面。