• css的盒子模型

  盒子模型由margin、border、padding、content组成.

  W3C 标准盒模型:属性width,height只包含内容content，不包含border和padding。IE 盒模型：属性width,height包含border和padding，指的是content+padding+border。

  ie8+浏览器使用css属性box-sizing控制使用哪个盒模式，默认为content-box即标准模型。

  不声明DOCTYPE类型，IE浏览器会将盒子模型解释为IE盒子模型，FireFox等会将其解释为W3C盒子模型；若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。

• js闭包

  闭包是函数和声明该函数的词法环境的组合。这个环境包含了这个闭包创建时所能访问的所有局部变量。闭包就是能够读取其他函数内部变量的函数。可以把闭包简单理解成”定义在一个函数内部的函数”。闭包最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。函数运行完毕后继续访问这个函数作用域

在后续维护electron项目中想到：每次客户端有更新(即使改动不大),都要重新打包后把客户端发给供应商用户，虽随着用户越来越多，更新也越来越麻烦，花在沟通上的成本更大，所以考虑使用自动更新，减少沟通成本，让用户在没有察觉的情况下就能更新到最新版。

官方支持的方法是利用内置的Squirrel框架和Electron的autoUpdater模块。

但因为之前适用electron-builder工具打包，且，其自带有更新功能，所以还是使用electron-builder的自动更新。

1、引入自动更新插件，在主进程中使用

1
2
3

const { autoUpdater } = require('electron-updater')

autoUpdater.checkForUpdates()

这将使用electron-updater的默认配置，自动下载并弹出提醒，但提示语固定且为英语，所以在查看了AppUpdater.js后，修改了更新的回调。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

autoUpdater.checkForUpdates().then(it => {
    const downloadPromise = it.downloadPromise
    if (downloadPromise == null) {
      return
    }

    downloadPromise.then(() => {
      new Notification({
        title: '新版本提醒',
        body: `${autoUpdater.app.name} '新版本' ${
          it.updateInfo.version
        } '将会在系统关闭后自动更新'`,
      }).show()
    })
  })

checkForUpdates是electron-updater的内置方法，是一个promise，可以在成功回调里做特殊处理。参考checkForUpdatesAndNotify方法，在downloadPromise完成后弹窗提示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// AppUpdater.js
  checkForUpdatesAndNotify() {
    if (_electronIsDev().default) {
      return Promise.resolve(null);
    }

    const checkForUpdatesPromise = this.checkForUpdates();
    checkForUpdatesPromise.then(it => {
      const downloadPromise = it.downloadPromise;

      if (downloadPromise == null) {
        const debug = this._logger.debug;

        if (debug != null) {
          debug("checkForUpdatesAndNotify called, downloadPromise is null");
        }

        return;
      }

      downloadPromise.then(() => {
        new (_electron().Notification)({
          title: "A new update is ready to install",
          body: `${this.app.getName()} version ${it.updateInfo.version} has been downloaded and will be automatically installed on exit`
        }).show();
      });
    });
    return checkForUpdatesPromise;
  }

如果需要更多定制，可以使用以下事件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

autoUpdater.on('error', (ev, err) => {
  // 更新出错，其中一步错误都会emit
})
autoUpdater.on('checking-for-update', () => {
  
})
autoUpdater.on('update-available', (ev, info) => {

})
autoUpdater.on('update-not-available', (ev, info) => {
  
})
autoUpdater.on('download-progress', (ev, progressObj) => {
  // sendStatusToWindow('Download progress...')
})
autoUpdater.on('update-downlo aded', (ev, info) => {
  // sendStatusToWindow('Update downloaded; will install in 5 seconds')
})

2、发布方式：

The publish key contains a set of options instructing electron-builder on how it should publish artifacts and build update info files for auto update.

String | Object | Array<Object | String> where Object it is BintrayOptions, GenericServerOptions, GitHub, S3Options or SpacesOptions. Order is important — first item will be used as a default auto-update server. Can be specified in the top-level configuration or any platform- (mac, linux, win) or target- (e.g. nsis) specific configuration.

