https://linjingyi.cn/posts/755931bb.html

下述内容翻译自 Professional JavaScript for Web Developes,4th Edition（JavaScript 高级程序设计第四版），323 页，Proxies and Reflect（代理和反射） 章节。

https://linjingyi.cn/posts/afca5f67.html

OpenLayers是一个在 WebGIS 方向功能非常完备的的库，用官网的话来说就是“一个高性能、功能丰富的能满足所有地图绘制需求的前端库”。由于最近在公司的业务在地图方面有很多需求，所以从零开始学 Openlayers，一边完成业务一边补充技术栈，顺便写几篇文章沉淀一下。 推荐初学者学习以下两个教程： Openlayers 入门指南：虽然讲的是 Openlayers3 的入门，但是新版本整体

https://linjingyi.cn/posts/3c176ac8.html

在最近的业务中，需要对 OpenLayers 地图上的 feature 要素点击后触发某些操作，任务完成过程中走过了一些坑，总结一下。 前置代码放置一个实例更容易看明白过程，从官网的实例Hit Tolerance中截取了一段代码。首先准备了一个 OSM 的地图底图，再写一个线段 feature 用于触发事件，最后在最上方放置一个 id 为 status 的 span 用于展示点击结果。

https://linjingyi.cn/posts/9f68952.html

最近稍微研究了下 canvas 滤镜在 OpenLayers 中的应用，发现自己照猫画虎可以做出滤镜效果，但是最关键的 kernel 这个卷积核却一点都不了解，参考wiki深入学习一下写一篇笔记。 简介卷积核（kernel），也叫卷积矩阵（convolution matrix）或者掩膜（mask），本质上是一个非常小的矩阵，最常用的是 3×3 矩阵。主要是利用核与图像之间进行卷积运算来实现图像处理

https://linjingyi.cn/posts/ef0a6799.html

上一篇文章关于各种像素概念和前端长度单位的理解分析了 px 的定义和各种相对长度单位，这次翻译学习一下 CSS 的 calc()规范，为下一篇做铺垫。首先纠正 W3C 的 CSS 工作组规范草案中关于 calc()的一个错误：

https://linjingyi.cn/2020/01/20/OpenLayers6%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90%EF%BC%9ACustom%20Animation/

分析 Dynamic Data 这个 demo，官网介绍是： This example shows how to use postrender and vectorContext to animate features. Here we choose to do a flash animation each time a feature is added to the layer.此示例演示如何

https://linjingyi.cn/2020/01/28/OpenLayers6%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90%EF%BC%9ALayer%20Spy/

分析 Layer Spy 这个 demo，官网介绍是： Layer rendering can be manipulated in prerender and postrender event listeners. These listeners get an event with a reference to the Canvas rendering context. In this exam

https://linjingyi.cn/posts/7c2664a3.html

在做前端可视化的某些内容轮播时，使用点击事件会用到节流（立即执行），防止动画执行时被多次点击事件打断导致某些奇怪错误。总结记录下防抖（debounce）和节流（throttle）及他们的立即执行版和非立即执行版的用法。

https://linjingyi.cn/2020/01/17/hello-world/

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick

https://linjingyi.cn/posts/6eb4da4e.html#more

下述内容来自 Professional JavaScript for Web Developes,4th Edition（JavaScript 高级程序设计第四版），114 页，GARBAGE COLLECTION（垃圾收集）章节。前半部分与红宝书第三版（78 页）基本一致，后半部分的“管理内存”小节中新增使用 const 和 let 声明、隐藏类和删除操作、内存泄漏、静态分配和对象池几部分内容。

https://linjingyi.cn/posts/be1c11d1.html#more

前面的文章—ECMA-262 规范第 4 节 Overview 翻译—翻译了 ECMA-262 规范的总览章节，下面翻译规范中第 6 节—ECMAScript Data Types and Values—的前半部分 Language Types，并对规范中的一些符号进行总结。

https://linjingyi.cn/posts/382b9be4.html

前面的实例分析中有 OpenLayers 的Flight Animation的解析，这一篇不分析官网实例，而是结合canvas 绘制火球的方式，把航线绘制成彗星扫尾的感觉，类似 Echarts 中的迁徙图，最终结果如下图所示：

https://linjingyi.cn/2020/OpenLayers6%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90%EF%BC%9AEarthquakes%20Heatmap/

分析 Earthquakes Heatmap 这个 demo，官网介绍是： This example parses a KML file and renders the features as a ol/layer/Heatmap layer. 这个示例解析了 KML 格式文件并作为一个热力图来渲染要素。 官网实例：Earthquakes Heatmap 跟我学 OpenLayers—

https://linjingyi.cn/posts/8bd9ee4.html

