项目总结,快速入门

XCel 项目总括:Electron 与 Vue 的性子优化

2017/03/01 · 基本功技能 ·
Javascript,
算法

正文作者: 伯乐在线 –
刘健超-J.c
。未经小编许可,防止转发!
接待加入伯乐在线 专辑我。

XCEL 是由京东客户体验设计部凹凸实验室推出的一个 Excel
数据洗濯工具,其通过可视化的措施让顾客轻巧地对 Excel 数据开展筛选。

XCEL 基于 Electron 和 Vue 2.x,它不独有跨平台(windows 7+、Mac 和
Linux),并且充足利用 Electron 多进程职分处理等功能,使其属性杰出。

落地页: ✨✨✨
品类地址: ✨✨✨

迅猛入门

Electron 可以令你使用纯 JavaScript 调用足够的原生 APIs
来创设桌面应用。你能够把它作为三个只顾于桌面应用的 Node.js
的变体,实际不是 Web 服务器。

那不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反,Electron 使用
web 页面作为它的 GUI,所以你能把它看成成八个被 JavaScript
调控的,精简版的 Chromium 浏览器。

类别背景

顾客研商的定量研商和轻量级数据管理中,均需对数据开展保洁管理,以剔除非凡数据,保证数据结果的信度和效度。近来因调查研究数据和轻量级数据的多变性,对轻量级数据洗涤往往使用人工洗涤,紧缺统一、规范的清洗流程,但对此应用讨论和轻量级的数据往往是须要有限支撑数据稳固性的,由此,在对数据开展保洁时最佳有法规的洗濯方法。

主进程

在 Electron 里,运行 package.jsonmain
脚本的进程被称作主进程。在主进度运营的脚本能够以创设 web
页面包车型客车款型显示 GUI。

特点一览

  • 传闻 Electron 研发并封装成为原生应用,顾客体验非凡;
  • 可视化操作 Excel 数据,帮忙文件的导入导出;
  • 具备单列运算逻辑、多列运算逻辑和双列范围逻辑三种筛选格局,而且可经过“且”、“或”和“编组”的主意自由组合。

渲染进度

是因为 Electron 使用 Chromium 来呈现页面,所以 Chromium
的多进度协会也被丰硕利用。每一个 Electron
的页面都在运维着团结的经过,那样的经过大家称为渲染进度

在平时浏览器中,网页平时会在沙盒处境下运作,而且不允许访谈原生产资料源。可是,Electron
顾客具有在网页中调用 Node.js 的 APIs
的力量,能够与底层操作系统直接互动。

思路与完毕

基于用研组的供给,利用 Electron 和 Vue 的性状对该工具实行付出。

主进程与渲染过程的分别

主进度使用 BrowserWindow 实例成立页面。每一个 BrowserWindow
实例都在温馨的渲染进程里运维页面。当三个 BrowserWindow
实例被毁灭后,相应的渲染进度也会被截至。

主进度管理全体页面和与之相应的渲染进程。每种渲染进度都以相互独立的,何况只关切他们自身的页面。

是因为在页面里处理原生 GUI
财富是十二分惊恐并且轻巧导致能源败露,所以在页面调用 GUI 相关的 APIs
是不被允许的。倘使你想在网页里应用 GUI
操作,其对应的渲染进度必得与主进度实行广播发表,央求主进度打开相关的 GUI
操作。

在 Electron,我们提供二种办法用于主进度和渲染进度之间的简报。像
ipcRenderer
ipcMain
模块用于发送音讯, remote
模块用于 RPC 格局通信。那个剧情都能够在三个 FAQ 中查阅 how to share
data between web
pages。

技能选型

  • Electron:桌面端跨平台框架,为 Web
    提供了原生接口的权力。打包后的次序包容 Windows 7 及以上、Mac、Linux
    的 32 / 64 位系统。详情>>
  • Vue 全家桶:Vue
    具备数据驱动视图的风味,切合重数量交互的运用。详情>>
  • js-xlsx:宽容各样石英手表格格式的剖判器和生成器。纯 JavaScript
    完成,适用于 Node.js 和 Web
    前端。详情>>

制作你首先个 Electron 应用

大意上,八个 Electron 应用的目录结构如下:

your-app/
├── package.json
├── main.js
└── index.html

package.json 的格式和 Node 的完全一致,并且十一分被 main
字段证明的脚本文件是您的采取的启航脚本,它运转在主进度上。你选取里的
package.json 看起来应当像:

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

