# DivinerMD

**Repository Path**: DivinerSun/DivinerMD

## Basic Information

- **Project Name**: DivinerMD
- **Description**: Electron项目
- **Primary Language**: NodeJS
- **License**: GPL-3.0
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-09
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Electron + React 开发一款属于自己的 Markdown 笔记管理应用

## 01、项目简单介绍

本项目根据视频教程的观看，自己动手实现了一遍；并且把学习过程进行的记录，从而有了此篇文章。
希望文章可以帮助其他想要学习的小伙伴！
小伙伴们可能需要有 HTML、CSS 和 JavaScript 基础知识
下面是整个项目的一个技术图谱
![项目整体技术栈](./images/00_project_info.png)

## 02、项目环境搭建

-   前置环境
    -   NodeJS(版本最好在 10 或以上)
    -   `npm` 或者 `yarn`
-   创建项目

    ```bash
    # 克隆示例项目的仓库
    git clone https://github.com/electron/electron-quick-start

    # 进入这个仓库
    cd electron-quick-start

    # 安装依赖并运行
    npm install && npm start
    # 或者使用 yarn
    yarn  && yarn start
    ```

    运行项目，如下图所示；则表示基础项目搭建完成
    ![基层项目效果](./images/01_project_base.png)

## 03、前置知识点

### 进程和线程

-   进程

    > 进程是一个在内存中运行的应用程序。每个进程都有自己独立的一块内存空间，一个进程可以包含多个线程
    >
    > 进程有自己的独立地址空间, 每启动一个进程, 系统就会为它分配地址空间, 建立数据表来维护代码段、堆栈段和数据段，这种操作非常昂贵。

-   线程

    > 线程是进程的一个执行单元, 是进程内调度的实体、是 CPU 调度和分派的基本单位, 是比进程更小的独立运行的基本单位。线程也被称为轻量级进程, 线程是程序执行的最小单位。
    >
    > 线程是共享进程中的数据的, 使用相同的地址空间, 因此 CPU 切换一个线程的花费远比进程要小很多, 同时创建一个线程的开销啊也比进程要小很多。
    >
    > 线程之间的通信更方便, 同一进程下的线程共享全局变量、静态变量等数据, 而进程之间的通信需要以通信的方式进行

-   进程和线程的区别

    线程具有许多传统进程所具有的特征，故又称为轻型进程(Light—Weight Process)或进程元；而把传统的进程称为重型进程(Heavy—Weight Process)，它相当于只有一个线程的任务。在引入了线程的操作系统中，通常一个进程都有若干个线程，至少包含一个线程

    > **根本区别**：进程是操作系统资源分配的基本单位，而线程是处理器任务调度和执行的基本单位
    >
    > **资源开销**：每个进程都有独立的代码和数据空间（程序上下文），程序之间的切换会有较大的开销；线程可以看做轻量级的进程，同一类线程共享代码和数据空间，每个线程都有自己独立的运行栈和程序计数器（PC），线程之间切换的开销小。
    >
    > **包含关系**：如果一个进程内有多个线程，则执行过程不是一条线的，而是多条线（线程）共同完成的；线程是进程的一部分，所以线程也被称为轻权进程或者轻量级进程。
    >
    > **内存分配**：同一进程的线程共享本进程的地址空间和资源，而进程之间的地址空间和资源是相互独立的
    >
    > **影响关系**：一个进程崩溃后，在保护模式下不会对其他进程产生影响，但是一个线程崩溃整个进程都死掉。所以多进程要比多线程健壮。
    >
    > **执行过程**：每个独立的进程有程序运行的入口、顺序执行序列和程序出口。但是线程不能独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制，两者均可并发执行

### Electron 主进程和渲染进程

-   主进程(Main Process)

    -   可以使用和系统对接的 Electron API；如创建菜单、文件上传等等
    -   创建渲染进程(Renderer Process)
    -   全面支持 NodeJS
    -   只有一个程序入口点作为整个应用的入口

-   渲染进程(Renderer Process)

    -   可以有多个，每一个对应一个窗口
    -   每一个都是一个单独的进程
    -   全面支持 NodeJS 和 DOM API
    -   可以使用一部分的 Electron API

-   Electron 进程关系图：
    ![进程关系图](images/02_Electron_APIS.jpg)

## 04、基础 API 介绍

### BrowserWindow

官方文档地址： https://www.electronjs.org/docs/api/browser-window

`BrowserWindow` 是主进程中的 API，其作用是**创建和控制浏览器窗口**
可以创建多个并通过 `parent` 属性，指定父子级关系

示例代码：

```js
const { app, BrowserWindow } = require("electron");

app.on("ready", () => {
    // 创建一个主窗口
    let mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
        },
    });

    mainWindow.loadFile("index.html");

    // 创建一个子窗口
    let childWindow = new BrowserWindow({
        width: 400,
        height: 300,
        frame: false,
        titleBarStyle: "hidden",
        transparent: true, // 设置窗口透明
        webPreferences: {
            nodeIntegration: true,
        },
        parent: mainWindow,
    });
    childWindow.loadFile("second.html");

    // 打开开发者工具
    mainWindow.webContents.openDevTools();
});
```

其他的配置属性，可以查看官网文档进行了解

## 05、Electron 进程间的通讯

### 使用 `devtron` 工具

-   安装

```bash
# 安装
yarn add devtron -D
```

-   使用

```js
const devtron = require("devtron");

// 初始化
devtron.install();
```

> **注意：Electron 9 可能会出现问题**