Fork me on GitHub

electron 拓展

Electron

2021-01-01 - 2022-04-27 下载量 34,441,621 GitHub star 101k

html+css+js一直是网页开发的三剑客，不过经过electron的整合，现在它们也能够开发桌面应用程序。它采用chromium引擎ui，可以非常方便地进行跨平台页面的开发。并且它可以访问诸如Developer Tools和Storage Access之类的工具，使得它开发桌面程序更加方便。

img

more >>

展开全文 >>

electron 基础知识

基础应用

此笔记参考 刘晓伦著作的 ELectron实战：入门、进阶与性能优化

1、安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- npm i electron -D

// 在安装步骤执行到 > node install.js 时，按ctrl+c中断过程
// 应为下载太慢了

- 手动下载 所需zip包

https://www.electronjs.org/fiddle

- 本地缓存目录为  ~/.electron/electron-v1.4.5-darwin-x64.zip

- 手动下载的zip包放到缓存目录所在位置。

- 重新执行 npm install -g electron 即可


上面的下载地址和缓存目录是通过阅读install.js脚本，尝试执行并打印部分变量得到的。
对于很多其它的使用npm安装的功能模块，都可以通过这个方法，解决下载问题。

安装成功后可以在项目 运行 ./node_modules/.bin/electron 测试
more >>

展开全文 >>

Rxjs

RxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable，附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等)，这些数组操作符可以把异步事件作为集合来处理。 通常集成在 Angular技术栈中

可以把 RxJS 当做是用来处理事件的 Lodash 。

ReactiveX 结合了 观察者模式、迭代器模式 和 使用集合的函数式编程，以满足以一种理想方式来管理事件序列所需要的一切。

在 RxJS 中用来解决异步事件管理的的基本概念是：

  • Observable (可观察对象): 表示一个概念，这个概念是一个可调用的未来值或事件的集合。
  • Observer (观察者): 一个回调函数的集合，它知道如何去监听由 Observable 提供的值。
  • Subscription (订阅): 表示 Observable 的执行，主要用于取消 Observable 的执行。
  • Operators (操作符): 采用函数式编程风格的纯函数 (pure function)，使用像 map、filter、concat、flatMap 等这样的操作符来处理集合。
  • Subject (主体): 相当于 EventEmitter，并且是将值或事件多路推送给多个 Observer 的唯一方式。
  • Schedulers (调度器): 用来控制并发并且是中央集权的调度员，允许我们在发生计算时进行协调，例如 setTimeout 或 requestAnimationFrame 或其他。

官网 https://rxjs.dev/

https://www.youtube.com/watch?v=BA1vSZwzkK8

官网：https://rxjs-dev.firebaseapp.com/

图解rxjs: https://reactive.how/

rxjs可视化工具： https://rxviz.com/

使用

more >>

展开全文 >>

SortableJS

功能强大的JavaScript 拖拽库

可以实现同组内上下拖动元素，也可以实现不同组内互相拖动元素。

兼容性好

支持触屏设备和大部分浏览器

简单

简单的API，方便使用

原生

基于原生HTML5中的拖放API

CSS框架兼容性

支持所有的css框架，像Bootstrap

零依赖

不依赖Jquery等其他框架

SPA支持良好

支持多种框架（angular、vue、react等）

more >>

展开全文 >>

gojs

仅仅是一个前端插件

官网:https://gojs.net/latest/index.html

下载之后并不是所有的js文件都用的到，我们需要了解到只有三个

1
2
3
4
5
6
"""
go.js				 正常必须要导入的文件
go-debug.js  会展示报错消息 类似于debug模式 线上肯定不会使用
Figures.js	 扩展图表(go.js自带的图表比较少，如果出现图标显示不出来的情况)
"""
# 总结:使用的时候导入go.js和Figures.js就不会有任何问题了

简单的使用

more >>

展开全文 >>

momentjs时间处理类库

1、安装

1
2
3
4
5
npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor

2、日期格式化

格式代码 说明 返回值例子
M 数字表示的月份，没有前导零 1到12
MM 数字表示的月份，有前导零 01到12
MMM 三个字母缩写表示的月份 Jan到Dec
MMMM 月份，完整的文本格式 January到December
Q 季度 1到4
D 月份中的第几天，没有前导零 1到31
DD 月份中的第几天，有前导零 01到31
d 星期中的第几天，数字表示 0到6，0表示周日，6表示周六
ddd 三个字母表示星期中的第几天 Sun到Sat
dddd 星期几，完整的星期文本 从Sunday到Saturday
w 年份中的第几周 如42：表示第42周
YYYY 四位数字完整表示的年份 如：2014 或 2000
YY 两位数字表示的年份 如：14 或 98
A 大写的AM PM AM PM
a 小写的am pm am pm
HH 小时，24小时制，有前导零 00到23
H 小时，24小时制，无前导零 0到23
hh 小时，12小时制，有前导零 00到12
h 小时，12小时制，无前导零 0到12
m 没有前导零的分钟数 0到59
mm 有前导零的分钟数 00到59
s 没有前导零的秒数 1到59
ss 有前导零的描述 01到59
X Unix时间戳 1411572969
more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。