• 

近日，个推TechDay技术沙龙第三站在杭州圆满落幕。本站，个推联合freeCodeCamp，邀请了360高级前端架构师贺师俊、freeCodeCamp成都社区负责人水歌、PayPal Senior Software Engineer 于航、个推高级前端工程师东风四位技术大咖，围绕“前端开发展望，创新技术落地”的主题，与在场来宾分享了前端开发的实践方法及未来发展前景。

 

以下是杭州站分享嘉宾的精华提炼：

 

贺师俊，360高级前端架构师、TC39代表

《聊聊JS的几个新特性》

贺师俊首先结合自己参与TC39工作的经验，介绍了JavaScript在ECMA标准组织中的标准化过程，以及处理JS新提案的流程。然后着重介绍了JS未来可能会加入的两个新特性：Nullish Coalescing Operators、Optional Chaining。

 

Nullish Coalescing Operators

中文直译为空值联合（这种翻译方案不太好理解）。

 

语法示例：a ?? b

含义：a如果不是空值（既不是undefined，也不是null），就返回a，否则的话返回b。

 

这个新的运算符在很多情况下方便我们代码的书写，避免代码和可能的副作用的重复。

 

尚未最终决定的问题：运算符优先级。

 

Optional Chaining

实际上更合适的名字应该叫Nullish-aware Operators。

 

语法示例：a?.b、a?.[key]、a?.(...args)

a.b在a为nullish时会产生ReferenceError，而a?.b会处理nullish。

 

含义：a如果不是空值（既不是undefined，也不是null），则返回a.b，否则返回undefined。

 

语法要点：由于和三元运算符存在冲突，所以不能使用a?[key]和a?(...args)。

语义要点：长短路、null?.x返回undefined而不是null。

 

东风，个推前端高级工程师

undefined

《数据可视化前端实践》

数据可视化由4类元素构成：背景信息、标尺、坐标系以及视觉暗示。这里的背景信息主要包括标题、度量单位、注释等。数据可视化通常用于统计数据、关系数据、地理空间数据。

 

地图的渲染步骤，可以概括为三步。步骤一：地球通过墨卡托投影变成平面地图。步骤二：平面地图根据现实场景，分成一层层不同精度的地图，类似一个金字塔状。步骤三则是通过一张张瓦片拼凑起来这张地图的细节。

 

个推大屏的实践

个推可视化大屏运用了数据可视化来展示个推丰富、多维度的数据能力。消息下发图、热力图是个推可视化大屏的两种主要表现形式。消息下发图指的是从时间和区域两个维度，即时、客观地展示数据下发的过程。热力图则是通过运用不同的色块，在地图上显示各展馆区域的人群分布和密集情况。

 

消息下发图和热力图是如何实现的？东风将其拆解为四个图层，即地图底层、热力图层、飞线层以及其他任何地理空间数据层，并着重讲解了地图底层、热力图层和飞线层的实现方式。

 

地图底层的实现

主要分为三步。第一步，从阿里云datav拿到中国的数据，再通过墨卡托投影算法拿到转换后的数据；第二步，把数据渲染到canvas上，这里用的是d3js的墨卡托转换函数，再用.context方法渲染到canvas上。第三步，渲染完地图后调整效果，阴影，边框，变形等。

 

热力图的实现

热力图的实现可以拆解为以下三个步骤。首先，获取数据和配置（阀值半径）并做适当的数据处理，比如数据聚合等。其次，我们按照配置把数据渲染成透明度比例。最后，我们通过canvas api的getImageData获取渲染后的透明度，再用putImageData对应下面的颜色条渲染出热力图效果。

 

地图底层的实现

飞线层的实现可以分为贝塞尔曲线、动画、光效三个组成部分。贝塞尔曲线是计算机图形图像造型的基本工具，是图形造型运用得最多的基本线条之一。动画本质上是图像按照事先设定好的顺序在一定的时间内的图像序列变化运动。我们设定好飞线的飞行周期，知道起点、终点，映射出每一帧中飞线的状态，再根据requestAnimationFrame，便可以做出飞线的动画效果。

 

