Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用

1、Electron定义快捷键

1、先看下electron默认菜单项
github地址
注:darwin 是指MacOS平台

2、shell模块

shell 模块提供与桌面集成相关的功能。// main和renderer均可以使用
比如引入链接并打开浏览器 // 以下是MenuItem某菜单项

Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用_第1张图片

3、优雅显示窗口

electron优雅显示窗口

4、使用类封装重复操作

需求背景:应用可能包含多个渲染进程,每个渲染进程均书写重复逻辑。故抽离成类进行实例。
封装操作: 使用es6 class语法糖抽象AppWindow类extends继承BrowserWindow。

const { BrowserWindow } = require('electron');

class AppWindow extends BrowserWindow {
  constructor(config, urlLocation) {
    const basicConfig = {
      width: 800,
      height: 600,
      webPreferences: {
        nodeIntegration: true
      },
      show: false,
      backgroundColor: '#efefef'
    };
    const finalConfig = { ...basicConfig, ...config };
    super(finalConfig);
    this.loadURL(urlLocation);
    this.once('ready-to-show', () => {
      this.show();
    });
  }
};

export default AppWindow;

Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用_第2张图片

5、设置模块开发

1、设置模块采用另起BrowserWindow的方式
2、这个BrowserWindow的loadURL采用file://
在这里插入图片描述
3、主进程快捷键呼出第二个渲染进程 // 过程省略
4、第二个进程采取原生js操作 // setting.js

“选择新的位置” -> 使用remote呼出dialog模块 -> 选择文件夹后回调出path -> path赋值input标签 -> “保存” -> 持久化 electron-store

Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用_第3张图片

6、七牛云对象存储

三大类: 块储存(硬盘挂载在主机上)、文件储存、对象储存

一、码农式使用:
Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用_第4张图片

二、SDK使用
npm install qiniu --save
七牛云SDK文档
1、sdk上传文件
Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用_第5张图片
运行结果
在这里插入图片描述
2、sdk下载文件
下载文件sdk文档
Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用_第6张图片
三、进行面向对象创建类的方式,二次封装sdk。

// 期间有很多思考的过程。提取constructor公共属性,设计api,增加异步Promise,精简代码,消除冗余,

再消除Promise异步每次if else判断冗余时,发现回调参数无法被修改,故需要一个高阶函数,链式调用。

问题重现:// 回调参数会七牛云固定格式,无法扩充resolve,reject
Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用_第7张图片
高阶函数设计:

Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用_第8张图片
最终呈现:
在这里插入图片描述

四、下载文件
1、张轩大大摸爬滚打抽离出的 主域名获取方法(官方未明确提供)
Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用_第9张图片

7、流

一、流介绍

node中流场景:readable | writable
Readable Streams、HTTP responses、HTTP requests、fs read streams 、zlib streams、 crypto streams、 tcp sockets、 child process stdout and stderr 、 process.stdin

1、不使用流带来的主要问题:
读取大文件内存占用过高
在这里插入图片描述
Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用_第10张图片
当node创建一个createServer且监听到用户的request请求,传递一个big.rar给用户时。
在这里插入图片描述
可见node.js内存占用率近35%有850mb,非常可怕。若数百个用户同时请求一个大文件,那么内存将会溢出。

2、使用流优化之后
Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用_第11张图片
在这里插入图片描述
内存上限不过50mb,提速效果显著。

二、流的类型

Readable (可读流)
Writeable (可写流)
Duplex (双向流)
Transform (转换流)

三、简单流创建

1、创建 可读可写流,以及流入。
Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用_第12张图片
2、转换流(使文件被Gzip压缩,再流入目的地)
Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用_第13张图片

四、正式请求七牛云端数据并下载

时间戳作用
大多用于更新文件|数据时,使浏览器不使用缓存,重新发送请求,去拿到最新的内容。
Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用_第14张图片
红线还代表Promise异步返回的,链式调用

你可能感兴趣的:(Electron学习之旅6,快捷键,shell模块,优雅显示窗口 -> 类封装,设置模块开发,七牛云对象存储 -> (上传下载)类封装+高阶函数,流(介绍概念使用),时间戳作用)