分析 Image Filters（滤镜效果） 这个 demo，官网介绍是： Layer rendering can be manipulated in prerender and postrender event listeners. These listeners get an event with a reference to the Canvas rendering context. In

https://linjingyi.cn/2020/01/30/OpenLayers6%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90%EF%BC%9AMarker%20Animation/

分析 Marker Animation 这个 demo，官网介绍是： This example shows how to use postrender events and a vector context to animate a marker feature along a line. In this example an encoded polyline is being used.此示例

https://linjingyi.cn/posts/a3cc2dcd.html

之前翻译了 GeoJSON 的规范全文——《GeoJson 规范（RFC 7946）全文翻译》，在本篇中应用 GeoJSON 的各个特征对象和几何对象到 OpenLayers 中，熟悉 GeoJSON 格式在 OpenLayers 中的应用，也能熟悉 OpenGIS 的各个术语在 OpenLayers 的映射。 官网实例：GeoJSON 跟我学 OpenLayers——基础实例讲解：07 要素

https://linjingyi.cn/404/

https://linjingyi.cn/posts/75b6d22d.html

最近在业务中，使用 element-ui 给表单做校验时总是写出一些令人啼笑皆非的低级 bug，感受到了:rules对我的无情嘲讽。使用矛盾分析总结下就是两点原因：第一、对表单的基础知识掌握的不扎实；第二、对 element-ui 校验时使用的 async-validator 原理不熟悉。由此，打算接下来学习时ToDoList新加三条: 精读 HTML 的 form 相关元素的规范 和 XMLH

https://linjingyi.cn/posts/eb18ff5d.html

去年下半年，红宝书新发布了第四版，删减了一些老旧内容，并一直更新到了 ES2019，传说第三版译者李松峰老师正在翻译中，今年下半年可以出中文版。现在迫不及待地提前学习就只能看英文原版，边学边把部分新增章节翻译下。 下述内容来自 Professional JavaScript for Web Developes,4th Edition（JavaScript 高级程序设计第四版），29 页，VARIA

https://linjingyi.cn/posts/a9658a46.html

下述内容翻译自 Professional JavaScript for Web Developes,4th Edition（JavaScript 高级程序设计第四版），251 页，Objects, Classes, and Object-Oriented Programming （对象、类和面向对象）章节内，前半部分与第三版的 138 页第 6 章面向对象的程序设计相似，所以主要翻译后半部分 30

https://linjingyi.cn/posts/a1de6375.html#more

本篇分析下sorted家族的方法，该系列的方法主要是用来确定向已排序数组中插入 value 的索引。包括sortedIndex、sortedLastIndex、sortedIndexOf、sortedLastIndexOf、sortedIndexBy、sortedLastIndexBy、sortedUniq、sortedUniqBy以及核心方法baseSortedIndex、baseSortedI

https://linjingyi.cn/posts/56b66aa5.html

有些时候 UI 给切的背景，并不能适配所有长宽比的元素，这个时候就需要一个非常强大的 CSS 属性：border-image，下面先翻译border-image相关的W3C 规范草案，再举例说明如何应用到元素背景中。 草案翻译开发者可以指定用来替代 border-style 的图像。在这种情况下，border 取自 border-image-source 指定的图像的边缘和角落，这些图像的碎片可以

https://linjingyi.cn/posts/ff496e4d.html

已经被微软收购了的世界最大同性交友网站 Github，最近收购了 npm，巨硬公司天下无敌，VSCode 一统天下 🙂。 列出几个比较有用的快捷键，最后翻译下 VSCode 官方给的快捷键可打印 pdf 版。

https://linjingyi.cn/2020/OpenLayers6%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90%EF%BC%9AMagnify/

分析 Magnify 这个 demo，官网介绍是： This example makes use of the postrender event listener to oversample imagery in a circle around the pointer location. Listeners for this event have access to the Canvas con

https://linjingyi.cn/posts/7b5b0d8c.html

分析 Earthquake Clusters 这个 demo，官网介绍是： This example parses a KML file and renders the features as clusters on a vector layer. The styling in this example is quite involved. Single earthquake locations

https://linjingyi.cn/2020/OpenLayers6%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90%EF%BC%9AFlight%20Animation/

分析 Flight Animation 这个 demo，官网介绍是： This example shows how to use postrender and vectorContext to animate flights. A great circle arc between two airports is calculated using arc.js and then the fligh

https://linjingyi.cn/2020/01/25/OpenLayers6%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90%EF%BC%9AFlight%20Animation/

分析 Flight Animation 这个 demo，官网介绍是： This example shows how to use postrender and vectorContext to animate flights. A great circle arc between two airports is calculated using arc.js and then the fligh