光效在ps中，会有内发光，外发光，材质等等，那程序中是怎么实现的呢？openGl着色引擎中，分为三个步骤，先提取图片中的亮色，再高斯模糊，然后再纹理混合，还有一种更为简单易懂的，就是色彩模式中的hsl，我们可以根据颜色的色相，饱和度和亮度，调整出相应的泛光效果。

 

于航， PayPal Senior Software Engineer

undefined

《Code Encryption with WASM》

 

前端由于其特殊性，无法把代码加密成一个特殊的格式给浏览器，因此，我们指的前端代码加密其实是指降低代码的可读性，让代码逻辑成为黑盒。第三方插件、UglifyJS、Closure Compiler等为常用的代码“加密”方式。但以上几种“加密”方式，很容易被识破，因此，我推荐“WebAssembly”。

 

它是新的抽象虚拟机、新的字节码类型，其特性与平台无关。WebAssembly文件可以通过C++代码编译成LLVM-IR这种中间格式，然后再编译成Wasm的形式来生成。而通过JavaScript API可以实现对WebAssembly文件的调用。相比起UglifyJS、Closure Compiler，其在“加密”方面突出的优势在于它给代码进行了“加壳”。

 

所谓“加壳”指的是WebAssembly对代码加上了VM Core，并进行了OpCode化。而如果有人想破译经过“WebAssembly”方式“加密”的代码，则需要全方面了解Wasm原理、新VM体系的ByteCode以及OpCode 私有化里面包含的所有内容，包括自定义的 OpCode 指令集、自定义的 ByteCode 映射方式以及“自定义的模拟调用栈、符号表以及寄存器”等。

 

尽管WebAssembly这种“加密”方式目前而言，相对比较安全，但是，大家要知道：没有永远安全的“加密”方式。代码能否被破解是概率问题。因此，大家在进行代码黑盒化之前要先考虑清楚代码本身的价值。代码价值偏高才需要进行黑盒化。 

 

水歌，freeCodeCamp成都社区负责人

undefined

《Web 组件标准实践》

 

Web组件是指将网页中某块界面的 HTML 结构、CSS 样式、JS 逻辑，封装成一个可移植的模块。历史Web组件技术存在如下问题：隔离性好的，运行时过重；易用性好的，工程化不佳；实用性强的，工具链过重。基于这样的问题，Google Polymer团队（Angular兄弟框架）就提出了Web 组件标准去帮我们把组件化开发这种思想落地到浏览器上。

 

Web 组件标准是一个包含了HTML 5.3、DOM 4.1、CSS Variables level 1、ECMAScript 6+的标准集，旨在实现运行时轻量级隔离环境和框架无关的 DOM 接口。来看一下按照Web组件标准进行的代码写法。新标准在样式定制上，一是用CSS变量，二是Web Components中两个新的选择符，分别是:host和::slotted()。:host代表了这个自定义元素，即组件根节点。:slotted()则是指插入到插槽当中的元素能匹配括号里面的选择符所应用的样式。

 

生命周期是组件很必要的一个API接口。第一个是observedAttributes，这是一个静态的getter，它规定了我要观察哪些HTML attribute，然后attributeChangedCallback就是在你观察了之后，如果我的这个自定义标签，比如我的title属性，我给它改了，这个Callback会被调用。

 

在扩展原生方面，customElements不仅可以创建我们自己的自定义元素，还可以扩展原生的Element，比如一个，我想要让它变得更强大一点，我就可以自己声明一个继承自HTMLButtonElement的一个新class，一个子类，然后去拓展它现有button。

 

为何标准委员会会发明这样的实现方式？其实是因为HTML从始至终都遵循着这样的设计模式：渐进增强、优雅降级。即功能强的浏览器可以用很好的功能，而功能差的浏览器则可以用平滑的不报错的方式去让它运行基本功能。这就引出了一个规范模式：不要接管一切。

 

为了让Web Components使用更方便，我本人开发了WebCell —— 优雅、轻量的 Web 组件引擎，该引擎具有一键打包、声明式组件、扩展生命周期、路由即组件、独立数据模型等特点，大家可以去体验。