来自 业界快讯 2019-10-09 20:27 的文章
当前位置: 118kj开奖现场 > 业界快讯 > 正文

项目总结

XCel 项目总结:Electron 与 Vue 的性能优化

2017/03/01 · 基础技术 · Javascript, 算法

本文作者: 伯乐在线 - 刘健超-J.c 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

XCEL 是由京东用户体验设计部凹凸实验室推出的一个 Excel 数据清洗工具,其通过可视化的方式让用户轻松地对 Excel 数据进行筛选。

XCEL 基于 Electron 和 Vue 2.x,它不仅跨平台(windows 7+、Mac 和 Linux),而且充分利用 Electron 多进程任务处理等功能,使其性能优异。

落地页: ✨✨✨
项目地址: ✨✨✨

项目背景

用户研究的定量研究和轻量级数据处理中,均需对数据进行清洗处理,以剔除异常数据,保证数据结果的信度和效度。目前因调研数据和轻量级数据的多变性,对轻量级数据清洗往往采取人工清洗,缺少统一、标准的清洗流程,但对于调研和轻量级的数据往往是需要保证数据稳定性的,因此,在对数据进行清洗时最好有标准化的清洗方式。

特性一览

  • 基于 Electron 研发并打包成为原生应用,用户体验良好;
  • 可视化操作 Excel 数据,支持文件的导入导出;
  • 拥有单列运算逻辑、多列运算逻辑和双列范围逻辑三种筛选方式,并且可通过“且”、“或”和“编组”的方式任意组合。

思路与实现

基于用研组的需求,利用 Electron 和 Vue 的特性对该工具进行开发。

技术选型

  • Electron:桌面端跨平台框架,为 Web 提供了原生接口的权限。打包后的程序兼容 Windows 7 及以上、Mac、Linux 的 32 / 64 位系统。详情>>
  • Vue 全家桶:Vue 拥有数据驱动视图的特性,适合重数据交互的应用。详情>>
  • js-xlsx:兼容各种电子表格格式的解析器和生成器。纯 JavaScript 实现,适用于 Node.js 和 Web 前端。详情>>

实现思路

  1. 通过 js-xlsx 将 Excel 文件解析为 JSON 数据
  2. 根据筛选条件对 JSON 数据进行筛选过滤
  3. 将过滤后的 JSON 数据转换成 js-xlsx 指定的数据结构
  4. 利用 js-xlsx 对转换后的数据生成 Excel 文件

纸上得来终觉浅,绝知此事要躬行

相关技术

如果对某项技术比较熟悉,则可略读/跳过。

Electron

Electron 是什么?

Electron 是一个可以用 JavaScript、HTML 和 CSS 构建桌面应用程序的。这些应用程序能打包到 Mac、Windows 和 Linux 系统上运行,也能上架到 Mac 和 Windows 的 App Store。

  • JavaScript、HTML 和 CSS 都是 Web 语言,它们是组成网站的一部分,浏览器(如 Chrome)懂得如何将这些代码转为可视化图像。
  • Electron 是一个库:Electron 对底层代码进行抽象和封装,让开发者能在此之上构建项目。

为什么它如此重要?

通常来说,每个操作系统的桌面应用都由各自的原生语言进行编写,这意味着需要 3 个团队分别为该应用编写相应版本。而 Electron 则允许你用 Web 语言编写一次即可。

  • 原生(操作系统)语言:用于开发主流操作系统应用的原生语言的对应关系(大多数情况下):Mac 对应 Objective C、Linux 对应 C、Windows 对应 C++。

它由什么组成?

Electron 结合了 ChromiumNode.js 和用于调用操作系统本地功能的 API(如打开文件窗口、通知、图标等)。

  • Chromium:Google 创造的一个开源库,并用于 Google 的浏览器 Chrome。
  • Node.js(Node):一个在服务器运行 JavaScript 的运行时(runtime),它拥有访问文件系统和网络权限(你的电脑也可以是一台服务器!)。

图片 1

开发体验如何?

基于 Electron 的开发就像在开发网页,而且能够无缝地 使用 Node。或者说:在构建一个 Node 应用的同时,通过 HTML 和 CSS 构建界面。另外,你只需为一个浏览器(最新的 Chrome)进行设计(即无需考虑兼容性等)。

  • 使用 Node:这还不是全部!除了完整的 Node API,你还可以使用托管在 npm 上超过 350,000 个的模块。
  • 一个浏览器:并非所有浏览器都提供一致的样式,Web 设计师和开发者经常因此而不得不花费更多的精力,让网站在不同浏览器上表现一致。
  • 最新的 Chrome:可使用超过 90% 的 ES2015 特性和其它很酷的特性(如 CSS 变量)。

两个进程(重点)

Electron 有两种进程:『主进程』和『渲染进程』。部分模块只能在两者之一上运行,而有些则无限制。主进程更多地充当幕后角色,而渲染进程则是应用程序的各个窗口。

注:可通过任务管理器(PC)/活动监视器(Mac)查看进程的相关信息。

  • 模块:Electron 的 API 是根据它们的用途进行分组。例如:dialog 模块拥有所有原生 dialog 的 API,如打开文件、保存文件和警告等弹窗。

主进程

主进程,通常是一个命名为 main.js 的文件,该文件是每个 Electron 应用的入口。它控制了应用的生命周期(从打开到关闭)。它既能调用原生元素,也能创建新的(多个)渲染进程。另外,Node API 是内置其中的。

  • 调用原生元素:打开 diglog 和其它操作系统的交互均是资源密集型操作(注:出于安全考虑,渲染进程是不能直接访问本地资源的),因此都需要在主进程完成。

图片 2

渲染进程

渲染进程是应用的一个浏览器窗口。与主进程不同,它能存在多个(注:一个 Electron 应用只能存在一个主进程)并且相互独立(它也能是隐藏的)。主窗口通常被命名为 index.html。它们就像典型的 HTML 文件,但 Electron 赋予了它们完整的 Node API。因此,这也是它与浏览器的区别。

  • 相互独立:每个渲染进程都是独立的,这意味着某个渲染进程的崩溃,也不会影响其余渲染进程。
  • 隐藏:可隐藏窗口,然后让其在背后运行代码(

    本文由118kj开奖现场发布于业界快讯,转载请注明出处:项目总结

    关键词: