首页vns威尼斯城官网登入 › 上述的几个前端框架都支持了后端渲染的功能vns威尼斯城官网登入:,这个页面定义了一些在Electron中经常使用的专有名词

上述的几个前端框架都支持了后端渲染的功能vns威尼斯城官网登入:,这个页面定义了一些在Electron中经常使用的专有名词

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)
的前端编制程序逻辑,大规模减弱了前边贰个业务支出的难度,越发是面向复杂前端接纳。而这几个优质开源框架的推广、多端业务合併、前后端分离的须求让越多的架构划虚拟计将许多事情逻辑写在了前面二个。

Vue.js、React.js 及 Angular.js 等等前端开采框架引进了 UI =
framework(State)
的前端编制程序逻辑,大面积减弱了前面一个业务支出的难度,特别是面向复杂前端采纳。而那一个优质开源框架的广泛、多端业务合併、前后端分离的急需让越来越多的架构划虚拟计将非常多事情逻辑写在了前者。

品类背景

顾客研讨的定量探讨和轻量级数据处理中,均需对数码举行保洁管理,以剔除万分数据,有限支撑数据结果的信度和效度。目前因调研数据和轻量级数据的多变性,对轻量级数据洗刷往往利用人工洗涤,缺乏统一、标准的清洗流程,但对于调研和轻量级的多寡往往是内需保险数据稳固性的,因而,在对数码进行清洗时最为有准则的清洗格局。

主进程

在 Electron 里,运行 package.jsonmain
脚本的长河被叫作主进程。在主进度运营的本子能够以制造 web
页面的款式显得 GUI。

以此页面定义了有个别在Electron中时常接纳的专出名词。

 

但是,纯前端产品也会有所它的难点。上述的多少个前端框架都帮助了后端渲染的效应,进而融入了内外端的难题。怎么着有效地结合现成前端逻辑实现后端渲染、怎么样优化后端渲染性能、怎么着贯彻服务器流式吐内容越来越快地渲染页面包车型客车经验,会形成新一代
Web 开采的取向,升高前端业务花费的频率。在由七牛云主办的 ECUG
十周年盛会上,阴明为大家带来了她的举行分享。

性子一览

  • 根据 Electron 研发并封装成为原生应用,客商体验优异;
  • 可视化操作 Excel 数据,帮忙文件的导入导出;
  • 怀有单列运算逻辑、多列运算逻辑和双列范围逻辑两种筛选方式,并且可经过“且”、“或”和“编组”的办法自由组合。

渲染进度

是因为 Electron 使用 Chromium 来显示页面,所以 Chromium
的多进度组织也被丰硕利用。各样 Electron
的页面都在运作着自身的长河,那样的长河大家称为渲染进度

在相似浏览器中,网页日常会在沙盒遇到下运维,并且不容许访谈原生产资料源。但是,Electron
客商全体在网页中调用 Node.js 的 APIs
的手艺,能够与底层操作系统直接互动。

ASAR

ASAR是Atom Shell Archive
Format的简称。一个asar文书档案是一个把文件都投身一个单身的公文中的轻松的tar-like类型文件。Electron能够从当中读取全体的文件而不用解压整个文件。

创办ASA冠道类型首假设为着在Windows下压实质量... TODO

不过,纯前端产品也富有它的难题。上述的几个前端框架都扶助了后端渲染的职能,进而融合了内外端的难点。怎么着有效地构成现成前端逻辑实现后端渲染、怎样优化后端渲染质量、如何促成服务器流式吐内容越来越快地渲染页面包车型地铁经验,会变成新一代
Web 开垦的主旋律,升高前端业务开支的成效。在由七牛云主办的 ECUG
十周年盛会上,阴明为大家带来了他的推行分享。

vns威尼斯城官网登入 1

思路与落到实处

凭借用研组的须求,利用 Electron 和 Vue 的表征对该工具实行开采。

主进度与渲染进度的差别

主进度使用 BrowserWindow 实例成立页面。种种 BrowserWindow
实例都在和睦的渲染进程里运行页面。当贰个 BrowserWindow
实例被死灭后,相应的渲染进度也会被终止。

主进度管理全体页面和与之对应的渲染进程。每一个渲染进程都是互为独立的,而且只关怀他们和谐的页面。

鉴于在页面里管理原生 GUI
财富是十一分危险而且轻巧导致能源败露,所以在页面调用 GUI 相关的 APIs
是不被允许的。倘若你想在网页里采用 GUI
操作,其对应的渲染进度必需与主进程实行报导,乞请主进度张开相关的 GUI
操作。

在 Electron,大家提供两种艺术用于主进度和渲染进度之间的报道。像
ipcRenderer
ipcMain
模块用于发送音信, remote
模块用于 RPC 格局通信。这么些剧情都足以在三个 FAQ 中查看 how to share
data between web
pages。