注意:如果 main 字段未有在 package.json 申明,Electron会优先加载
index.js

main.js 应该用于制造窗口和管理种类事件,三个卓越的事比如下:

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// 保持一个对于 window 对象的全局引用,如果你不这样做,
// 当 JavaScript 对象被垃圾回收, window 会被自动地关闭
let win

function createWindow () {
  // 创建浏览器窗口。
  win = new BrowserWindow({width: 800, height: 600})

  // 加载应用的 index.html。
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // 打开开发者工具。
  win.webContents.openDevTools()

  // 当 window 被关闭,这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象,如果你的应用支持多窗口的话,
    // 通常会把多个 window 对象存放在一个数组里面,
    // 与此同时,你应该删除相应的元素。
    win = null
  })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时,调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在这文件,你可以续写应用剩下主进程代码。
  // 也可以拆分成几个文件,然后用 require 导入。
  if (win === null) {
    createWindow()
  }
})

// 在这文件,你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件,然后用 require 导入。

最终,你想显示的 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

兑现思路

  1. 通过 js-xlsx 将 Excel 文件深入分析为 JSON 数据
  2. 基于筛选标准对 JSON 数据开展筛选过滤
  3. 将过滤后的 JSON 数据转变来 js-xlsx 钦点的数据结构
  4. 使用 js-xlsx 对转移后的数量生成 Excel 文件

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

运行你的运用

设若您创制了开始时代的 main.jsindex.htmlpackage.json
这多少个文本,你大概会想尝尝在该地运转并测验,看看是还是不是和梦想的那么不荒谬运维。

连锁本领

一旦对某项工夫相比较熟谙,则可略读/跳过。

electron-prebuilt

electron
是一个 npm 模块,满含所接纳的 Electron 预编写翻译版本。
假诺您早已用 npm 全局安装了它,你只必要根据如下情势平昔运维你的采纳:

electron .

如果你是有的安装,那运维:

Electron

macOS / Linux

$ ./node_modules/.bin/electron .

Electron 是什么?

Electron 是三个得以用 JavaScript、HTML 和 CSS
塑造桌面应用程序的。这个应用程序能打包到 Mac、Windows 和 Linux
系统上运营,也能上架到 Mac 和 Windows 的 App Store。

  • JavaScript、HTML 和 CSS 皆以 Web
    语言,它们是整合网址的一部分,浏览器(如
    Chrome)驾驭怎么将这一个代码转为可视化图像。
  • Electron 是四个库:Electron
    对底层代码举行抽象和包裹,让开采者能在此之上创设项目。

Windows

$ .node_modules.binelectron .

何以它如此重大?

常见来讲,每种操作系统的桌面应用都由个别的原生语言进行编辑,那表示必要3 个集体分别为该行使编写相应版本。而 Electron 则允许你用 Web
语言编写三次就能够。

  • 原生(操作系统)语言:用于开拓主流操作系统应用的原生语言的呼应关系(大繁多动静下):Mac
    对应 Objective C、Linux 对应 C、Windows 对应 C++。

手工下载 Electron 二进制文件

假如您手工业下载了 Electron
的二进制文件,你也足以直接运用个中的二进制文件一直运营你的使用。

它由哪些组成?

Electron 结合了 ChromiumNode.js 和用于调用操作系统本地作用的
API(如展开文件窗口、文告、Logo等)。

  • Chromium:谷歌(Google) 成立的一个开源库,并用于 谷歌(Google) 的浏览器
    Chrome。
  • Node.js(Node):贰个在服务器运维 JavaScript
    的运作时(runtime),它兼具访谈文件系统和网络权限(你的微型Computer也足以是一台服务器!)。

图片 1

Windows

$ .electronelectron.exe your-app

开采体验如何?

基于 Electron 的付出就如在支付网页,并且能够无缝地 使用
Node
。或然说:在创设几个 Node 应用的同时,通过 HTML 和 CSS
构建分界面。别的,你只需为一个浏览器(最新的
Chrome
)举行规划(即无需思虑包容性等)。

  • 使用 Node:那还不是总体!除了全体的 Node API,你还足以行使托管在
    npm 上抢先 350,000 个的模块。
  • 三个浏览器:并不是全体浏览器都提供相同的体裁,Web
    设计员和开辟者日常由此而不得不花费越多的精力,让网址在不一致浏览器上海展览中心现同样。
  • 最新的 Chrome:可应用超越 十分之七 的 ES二零一四 本性和其他很酷的表征(如
    CSS 变量)。

Linux

$ ./electron/electron your-app/

八个进程(入眼)

Electron
有二种进度:『主进度』和『渲染进程』。部分模块只可以在两个之一上运转,而略带则无界定。主进度越多地充作幕后角色,而渲染进程则是应用程序的种种窗口。

注:可透过职分管理器(PC)/活动监视器(Mac)查看进程的连带消息。

  • 模块:Electron 的 API 是依照它们的用途举办分组。比方:dialog
    模块具有具有原生 dialog 的 API,如张开文件、保存文件和警示等弹窗。

macOS

$ ./Electron.app/Contents/MacOS/Electron your-app/

Electron.app 里面是 Electron 发表包,你能够在
这里
下载到。

主进程

主进度,平日是多少个命名称叫 main.js 的文件,该公文是每一种 Electron
应用的入口。它决定了运用的生命周期(从展开到关闭)。它既可以调用原生成分,也能制造新的(多少个)渲染进度。另外,Node
API 是放到当中的。

  • 调用原生元素:打开 diglog
    和任何操作系统的交互均是财富密集型操作(注:出于安全思索,渲染进度是无法直接访问本地财富的),因而都亟需在主进程完毕。

图片 2

以批发版本运行

在你成功了您的选用后,你能够依照
行使安顿
引导公布叁个版本,何况以已经打包好的款型运维应用。

渲染进度

渲染进程是应用的贰个浏览器窗口。与主进程分化,它能存在五个(注:三个Electron
应用只好存在几个主进度)而且相互独立(它也能是隐藏的)。主窗口平日被取名称叫
index.html。它们就如超人的 HTML 文件,但 Electron 赋予了它们完整的
Node API。由此,那也是它与浏览器的区分。

  • 互相独立:每一种渲染进度都以单独的,那代表有个别渲染进度的崩溃,也不会影响别的渲染进度。
  • 隐藏:可隐敝窗口,然后让其在私下运维代码()。

图片 3

参照下边例子

复制并且运营那个库
electron/electron-quick-start

注意:运作时索要您的系列现已设置了
Git 和
Node.js(包含
npm)。

# 克隆这仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入仓库
$ cd electron-quick-start
# 安装依赖库并运行应用
$ npm install && npm start

越来越多 apps 例子,查看 electron 社区成立的 list of
boilerplates。

把它们想象成这么

Chrome(或其余浏览器)的每种标签页(tab)及其页面,就好比 Electron
中的三个单独渲染进度。纵然关闭全数标签页,Chrome 依然留存。那好比
Electron 的主进程,能开荒新的窗口或关闭这么些动用。

注:在 Chrome
浏览器中,叁个标签页(tab)中的页面(即除去浏览器本身部分,如寻觅框、工具栏等)就是多个渲染进度。

图片 4

交互通信

是因为主进程和渲染进度各自承担区别的职分,而对于急需一齐完毕的天职,它们必要相互通信。IPC就为此而生,它提供了经过间的简报。但它不得不在主进度与渲染进度之间传递信息(即渲染进程之间不能够进行直接通信)。

  • IPC:主进度和渲染进度各自具有二个 IPC 模块。

图片 5

汇成一句话

Electron 应用就好像 Node 应用,它也依靠二个 package.json
文件。该公文定义了哪位文件作为主进度,并就此让 Electron
知道从何运维应用。然后主进度能创立渲染进度,并能使用 IPC
让双方间进行音信传递。

图片 6

由来,Electron
的功底部分介绍完成。该片段是基于小编在此之前翻译的一篇小说《Essential
Electron》,译文可点击
这里。


Vue 全家桶

该工具使用了 Vue、Vuex、Vuex-router。在工具基本定型阶段,由 1.x 升级到了
2.x。

为什么选用 Vue

对于作者来讲:

  • 总结易用,常常接纳只需看官方文书档案。
  • 数码驱动视图,所以基本不用操作 DOM 了。
  • 框架的留存是为了支持我们应对复杂度。
  • 全家桶的功利是:对于日常景色,大家就无需思念用哪些个库(插件)。

Vue 1.x -> Vue 2.0 的本子迁移用
vue-migration-helper
就可以深入分析出半数以上须求改动的地点。

网桃月有好多有关 Vue 的教程,故在此不再赘言。至此,Vue 部分介绍达成。


发表评论

电子邮件地址不会被公开。 必填项已用*标注