金沙js333娱乐场XCel 项目总计:Electron 与 Vue 的属性优化

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 浏览器。

原文:https://github.com/electron/electron/blob/master/docs/glossary.md
译者:Lin

品种背景

用户探究的定量切磋和轻量级数据处理中,均需对数码实行清洗处理,以剔除很是数据,保险数据结果的信度和效度。近日因调查研讨数据和轻量级数据的多变性,对轻量级数据清洗往往利用人工清洗,缺乏统壹 、标准的清洗流程,但对于调查研商和轻量级的数量往往是亟需保障数据稳定性的,由此,在对数据进行清洗时最棒有原则的洗涤方式。

主进程

在 Electron 里,运行 package.jsonmain
脚本的经过被称为主进程。在主进度运维的脚本可以以创办 web
页面包车型客车样式凸显 GUI。

其一页面定义了有的在Electron中时时利用的专盛名词。

特征一览

  • 基于 Electron 研究开发并封装成为原生应用,用户体验优良;
  • 可视化操作 Excel 数据,帮助文件的导入导出;
  • 有着单列运算逻辑、多列运算逻辑和双列范围逻辑两种筛选格局,并且可透过“且”、“或”和“编组”的章程随机组合。

渲染进度

由于 Electron 使用 Chromium 来展现页面,所以 Chromium
的多进度组织也被丰硕利用。各样 Electron
的页面都在运维着温馨的历程,那样的长河大家誉为渲染进程

在形似浏览器中,网页平时会在沙盒环境下运作,并且分裂意访问原生产资料源。不过,Electron
用户拥有在网页中调用 Node.js 的 APIs
的力量,能够与底层操作系统直接互动。

ASAR

ASAR是Atom Shell Archive
Format的简称。一个asar文书档案是2个把公文都坐落贰个独立的文件中的简单的tar-like类型文件。Electron能够从中读取全体的文书而不用解压整个文件。

开创ASA揽胜类型首若是为着在Windows下增进质量… TODO

思路与贯彻

根据用研组的须要,利用 Electron 和 Vue 的特征对该工具进行付出。

主进度与渲染进度的差别

主进程使用 BrowserWindow 实例创制页面。各类 BrowserWindow
实例都在和谐的渲染进度里运转页面。当一个 BrowserWindow
实例被销毁后,相应的渲染进度也会被截止。

主进度管理全数页面和与之对应的渲染进度。每一个渲染进程都以互为独立的,并且只关心他们协调的页面。

是因为在页面里保管原生 GUI
能源是十三分惊险而且简单造成能源败露,所以在页面调用 GUI 相关的 APIs
是不被允许的。假设你想在网页里选择 GUI
操作,其对应的渲染进程必须与主进程实行电视发表,请求主进度展开有关的 GUI
操作。

在 Electron,大家提供二种办法用于主进度和渲染进度之间的通信。像
ipcRenderer
ipcMain
模块用于发送音讯, remote
模块用于 奥迪Q7PC 方式通信。这个内容都足以在三个 FAQ 中查看 how to share
data between web
pages。

Brightray

Brightray是叁个使libchromiumcontent更便于选用使用的静态库。它是专程为了Electron而创办的,可是也足以允许尚未基于Electron的原生应用使用Chromium的渲染引擎。

Brightray是Electron的三个尾部的注重性,超过52%Electron的使用者并不用担心它。

技巧选型

  • 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 应该用于创设窗口和处理种类事件,3个头名的例子如下:

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>

DMG

Apple Disk
Image是三个在MacOS上行使的打包类型。DMG文件一般用来散发应用的“安装文件”。electron-builder支撑dmg作为2个包装指标。

贯彻思路

  1. 透过 js-xlsx 将 Excel 文件分析为 JSON 数据
  2. 依照筛选标准对 JSON 数据开始展览筛选过滤
  3. 将过滤后的 JSON 数据转换来 js-xlsx 钦赐的数据结构
  4. 行使 js-xlsx 对转移后的数据生成 Excel 文件

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

运行你的利用

假如您创建了初期的 main.jsindex.htmlpackage.json
那多少个公文,你恐怕会想尝尝在本土运维并测试,看看是还是不是和期望的那样符合规律运维。

IPC

IPC是Inter-Process
Communication的简称。Electron使用IPC在主进程和渲染进度时期发送系列化的JSON信息。

有关技术

一旦对某项技术相比较精晓,则可略读/跳过。

electron-prebuilt

electron金沙js333娱乐场,
是一个 npm 模块,包蕴所采取的 Electron 预编写翻译版本。
假使您曾经用 npm 全局安装了它,你只须要服从如下方式直接运营你的使用:

electron .

假定你是一些安装,那运营:

libchromiumcontent

3个暗含了Chromium内容模块和装有正视(例如,Blink,V8等)的不难的共享库。

Electron

macOS / Linux

$ ./node_modules/.bin/electron .

main process

主过程,平常是1个称作main.js的文书,是指向每2个Electron应用的进口。它决定着应用从打开到关闭的生命周期。它也管理着原生控件,比如MenuMenu BarDockTray等。主进度在利用中担当着成立每一个新的渲染进度的义务。全体的Node接口都在它其中。

每三个行使的主线程文件是在package.json文件中的main天性中被钦赐的。那是electron .怎么着精通运维时要进行哪个文件的由来。