Brightray

Brightray是三个使libchromiumcontent更易于选择使用的静态库。它是特意为了Electron而创建的,然则也能够允许尚未基于Electron的原生应用使用Chromium的渲染引擎。

Brightray是Electron的叁个底层的依赖,大大多Electron的使用者并不用忧虑它。

 

阴明(丹佛掘金队(Denver Nuggets)联合开创者、总老董)

手艺选型

  • 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作为两个打包目的。

vns威尼斯城官网登入 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音信。

阴明(掘金队(Denver Nuggets)联合开创者、CEO)

前端框架的蓬勃及干练

相关本领

如若对某项技能相比较纯熟,则可略读/跳过。

electron-prebuilt

electron
是一个 npm 模块,包罗所运用的 Electron 预编译版本。
若果您早已用 npm 全局安装了它,你只供给依据如下格局一贯运行你的选用:

electron .

倘诺您是一对安装,这运转:

libchromiumcontent

三个包蕴了Chromium内容模块和装有信赖(举个例子,Blink,V8等)的归纳的共享库。

 

从百鸟争鸣到三足鼎峙

vns威尼斯城官网登入 3

图 1

那是从网络找到的前端的处境(图 1
),每贰个颜料均是某一个前端库的归类。前端的社会风气正是那般,需求在一批的选项中精选三个,而且要跟其他的选项
PK 。

如图 1 所示,方框的有些写实际的事体代码,比如开始时期的 jQuery。Prototype
曾经成功了 贰仟 年内有千丝万缕工作代码的前端,写了汪洋的页面,古板的后台
admin 等都以那样。再往上 Ember
相比较相符业务牢固的连串应用,因为它直接百折不挠着前进包容,它不像新的库,借使出了二个新本子基本上需求推倒重写;而
Backbone 是写相比复杂页面包车型客车多个库, Angular 、React 等等。

在这样繁杂的前端中,单纯写前端业务有无数选取。曾看见叁个讲评:“ 二零一四年,你做到三个巨轻易的业务,就须求 TypeScript 写代码,用 Fetch
发起异步恳求,全部的代码编写翻译程 ES6
……”用了几10个库实现三个极度轻易的主题材料。那么,在那样的前端生态下,它必将会是人山人海的,固然不发达,不会有不菲人在此间做事情。

Electron

macOS / Linux

$ ./node_modules/.bin/electron .

main process

主进程,平常是叁个叫作main.js的文件,是指向每二个Electron应用的进口。它调整着应用从打开到关门的生命周期。它也管理着原生控件,比方MenuMenu BarDockTray等。主进度在行使中担当着创制每个新的渲染进度的任务。全体的Node接口都在它里面。

每三个施用的主线程文件是在package.json文本中的main品质中被指定的。那是electron .如何知道运营时要施行哪个文件的来头。

参见:process,renderer
process


Web 手艺和 JavaScript 达到种种领域

  • 后端:Node.js 在作业支出中早就比较宽泛利用,並且 v8 属性较好。

  • 移动:最常用的 Hybrid ,React Native ,NativeScript ,Weex 。

  • 桌面:Electron,nw.js 来完结 Web 端的接纳,其实都是网页。

  • VR:WebVR ,A-Frame ,WebGL

  • 硬件:Cylon.js ,Tessel ,Johnny-Five

  • 数码可视化:d3.js ,vis.js ,HighCharts ,Charts

因为 JavaScript
本身的代码,学习陡峭程度异常的低,入门门槛低,并且网页端须求大,因此JavaScript 分外繁荣。稳步地,JavaScript
的特性更是好,有更几个人利用,从而写 JavaScript 的人想用 JavaScript
写更加的多的事物,一步步迈到了逐一技巧生态。

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。

 

三足鼎立:Vue.js 、Angular.js 、React.js

2016 年,从繁杂的生态、无尽的口舌和抉择中间, Web 开垦中的 Vue.js
、Angular.js 、React.js
那多个框架初露端倪,各私吞一片江山。所说的三足鼎峙有一个前提,并非它们在社区里有多么火或然大家都爱用,而是这个库是还是不是被随即最新的施用直接用在融洽的专门的学业代码个中。

Angular.js 在 Google 已经被推了不菲年,匡助了 Google本身及广大供销合作社的巨型业务代码。React.js 是 推文(Tweet)别支部持的连串,它已经被用在广大线上的事情代码中,何况这一个事情代码每一天在继承着几亿的访谈量。Vue.js
自个儿最先叶是 Evan You 独立开垦者开源的类型,之后
Alibaba、饿了么等公司都起来放量利用,现在Ali的 Weex 也借鉴了 Vue
的架构逻辑。

转载本站文章请注明出处:vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=2868

上一篇:

下一篇:

相关文章