If GH_TOKEN is defined — defaults to [{provider: "github"}].

If BT_TOKEN is defined and GH_TOKEN is not — defaults to [{provider: "bintray"}]

我们使用的是

1
2
3
4
5
6

"publish": [
      {
        "provider": "generic",
        "url": "http://localhost:8080/installer"
      }
    ]

此时，重新打包会生成latest.yml:

1
2
3
4
5
6
7
8

version: 1.0.2
files:
  - url: erp Setup 1.0.2.exe
    sha512: b5ck9cBaZKgKAQhJ4hfh6xOtMzqZoWvxbudlK3dBKYh7qImOcgPg19zfwnAoZ1/+3zKFHktDCzBY4pSbptc1Hw==
    size: 75291392
path: erp Setup 1.0.2.exe
sha512: b5ck9cBaZKgKAQhJ4hfh6xOtMzqZoWvxbudlK3dBKYh7qImOcgPg19zfwnAoZ1/+3zKFHktDCzBY4pSbptc1Hw==
releaseDate: '2019-02-25T10:26:05.909Z'

这是程序判断有无更新的依据，url(http://localhost:8080/installer，假设起在本地，也可以换成线上的地址)上存放安装包和latest.yml文件，运行客户端时会访问url的latest.yml查询是否有版本更新。

遇到的坑：

• electron provider url 测试为本地时，漏了个/,导致ERR_INVALID_URL

• electron provider url 测试为线上时，当时线上安装包地址使用软连接，不是带版本号的文件名，而是直接erp.exe，但在测试自动更新时发现，无论如何更新安装包和latest.yml文件，都没有改变sha512，即使检测到了新版本，可是安装包的地址指向不对，一直是第一次上传的版本，因为这个url使用了cdn缓存，导致软连接一直指向了最开始上传的版本，即使刷新了cdn地址和预加载大文件都不可以，所以最后没有使用软连接，而是直接带上了版本号，这样就能正常更新。

  

• 在这次更新electron时，需要做到打开多个客户端，在修改代码后测试发现，第一个客户端中能正常获取localStorage，但之后的客户端都无法获取，查看issue后发现，这是因为两个浏览器进程使用的是相同路径的数据，一旦文件被一个进程读取(localStorage是以本地文件存储的方式)，即被锁住，其他进程无法读取，除非把这些数据拷贝到另一个路径下。所以electron推荐使用单实例窗口，否则可能会出现无法获取到部分数据。

  Running multiple instances of Electron is generally a bad idea and not really supported with the default configuration. Some renderer features don’t work in this scenario (localStorage, IndexedDb, persisted sessions?)

  打开一个窗口会创建3个进程，这是由于Chromium的特征导致的：

  Yes. When you run Electron it will run 3 processes. That’s because of Chromium’s multi-process architecture

公司项目使用electron开发，

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用。

使用electron将公司网站打包成应用，伪装成专业的bs客户端。

安装和入门在GitHub上都有

1
2
3
4

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

clone之后修修改改就形成了现在的项目。

使用electron-builder打包成应用程序exe/dmg

下载yarn

1

yarn add electron-builder --dev

修改package.json，设置appId，使windows

1
2
3
4
5
6
7
8
9
10

"build": {
  "appId": "your.id",
  "mac": {
    "category": "your.app.category.type"
  }
}
"scripts": {
  "pack": "electron-builder --dir",
  "dist": "electron-builder"
}

然后打包就会在dist目录生成.exe(在windows打包)

1

yarn dist

具体的dist 参数可以参考 https://www.electron.build/cli

1
2

electron-builder // 不指定平台和位数，默认会打当前打包程序所在平台的相应位数版本
electron-builder --win --ia32 --x64 // 指定平台和位数，将32位和64位打成同一个安装包

若要分开打成两个包，需分别执行–ia和x64两次得到2个包:Issue，但因为两个安装包生成同一名字的latest.yml，会被覆盖，自动更新会替换后生成的安装包，不然就要将两个安装包和latest.yml放在不同文件夹下，保证自动更新正常。

注!!!

不要指望一个平台能打包全平台的安装包。

Don’t expect that you can build app for all platforms on one platform.

• If your app has native dependency, it can be compiled only on the target platform unless prebuild is not used.

  prebuild is a solution, but most node modules don’t provide prebuilt binaries.

• macOS Code Signing works only on macOS. Cannot be fixed.

注：

• Win 10 notification bug：这个项目一开始并不是打包成安装包后安装成桌面应用，而是打包成asar归档规格式，但因为后来网页需要使用通知notification，发现在win10的某一个版本16299.19里无法显示通知，但是有通知的声音播放，查阅相关文档后发现，这是win10的feature，必须使用有appId的安装包安装后才能显示通知(相关issue)。所以使用electron-builder打包成安装包.
• win 7 notification bug：在win7电脑上使用通知，若通知tag相同，则只会弹第一次，即使刷新了页面，也不好弹第二次，只有关闭应用程序后重开才会再次弹窗。issue。所有要将tag加个random，避免相同。

入坑 hexo 写 blog

很久很久之前，有玩过 github page，那时用的是 jekyll，折腾了下，苦于样式并且懒，就放弃了。emmmm，现在又想玩起来了，就直接试下 hexo 咯。

hexo 有中文文档地址，还是很方便的。

第一步 当然是安装啦

先是全局安装 hexo

1

sudo npm install -g hexo-cli

然后就是初始化

1
2
3

hexo init blog // blog就是文件夹名字，可随意，与github page 项目无关
cd blog
npm install

此时，blog 的初始主题已经安装好了，运行

1

hexo s

本地服务就启动了

1

Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

打开网址可以看到 blog 已经建好了，然后就可以开始改主题啦，知乎的一个回答里已经列了多 star 的主题，我选择的是next。在 blog 目录下：

1

git clone https://github.com/iissnan/hexo-theme-next themes/next

然后在_config.yml 文件里找到主题字段，改为

1

theme: next

2、同步当前博客到 github pages

安装同步必要的插件

1

npm install hexo-deployer-git

在_config.yml 文件里找到 deploy 字段，添加下列字段(注意：’:’后面要带个空格，没有空格则 deploy 不了)

1
2
3
4

deploy:
  type: git
  repo: https://github.com/ihgSherryLee/ihgSherryLee.github.io.git // 我的github pages 的仓库地址
  branch: master

然后分步执行，即可在你的 github pages 看到了。

1
2
3

hexo clean // 清除缓存
hexo g     // 生成文件夹
hexo d     // 发布

3、为你的blog添加分类和标签

1

hexo new page tags

这会在source文件夹内生成一个tags文件夹，里面有index.md

1
2
3
4
5

---
title: tags
date: 2019-07-12 00:10:57
type: "tags"
---

然后在blog的头部，加入tags

1
2
3
4

tags:
- electron // some tags
- preload
---

这样，文章就有了标签，然后，就在对应themes里修改_config.yml，找到menu

1
2
3
4
5
6
7
8
9

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

把tags的目录加上，这样首页的菜单下就会出现标签的分类链接。

3、当blog中要显示图片时

1️⃣可以在source文件夹中新建一个images目录，这样，在首页和文章页都能访问到

在mardown里用绝对路径访问到

2️⃣相对路径的做法：在_config.yml中设置

1

post_asset_folder: true

这样hexo new sth 时，会生成一个相同名字的文件夹，可以存放图片，使用相对路径引入图片，这样只能在文章中访问到，首页无法访问，如果要首页也能访问，可以使用标签插件语法

1

{% asset_img image.jpg This is an image %}

但这种做法，会使每个文章都生成一个文件夹，即使只是要存放图片的地方需要，但感觉还是会影响项目文件结构，见仁见智吧，我还是选择第1️⃣种做法

3️⃣还可以使用cdn引用图片

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment