美高梅官方网站3045-mgm6608美高梅app下载
1. 术语表

1. 术语表

作者:mgm美高梅 官方网址    来源:未知    发布时间:2019-11-25 12:47    浏览量:

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文档是一个把公文都坐落一个单独的公文中的轻巧的tar-like类型文件。Electron能够从当中读取全部的文件而不用解压整个文件。

成立ASA凯雷德类型主若是为着在Windows下抓好质量... TODO

思路与达成

依靠用研组的供给,利用 Electron 和 Vue 的性状对该工具进行付出。

主进程与渲染进程的差别

主进度使用 BrowserWindow 实例创造页面。每一个 BrowserWindow 实例都在温馨的渲染进程里运营页面。当二个 BrowserWindow 实例被销毁后,相应的渲染进度也会被甘休。

主进度处理全体页面和与之相应的渲染进度。种种渲染进度皆以相互独立的,何况只关怀他们友善的页面。

出于在页面里管理原生 GUI 财富是非常危急並且便于招致能源败露,所以在页面调用 GUI 相关的 APIs 是不被允许的。假诺您想在网页里应用 GUI 操作,其相应的渲染进程必得与主过程实行报纸发表,央浼主进度张开相关的 GUI 操作。

在 Electron,我们提供三种方法用于主进度和渲染进度之间的通信。像 ipcRendereripcMain 模块用于发送音讯, remote 模块用于 RPC 格局通信。这么些故事情节都足以在一个 FAQ 中查看 how to share data between web pages。

Brightray

Brightray是多个使libchromiumcontent更便于选择应用的静态库。它是特意为了Electron而成立的,可是也可以允许还未有基于Electron的原生应用使用Chromium的渲染引擎。

Brightray是Electron的二个平底的注重,大好些个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 应该用于成立窗口和管理种类事件,贰个独立的事比方下:

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作为二个卷入指标。

兑现思路

  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 是一个 npm 模块,包涵所选择的 Electron 预编写翻译版本。
设若你已经用 npm 全局安装了它,你只须求固守如下形式直接运营你的使用:

electron .

假若您是局地安装,这运营:

libchromiumcontent

三个满含了Chromium内容模块和全数重视(举个例子,Blink,V8等卡塔 尔(英语:State of Qatar)的总结的共享库。

Electron

macOS / Linux

$ ./node_modules/.bin/electron .

main process

主进程,常常是八个称作main.js的公文,是指向每贰个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.binelectron .

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(如展开文件窗口、布告、Logo等卡塔尔国。

  • Chromium:谷歌(Google卡塔 尔(英语:State of Qatar) 创制的一个开源库,并用于 Google 的浏览器 Chrome。
  • Node.js(Node):八个在服务器运营 JavaScript 的运作时(runtime卡塔尔国,它兼具访问文件系统和网络权限(你的微机也足以是生机勃勃台服务器!卡塔尔。

图片 1

Windows

$ .electronelectron.exe your-app

NSIS

Nullsoft Scriptable Install System是八个Microsoft Windows下的台本驱动的设置制作工具。它发表在免费软件执照下,是一个接近于InstallShield的广阔的被用来代替商业专有产品的工具。electron-builder支撑NSIS作为二个编写翻译目的。

支出体验如何?

传闻 Electron 的花销就如在付出网页,並且能够无缝地 使用 Node。或然说:在构建三个 Node 应用的同一时候,通过 HTML 和 CSS 创设分界面。其它,你只需为二个浏览器(最新的 Chrome卡塔尔国进行规划(即没有必要酌量宽容性等卡塔 尔(阿拉伯语:قطر‎。

  • 使用 Node:那还不是总体!除了全体的 Node API,你还足以行使托管在 npm 上领先 350,000 个的模块。
  • 一个浏览器:并非全部浏览器都提供相符的体裁,Web 设计员和开垦者日常由此而一定要花销越多的精力,让网址在差别浏览器上海展览中心现同样。
  • 最新的 Chrome:可使用当先 八成 的 ES二零一四 性情和别的十分的帅的表征(如 CSS 变量卡塔尔国。

Linux

$ ./electron/electron your-app/

process

一个历程是三个正值周转的计算机程序的实例。Electron应用实际上是利用主进程和叁个或多少个渲染进度再者运维多少个程序。

Node.js和Electron中,每二个运转着的进程都以二个process目的。那么些目的是三个大局的并提供关于当前经过的音讯和决定。作为四个大局的,它在使用中不行使require()也是实用的。

参见:main process, renderer process

多个经过(重点卡塔尔

Electron 有二种进度:『主进度』和『渲染进度』。部分模块只好在两个之豆蔻梢头上运转,而有个别则无界定。主进度更加多地担当幕后剧中人物,而渲染进度则是应用程序的相继窗口。

注:可因而职责微处理器(PC卡塔 尔(英语:State of Qatar)/活动监视器(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 应用的入口。它决定了动用的生命周期(从展开到关门卡塔 尔(英语:State of Qatar)。它不只能调用原生成分,也能创制新的(五个卡塔 尔(阿拉伯语:قطر‎渲染进程。此外,Node API 是放手当中的。

  • 调用原生成分:展开 diglog 和别的操作系统的相互影响均是财富密集型操作(注:出于安全着想,渲染进度是不能够平昔访谈本地能源的卡塔尔,由此都急需在主进度达成。

图片 2

以批发版本运维

在您做到了你的使用后,你能够依照 利用计划 引导公布叁个本子,况且以业已打包好的样式运营应用。

Squirrel

Squirrel是一个开源的框架,能够允许Electron应用自动进级到已经发布的流行版本。查看autoUpdater接口的运用Squirrel运行的新闻。

友情链接: 网站地图
Copyright © 2015-2019 http://www.zen-40.com. mgm美高梅有限公司 版权所有