https://linjingyi.cn/2020/OpenLayers6%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90%EF%BC%9ALayer%20Spy/#more

分析 Layer Spy 这个 demo，官网介绍是： Layer rendering can be manipulated in prerender and postrender event listeners. These listeners get an event with a reference to the Canvas rendering context. In this exam

https://linjingyi.cn/posts/3680799e.html

在 CSS 中，1px到底是多长，为什么是这个长度。百度谷歌搜索很久说法很不一致，最后才发现最标准的还是去看万维网联盟（World Wide Web Consortium，W3C）的CSS 标准和草案，总结以下一些概念。 像素像素是在印刷业和屏幕设备最基础的概念，一切的显示都从像素开始，循序渐进的理解 CSS 像素到底是什么。

https://linjingyi.cn/posts/ba114d01.html

分析 Earthquakes Heatmap 这个 demo，官网介绍是： This example parses a KML file and renders the features as a ol/layer/Heatmap layer. 这个示例解析了 KML 格式文件并作为一个热力图来渲染要素。 官网实例：Earthquakes Heatmap 跟我学 OpenLayers—

https://linjingyi.cn/2020/01/17/OpenLayers%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90%E7%B3%BB%E5%88%97%EF%BC%9A%E7%AE%80%E4%BB%8B/

OpenLayers是一个在WebGIS方向功能非常完备的的库，用官网的话来说就是“一个高性能、功能丰富的能满足所有地图绘制需求的前端库”。由于最近在公司的业务在地图方面有很多需求，所以从零开始学Openlayers，一边完成业务一边补充技术栈，顺便写几篇文章沉淀一下。 推荐初学者学习以下两个教程： Openlayers入门指南：虽然讲的是Openlayers3的入门，但是新版本整体上换汤不换药

https://linjingyi.cn/posts/28742d18.html

前面的文章—ECMA-262 规范第 6 节中 Language Types 翻译—翻译了 ECMA-262 规范的 ECMAScript Data Types and Values 章节的前半部分 Language Types，下面翻译后半部分 Specification Types。

https://linjingyi.cn/google20f46b927d489354.html

google-site-verification: google20f46b927d489354.html

https://linjingyi.cn/posts/29a4992b.html

本来是按顺序分析difference方法的，但是一连串下来的引用文件实在是太多了。所以本篇先分析difference方法的中的一个内置的私有方法baseDifference，顺带用到了 lodash 的map方法。 上篇文章先讨论了宽松相等和真值判断。同样，本篇先讨论严格相等比较，再分析一个问题，什么情况下 value !== value 为真？

https://linjingyi.cn/posts/50859aba.html

在构建可视化大屏的过程中，首先要先布局组件位置和大小。上两篇文章学习了 CSS 相对单位 vw、vh、rem 和 clac()，本文以上两篇内容为基础，加上 mentor 仕春哥的启发，分析前端构建可视化大屏的一种布局方式。 大屏系统的内在原理硬件大屏系统实际上是由任意 n × m 块窄边显示器组成，具体如下图示例所示： 该例子中左下信号源的两台电脑通过显卡计算显示被投屏的内容，然后输出到大屏接

https://linjingyi.cn/posts/2efa5977.html#more

径向条形图（Radial Bar Chart），就是把普通笛卡尔二维坐标系中的条形图转为极坐标系下展示，使用弧度来表示数值大小。 如下图所示，在本文中解析一个 ECharts Gallery 中的径向条形图实例，顺带学习 ECharts 中极坐标系、颜色渐变和自定义系列的用法。

https://linjingyi.cn/posts/d81dae64.html

本篇分析下pull家族的方法，包括pull、pullAll、pullAllBy、pullAllWith、pullAt以及核心方法basePullAll、basePullAt。顺便分析依赖到的 lodash 方法memoize，最后给出pull方法的原生实现。 具体的依赖路径图如下所示： 另外，在 basePullAt 方法的源码中发现一个 bug，在数组中多次列出同一个要删除的元素索引的情况下，

https://linjingyi.cn/posts/23f9220f.html

翻译 ECMA-262 规范，也就是 ECMAScript 的规范的第四节 Overview，重新梳理 JS 中的一些基本概念，最后理解一下在 ECMAScript 中 property 和 attribute 的区别。

https://linjingyi.cn/posts/9190e623.html

在之前的实例中设置图层的 source 属性时，可以发现经常用ol.source.OSM()或 ol.source.BingMaps()来创建图层的源。之所以加载源这么简单，是因为 OpenLayers 库中对 OSM（OpenStreetMap 地图）和 BingMap（必应地图）这类的国际比较常用的地图加载做了封装。但是 OpenLayers 不可能对所有的地图厂商都进行封装，这时候就需要自己

