金沙国际 网址js7779XCel 项目总括:Electron 与 Vue 的属性优化

XCel 项目总计:Electron 与 Vue 的性格优化

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

本文小编: 伯乐在线 –
刘健超-J.c
。未经小编许可,禁止转载!
迎接插手伯乐在线 专栏作者。

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

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

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

极快入门

Electron 能够让你使用纯 JavaScript 调用丰硕的原生 APIs
来创建桌面应用。你能够把它作为3个留意于桌面应用的 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)
的前端编制程序逻辑,大范围下降了前者业务支付的难度,特别是面向复杂前端采纳。而这几个优质开源框架的推广、多端业务合并、前后端分离的供给让更多的架构划设想计将大多数作业逻辑写在了前者。

品种背景

用户钻探的定量商讨和轻量级数据处理中,均需对数据举行清洗处理,以剔除格外数据,有限支撑数据结果的信度和效度。近日因调查切磋数据和轻量级数据的多变性,对轻量级数据清洗往往利用人工清洗,贫乏统1、标准的清洗流程,但对此调查研商和轻量级的数码往往是急需有限支持数据稳定性的,因而,在对数码进行保洁时最为有标准的洗涤方法。

主进程

在 Electron 里,运行 package.jsonmain
脚本的进度被号称主进程。在主进度运行的台本能够以创办 web
页面包车型地铁款型显得 GUI。

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

 

特征1览

  • 基于 Electron 研究开发并封装成为原生应用,用户体验特出;
  • 可视化操作 Excel 数据,辅助文件的导入导出;
  • 不无单列运算逻辑、多列运算逻辑和双列范围逻辑三种筛选格局,并且可通过“且”、“或”和“编组”的点子随机组合。

渲染进度

出于 Electron 使用 Chromium 来展示页面,所以 Chromium
的多进度协会也被丰硕利用。每一种 Electron
的页面都在运营着祥和的进度,那样的经过大家称为渲染进程

在形似浏览器中,网页平日会在沙盒环境下运营,并且差异意访问原生产资料源。可是,Electron
用户全体在网页中调用 Node.js 的 APIs
的能力,能够与底层操作系统直接互动。

ASAR

ASAR是Atom Shell Archive
Format的简称。一个asar文书档案是二个把公文都放在3个单身的文本中的不难的tar-like类型文件。Electron可以从中读取全体的文件而不用解压整个文件。

创建ASALX570类型紧要是为着在Windows下加强品质… TODO

不过,纯前端产品也存有它的标题。上述的多少个前端框架都协助了后端渲染的成效,从而融合了前后端的难题。怎么样有效地组合现有前端逻辑完结后端渲染、怎样优化后端渲染品质、怎么着贯彻服务器流式吐内容越来越快地渲染页面包车型地铁经历,会变成新一代
Web 开发的方向,提升前端业务开支的频率。在由7牛云主办的 ECUG
十周年盛会上,阴明为大家带来了她的施行分享。

思路与落到实处

依据用研组的要求,利用 Electron 和 Vue 的表征对该工具举行支付。

主进度与渲染进程的分化

主进程使用 BrowserWindow 实例成立页面。每一个 BrowserWindow
实例都在和谐的渲染进度里运营页面。当3个 BrowserWindow
实例被灭绝后,相应的渲染进度也会被终止。

主进度管理全部页面和与之相应的渲染进程。各样渲染进程都以并行独立的,并且只关怀他们协调的页面。

是因为在页面里保管原生 GUI
财富是老大惊险而且便于造成能源走漏,所以在页面调用 GUI 相关的 APIs
是不被允许的。如果您想在网页里接纳 GUI
操作,其相应的渲染进度必须与主进度举办电视发表,请求主进度展开有关的 GUI
操作。

在 Electron,大家提供二种艺术用于主进程和渲染进度之间的报道。像
ipcRenderer
ipcMain
模块用于发送音信, remote
模块用于 汉兰达PC 方式通讯。这一个情节都足以在一个 FAQ 中查阅 how to share
data between web
pages。

Brightray

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

Brightray是Electron的2个底层的正视性,超过二分一Electron的使用者并不用担心它。

 

技能选型

  • Electron:桌面端跨平台框架,为 Web
    提供了原生接口的权杖。打包后的次序兼容 Windows 柒 及以上、Mac、Linux
    的 32 / 6四 位系统。详情>>
  • 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作为二个包裹目的。

金沙国际 网址js7779 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

2个涵盖了Chromium内容模块和兼具重视(例如,Blink,V8等)的简短的共享库。

 

Electron

macOS / Linux

$ ./node_modules/.bin/electron .

main process

主进度,经常是3个称呼main.js的文书,是指向每二个Electron应用的输入。它决定着应用从打开到关门的生命周期。它也管理着原生控件,比如MenuMenu BarDockTray等。主进程在选用中负责着创设每叁个新的渲染进度的职分。全体的Node接口都在它里面。

每3个应用的主线程文件是在package.json文本中的main属性中被钦定的。那是electron .怎样明白运营时要实施哪个文件的原委。

参见:process,renderer
process


Electron 是什么?

Electron 是1个得以用 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
语言编写2回即可。

  • 原生(操作系统)语言:用于开发主流操作系统应用的原生语言的对应关系(超越1全地方下):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格外有希望应用安装在您电脑上的Node2进制文件中的分歧版本的V八,你在编写翻译native
modules的时候需求手动钦定Electron的头顶地方。

参考Using Native Node
Modules。

前者框架的昌盛及干练

它由哪些组成?

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

  • Chromium:谷歌 创立的3个开源库,并用于 Google 的浏览器
    Chrome。
  • Node.js(Node):二个在服务器运维 JavaScript
    的运作时(runtime),它富有访问文件系统和互联网权限(你的微处理器也能够是一台服务器!)。

金沙国际 网址js7779 2

Windows

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

NSIS

Nullsoft Scriptable Install System是1个Microsoft
Windows下的剧本驱动的设置制作工具。它揭发在免费软件许可证下,是三个看似于InstallShield的大面积的被用来代表商业专有产品的工具。electron-builder支持NSIS作为2个编译目的。

从百家争鸣到三足鼎峙

金沙国际 网址js7779 3

图 1 

 

那是从网上找到的前端的情景(图 1),每二个颜色均是某八个前端库的分类。前端的世界便是那般,供给在一堆的选项中采用多个,并且要跟任何的选项
PK 。

 

如图 一 所示,方框的部分写具体的政工代码,例如早期的 jQuery。Prototype
曾经成功了 3000 年内有复杂工作代码的前端,写了汪洋的页面,古板的后台
admin 等都是那样。再往上 Ember
相比符合业务稳定的类别应用,因为它一贯坚称着前进包容,它不像新的库,借使出了贰个新本子基本上供给推倒重写;而
Backbone 是写比较复杂页面包车型客车二个库, Angular 、React 等等。

 

在那样繁杂的前端中,单纯写前端业务有好多选取。曾看到二个讲评:“ 2016年,你做到二个巨简单的事情,就供给 TypeScript 写代码,用 Fetch
发起异步请求,全部的代码编写翻译程 ES六……”用了几13个库实现二个相当不难的题材。那么,在那样的前端生态下,它必然会是繁荣的,假诺不发达,不会有诸多个人在那边做业务。

 

发表评论

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

CopyRight © 2015-2020 金沙中心城 All Rights Reserved.
网站地图xml地图