参见:process,renderer
process

Electron 是什么?

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

  • JavaScript、HTML 和 CSS 都是 Web
    语言,它们是整合网站的一有的,浏览器(如
    Chrome)通晓如何将那么些代码转为可视化图像。
  • Electron 是叁个库:Electron
    对底层代码举行抽象和打包,让开发者能在此之上塑造项目。

Windows

$ .\node_modules\.bin\electron .

MAS

Apple’s Mac App
Store的缩写。关于提交你的应用程序到MAS的详细消息,请看Mac App Store
Submission
Guide。

缘何它如此重要?

一般而言来说,每一个操作系统的桌面应用都由个别的原生语言进行编辑,那意味着须求3 个集团分别为该使用编写相应版本。而 Electron 则允许你用 Web
语言编写三次即可。

  • 原生(操作系统)语言:用于支付主流操作系统应用的原生语言的相应关系(一大半情景下):Mac
    对应 Objective C、Linux 对应 C、Windows 对应 C++。

手工业下载 Electron 二进制文件

假如您手工业下载了 Electron
的二进制文件,你也足以直接运用在那之中的二进制文件向来运维你的利用。

native modules

Native
modules(在Node.js中也叫插件)是C或C++写的模块,使用require()函数能够被加载到Node.js或Electron中,然后就能够像三个一般Node.js模块一样选取了。它们主要用于提供贰个把js运维在Node.js和C/C++库上的接口。

Electron帮衬Native Node
modules,不过出于Electron卓殊有也许采用安装在您电脑上的Node二进制文件中的不一致版本的V8,你在编写翻译native
modules的时候必要手动钦定Electron的底部地方。

参考Using Native Node
Modules。

它由什么组成?

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

  • Chromium:谷歌(Google) 成立的二个开源库,并用以 谷歌(Google) 的浏览器
    Chrome。
  • Node.js(Node):四个在服务器运营 JavaScript
    的运作时(runtime),它兼具访问文件系统和网络权限(你的电脑也得以是一台服务器!)。

金沙js333娱乐场 1

Windows

$ .\electron\electron.exe your-app\

NSIS

Nullsoft Scriptable Install System是三个Microsoft
Windows下的剧本驱动的设置制作工具。它揭发在免费软件许可证下,是3个接近于InstallShield的宽广的被用来顶替商业专有产品的工具。electron-builder支撑NSIS作为四个编写翻译目的。

开发体验怎么着?

依据 Electron 的支付就像是在支付网页,而且能够无缝地 使用
Node
。恐怕说:在构建一个 Node 应用的同时,通过 HTML 和 CSS
构建界面。别的,你只需为2个浏览器(最新的
Chrome
)举行统一筹划(即无需考虑包容性等)。

  • 使用 Node:那还不是整套!除了全体的 Node API,你还是能利用托管在
    npm 上超过 350,000 个的模块。
  • 一个浏览器:并非全部浏览器都提供相同的体裁,Web
    设计师和开发者日常由此而不得不费用越来越多的活力,让网站在差异浏览器上表现一致。
  • 最新的 Chrome:可采用抢先 十分之九 的 ES二零一四 特性和任何很酷的性状(如
    CSS 变量)。

Linux

$ ./electron/electron your-app/

process

一个进度是三个正值运维的微处理器程序的实例。Electron应用实际上是接纳主进程和1个或多少个渲染进度还要运营多少个程序。

Node.js和Electron中,每2个运作着的进度都以叁个process指标。那一个指标是二个大局的并提供关于当前经过的消息和操纵。作为3个大局的,它在使用中不使用require()也是实用的。

参见:main
process, renderer
process

四个经过(重点)

Electron
有三种进程:『主进程』和『渲染进度』。部分模块只幸好双方之一上运营,而有点则无界定。主进度越来越多地担任幕后脚色,而渲染进度则是应用程序的一一窗口。

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

  • 模块:Electron 的 API 是基于它们的用途实行分组。例如:dialog
    模块拥有具有原生 dialog 的 API,如打开文件、保存文件和警戒等弹窗。

macOS

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

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

renderer process

在您的选择中,渲染进度正是三个浏览器窗口。差异于主进程,可以有多少个渲染进度并且每二个渲染进程都作为二个相隔的进度来运行。它们也足以被隐形。

一般的浏览器中,网页日常运营在多少个沙盒环境中,并且不容许调用本地财富。Electron的使用者有职务使用Node.js接口来与底层的操作系统哦交互。

参考:process,main
process

主进程

主进程,平时是贰个命名为 main.js 的公文,该公文是各种 Electron
应用的输入。它决定了利用的生命周期(从打开到关门)。它既能调用原生成分,也能成立新的(四个)渲染进度。别的,Node
API 是停放在这之中的。

  • 调用原生成分:打开 diglog
    和其它操作系统的并行均是能源密集型操作(注:出于安全考虑,渲染进程是不能一向访问当地财富的),因而都急需在主进程完结。

金沙js333娱乐场 2

以批发版本运转

在你成功了您的选取后,你能够根据
行使布置
辅导发表二个本子,并且以已经打包好的款型运转应用。

Squirrel

Squirrel是三个开源的框架,能够允许Electron应用自动升级到已经发表的新星版本。查看autoUpdater接口的选拔Squirrel运行的音信。

发表评论

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