https://linjingyi.cn/2020/OpenLayers6%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90%EF%BC%9ACustom%20Animation/

分析 Dynamic Data 这个 demo，官网介绍是： This example shows how to use postrender and vectorContext to animate features. Here we choose to do a flash animation each time a feature is added to the layer.此示例演示如何

https://linjingyi.cn/2020/Openlayers6%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90%EF%BC%9ADynamic%20Data/

按照课程顺序，应该先分析Dynamic Data这个demo，对应如下： 官网实例：Dynamic Data 跟我学OpenLayers——基础实例讲解：12 渲染器机制的使用 > 实例80.动态点的效果

https://linjingyi.cn/2020/OpenLayers6%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90%EF%BC%9A%E7%AE%80%E4%BB%8B/

OpenLayers是一个在 WebGIS 方向功能非常完备的的库，用官网的话来说就是“一个高性能、功能丰富的能满足所有地图绘制需求的前端库”。由于最近在公司的业务在地图方面有很多需求，所以从零开始学 Openlayers，一边完成业务一边补充技术栈，顺便写几篇文章沉淀一下。 推荐初学者学习以下两个教程： Openlayers 入门指南：虽然讲的是 Openlayers3 的入门，但是新版本整体

https://linjingyi.cn/2020/OpenLayers6%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90%EF%BC%9AEarthquake%20Clusters/#more

分析 Earthquake Clusters 这个 demo，官网介绍是： This example parses a KML file and renders the features as clusters on a vector layer. The styling in this example is quite involved. Single earthquake locations

https://linjingyi.cn/posts/22f1fd78.html

最近使用 GeoJson 的时候总是感觉一知半解，腾出时间来翻译一遍 GeoJson 的规范，让自己理解的更透彻些。2015 年，国际互联网工程任务组（IETF）与最初的规范作者共同组建了一个 GeoJson 工作组(GeoJSON WG) 来标准化 GeoJSON。 RFC 7946 于 2016 年 8 月发布，取代了 2008 年的 GeoJSON规范成为 GeoJSON 格式的新标准规范。

https://linjingyi.cn/2020/01/19/Openlayers6%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90%EF%BC%9ADynamic%20Data/

按照课程顺序，应该先分析Dynamic Data这个demo，对应如下： 官网实例：Dynamic Data 跟我学OpenLayers——基础实例讲解：12 渲染器机制的使用 > 实例80.动态点的效果 定义基本结构先把地图基本结构展示出来： 1234567891011121314151617181920212223242526272829303132333435363738<!

https://linjingyi.cn/posts/ac8f4bae.html

下述内容翻译自 Professional JavaScript for Web Developes,4th Edition（JavaScript 高级程序设计第四版），225 页，Iterators and Generators（迭代器和生成器） 章节。

https://linjingyi.cn/2020/OpenLayers6%E5%BD%97%E6%98%9F%E6%89%AB%E5%B0%BE%E8%88%AA%E7%BA%BF%E5%9B%BE/

前面的实例分析中有 OpenLayers 的Flight Animation的解析，这一篇不分析官网实例，而是结合canvas 绘制火球的的方式，把航线绘制成彗星扫尾的感觉，类似 Echarts 中的迁徙图，最终结果如下图所示： 该图的数据利用的是OpenFlight的数据，是从 Flight Animation 魔改得到的，主要实现思路是把航线绘制时使用的的 vectorContext 改为

https://linjingyi.cn/posts/a3f2035b.html

分析lodash——compact，compact 的源码非常简单，并没有引用其他的函数。但是看源码之前，首先想一个问题，lodash 源码里大量出现了 a == null 或 a != null 的判断，所以值 a 什么情况下 满足 a == null 为真？什么情况下 a == undefined 为真？

https://linjingyi.cn/posts/aab41707.html

之前一段时间得了急性肠炎，休养停更了一段时间。天气变热，大家也要多多注意，隔夜食物如果没进冰箱就别吃了 😢。 本篇递进解析下进程、线程、浏览器渲染、任务队列、事件循环，最后用一个 ES2016 的 async/await 例子进行了分析。部分内容借鉴一些书籍和博客。

https://linjingyi.cn/2020/OpenLayers6%E5%BD%97%E6%98%9F%E6%89%AB%E5%B0%BE%E8%BF%81%E5%BE%99%E5%9B%BE/

前面的实例分析中有OpenLayers的Flight Animation的解析，这次结合canvas绘制火球的的方式，把航线绘制成彗星扫尾的感觉，类似Echarts中的迁徙图，最终结果如下图所示： 该图的数据利用的是OpenFlight的数据，是从Flight Animation魔改得到的，主要实现思路是把航线绘制时使用的的vectorContext改为canvas的context，再结合can