当前位置: 56net亚洲必嬴 > Web前端 > 正文

必赢56.netXCel 项目总计:Electron 与 Vue 的特性优化

时间:2019-10-24 18:29来源:Web前端
XCel 项目计算:Electron 与 Vue 的习性优化 2017/03/01 · 基础技巧 ·Javascript,算法 本文作者: 伯乐在线 -刘健超-J.c。未经作者许可,禁绝转发! 招待参与伯乐在线 专辑作者。 XCEL 是由京东顾

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

Vue.js、React.js 及 Angular.js 等等前端开荒框架引进了 UI = framework(State) 的前端编制程序逻辑,大范围裁减了后边贰个业务花费的难度,极其是面向复杂前端选取。而这一个优良开源框架的推广、多端业务合併、前后端分离的供给让更加的多的架构设计将超越百分之五十政工逻辑写在了前面一个。

项目背景

客商商讨的定量钻探和轻量级数据管理中,均需对数码实行洗涤管理,以剔除格外数据,保险数据结果的信度和效度。这段日子因应用探讨数据和轻量级数据的多变性,对轻量级数据洗涤往往利用人工清洗,缺乏统生机勃勃、规范的洗涤流程,但对于应用钻探和轻量级的数据往往是需求保险数据牢固性的,由此,在对数码实行洗涤时最棒有标准的洗濯格局。

主进程

在 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能够从当中读取全体的公文而不用解压整个文件。

始建ASALAND类型首假诺为了在Windows下拉长品质... TODO

而是,纯前端产品也享有它的标题。上述的多少个前端框架都支持了后端渲染的功用,进而融合了内外端的难点。怎么样有效地组合现存前端逻辑完结后端渲染、如何优化后端渲染品质、怎样贯彻服务器流式吐内容更加快地渲染页面包车型地铁经历,会成为新一代 Web 开拓的主旋律,升高前端业务支出的功用。在由七牛云主办的 ECUG 十周年盛会上,阴明为我们带来了他的实践共享。

思路与贯彻

基于用研组的供给,利用 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 应用

必赢56.net,大概上,二个 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作为二个包装目标。

必赢56.net 1

兑现思路

  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等)的简便的分享库。

 

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非常常有超级大可能率使用安装在您Computer上的Node二进制文件中的不相同版本的V8,你在编写翻译native modules的时候必要手动钦定Electron的底部地点。

参考Using Native Node Modules。

前端框架的热闹非凡及干练

它由什么组成?

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

  • Chromium:谷歌(Google) 创立的三个开源库,并用以 谷歌 的浏览器 Chrome。
  • Node.js(Node):一个在服务器运转 JavaScript 的运转时(runtime),它富有访谈文件系统和网络权限(你的微管理器也能够是后生可畏台服务器!)。

必赢56.net 2

Windows

$ .electronelectron.exe your-app

NSIS

Nullsoft Scriptable Install System是贰个Microsoft Windows下的剧本驱动的设置制作工具。它揭发在无需付费软件许可证下,是一个好像于InstallShield的广大的被用来代替商业专有产品的工具。electron-builder扶持NSIS作为八个编写翻译目的。

从知无不言到鼎足而立

必赢56.net 3

图 1 

 

这是从英特网找到的前端的情状(图 1 ),每二个颜料均是某三个前端库的分类。前端的社会风气正是那般,须要在一堆的选项中接收一个,况且要跟任何的选项 PK 。

 

如图 1 所示,方框的部分写具体的事体代码,比如早期的 jQuery。Prototype 曾经成功了 二〇〇一 年内有复杂专业代码的前端,写了汪洋的页面,守旧的后台 admin 等都是那样。再往上 Ember 相比相符业务牢固的类别应用,因为它一向坚称着前进包容,它不像新的库,假若出了一个新本子基本上要求推倒重写;而 Backbone 是写比较复杂页面包车型地铁二个库, Angular 、React 等等。

 

在此样繁琐的前端中,单纯写前端业务有那几个精选。曾见到三个讲评:“ 二〇一四年,你成功贰个巨轻便的事务,就需求 TypeScript 写代码,用 Fetch 发起异步伏乞,全体的代码编写翻译程 ES6 ……”用了几10个库完毕三个特别简单的难点。那么,在此样的前端生态下,它必然会是蓬勃的,假诺不鼎盛,不会有为数不菲人在这里边做作业。

 

编辑:Web前端 本文来源:必赢56.netXCel 项目总计:Electron 与 Vue 的特性优化

关键词:

  • 上一篇:没有了
  • 下一篇:没有了