weixin_33897722
weixin_33897722

Electron深入填坑之路

思维导图

前言:

Electron 从最初发布到现在已经维护很长一段时间了，但是去年才开始慢慢升温。笔者个人恰好也有一些 Electron 的实践经验，原本这篇总结是大约半年前开始起草的，但是由于一些个人原因拖到现在才算是正式完稿，现在发出来供有意实践 Electron 的开发者借鉴，避免一些本人在实践中踩过的坑。此外，笔者的水平有限，难免出现错误，如果读者在阅读本文过程中发现原则性的错误，请务必指出，以免相关内容祸害他人。

本文的实践基于 Electron 1.x 。

创建基本应用

问题: renderer 端无 jQuery

根据官方的新手教程，我们很容易创建一个基本的 Electron 应用，我们不再累赘叙述，如果你只需要加载一个网页，那么只需要下面几行简单的代码：

12345678910复制代码
 
const { BrowserWindow } = require('electron')let windowfunction createWindow() {	window = BrowserWindow({		width: 1024,		height 720	})	window.loadURL('https://changkun.us')}app.on('ready', createWindow)复制代码

如果你真的尝试加载笔者的博客页面，会发现笔者博客的文字内容无法加载，这是由于 jQuery 找不到而产生的问题，为此我们并没有必要调整 Web 端的内容，只需要简单在 Electron 的 Renderer 端引入 jQuery 即可。

解决方法就可以使用 BrowserWindow 的 preload 参数，然后使用 preload 脚本为 renderer 端引入 jQuery:

123456复制代码
 
// preload scriptdocument.addEventListener('DOMNodeInserted', (event) => {  if (!!window && !(window.$)) {    window.$ = window.jQuery = require('../utils/jquery.min')  }})复制代码

相关 issue: github.com/electron/el…

一些常见需求

在 Renderer 端创建菜单

在 Electron 中，无论是应用程序的主菜单(macOS 顶部的菜单)、窗口菜单(Windows/Linux)的窗口菜单、Tray 菜单、还是 Renderer 端的 Context 菜单等，凡是和菜单挂钩的功能都是通过 Menu.buildFromTemplate 进行创建的，他们只是被挂载到了不同的实体上，比如被挂载到了页面上的叫做 Context 菜单，被 setApplicationMenu 挂载的成为了主菜单。

Electron 的菜单其实限制也非常之大，其菜单在创建完成后便不能在运行时被直接修改，需要修改时，必须对整个菜单重新创建，从而达到动态菜单的目的。这也是非常不友好的。

另一方面，一个菜单项被点击后，只接受三个参数，也就是说 click 属性的回调只接收: menuItem(被点击的item)、focusedWindow(点击按钮时focus的窗口) 以及毫无用途的 event (提供键盘是否被按下的信息)，这也就造成的诸多的不便。

例如，当我们希望一个按钮被点击后，其他的菜单项的 enbalbed 属性设置为 false，将无从下手。

为了解决这一问题，这时候我们可以巧妙的使用 Electron 的 ipc 机制在 renderer 端创建应用菜单，在 renderer 端创建的菜单便可以在内部使用 ipcRenderer.send() 这个方法，让 ipcMain 来处理其他其他菜单项的操作。

不仅如此，甚至于可以让整个菜单的 click 逻辑都交付于 main 端进行管理，例如下面这样的 menu template：

1234567891011121314151617181920212223242526复制代码
 
{    type: 'separator',    visible: (()=>{        if (process.platfrom == 'darwin') return true;        else return false;    })()},{    label: `Current Version: ${app.getVersion()}`,    enabled: false},{    type: 'separator'},{    label: 'Logout',    click: () => { ipcRenderer.send('application', 'logout'); }},{    type: 'separator'},{    label: 'Exit ${app.getAppName()}',    accelerator: 'CmdOrCtrl+Q',    click: () => { ipcRenderer.send('application', 'quit'); }}复制代码

而在 main 端则可以：

123456789复制代码
 
ipcMain.on('application', (event, args) => {	switch(args){	case: 'logout':		....; break	case: 'quit':		...; break	default: ...	}})复制代码

相关 issue: github.com/electron/el…

后台网络状态监测

问题: Electron 的官方文档其实就提供了网络检测的方法，思路是通过一个隐藏的后台窗口，检测网络网络状态，通过网络状态产生变化后，通过 ipcRenderer 发送消息给 ipcMain，然后响应所需的操作，见这里。

但事实上这个方法是基于 online 和 offline 事件的，换句话说这个方法只能检测到当系统网络连接被切断物理连接后的状态变化，无法检测网络本身。

这个问题可以参考下面的 issue，但其实现思路就是向苹果的 hotspot detect 页面发起请求，当未超时状态下有 Success 返回时，便说明网络状态正常。在实际应用编写过程中，我们也并不需要为了这样一个简单的功能而引入框架，只需定时向服务器发起任意一个能够判断网络状态的请求即可，与心跳连接殊途同归。

相关 issue: github.com/electron/el…

preload 脚本的执行阶段

在前面创建基本应用中我们已经谈到了关于 preload 脚本用来引入 jQeury 的使用，事实上我们可以用 preload 做更多的事情。preload 脚本会在整个页面开始加载之前被执行，所以如果我们直接执行一些当整个 DOM 加载完成才能被执行的操作，是必定会失效的，因此这样的两个事件是非常有用的：DOMNodeInserted、DOMContentLoaded。

为此，我们可以把 preload 脚本大致分为三块区域：

12345678910111213141516171819202122复制代码
 
// ---------------------------------------------------// 在页面加载之前需要执行的相关代码// ...// ---------------------------------------------------// -------------------------------------------------------document.addEventListener('DOMNodeInserted', (event) => {	// 页面内容加载之前需要引入的一些代码  	// ...})// -------------------------------------------------------// -------------------------------------------------------document.addEventListener('DOMContentLoaded', (event) => {	// 页面内容加载之后需要引入的一些操作	// ...})// -------------------------------------------------------复制代码

preload 脚本的作用非常大，有时候会有这样的需求：当我们加载一个网络上的页面时，我们不能控制从网络中读取到的页面内容，但 preload 提供了这样的可能性，使得我们能够向页面 注入 一些代码，满足一些神奇的需求，比如对网络加载页面增加 Context Menu。但也有使用时值得注意的地方：

Electron 的 main 进程、preload 脚本、renderer 进程、以及 document 对象分别有彼此的创建和执行顺序。首先 main 进程会优先被创建毫无疑问，preload 会在 document 对象被创建之前优先加载（但能够使用 document），而 renderer 进程会在 document 创建之后被创建，而他们三者又是并发创建的，如下图所示。

那么，如果我们不小心在 preload 脚本中直接引入 ipcRenderer 发送一条消息给 ipcMain，那么 ipcMain 可能不能收到这条早期消息。为了保证我们能够收到这条消息，最好的方式就是:

12345678910复制代码
 
// preload.js// 不要再外面这么干// ipcRenderer.send(...)document.addEventListener('DOMContentLoaded', (event) => {	// 页面内容加载之后需要引入的一些操作	// ...	// 正确的做法	ipcRenderer.send(...)})复制代码

相关 issue: github.com/electron/el…

第三方URL检查问题

所谓的第三方 URL 检查问题，是应用指针对提供第三方登录接口时，页面需要临时性的跳转到其他第三方域名下进行后，会导致 Electron 窗口出现各种不可预计的后果的这个问题。当一个 Electron 窗口跳转到第三方页面后，由于 Electron 本质上是一个浏览器，而第三方页面通常包含各种其他的指向性链接，例如一个 QQ 的第三方登录页面，点击 QQ 的 Logo 会跳转到 QQ 的主页，这就导致了『穿帮』，让用户察觉这个应用是指一个简单的浏览器，造成不够优秀的用户体验。

这时，为了解决这个问题，笔者实践的一个解决做法是对每次要跳转的 URL 和打开的窗口做 URL 检查，主要依赖下面两行代码：

12复制代码
 
win.webContents.on(‘will-navigate’, checker)win.webContents.on(‘new-window’, checker)复制代码

在这两行代码中，无论是页面即将跳转，还是打开一个新窗口， checker 都会对 URL 进行检查，只有符合要求的URL才会在窗口内被加载，否则将通过 shell.openExternal()来调用。

读者看到这里可能会对 URL 检查本身产生质疑，因为一个严格的 URL 检查事实上是难以实现的。不过下面的例子应该能够给与读者相关启发，例如：

笔者在实现个人博客的客户端时，需要考虑每篇博文下方的评论区登录问题，如图：

当用户点击登录后，客户端会跳转到第三方登录页，下图中的微博 logo、注册、多说评论框都是可能导致用户进行进一步跳转的隐患：

对此，有这样一个取巧的办法避免这些有隐患的跳转：

1234567891011121314复制代码
 
function urlChecker(event, url) {  event.preventDefault()  // 第三方登录在登录回博客页面时，通常会带有 login-calback 的请求参数  if (url.match('login-callback'))  	// 但是在完成登录后，会返回多说自己的主页，而不是博客页面本身，  	// 这是不能忍的，因此这里要求 mainWindow 跳转到 home 页    mainWindow.loadURL(common.url.home)  // 当匹配到要打开的 url 不属于 changkun.us 域名下时，直接在外部打开  else if (url.match('changkun.us') == null) shell.openExternal(url)  // 否则，加载此URL  else mainWindow.loadURL(url)}mainWindow.webContents.on('will-navigate', urlChecker)mainWindow.webContents.on('new-window', urlChecker)复制代码

下载

下载也是一个常见的需求，比如，你正在基于 Electron 实现一个 Web 文本应用，用户可能需要下载保存在服务器上的一个编辑好的文件，这时候当点击 Web 界面中的下载时，Electron 并不需要专门针对这个下载行为进行单独的处理，Electron 会想浏览器那样直接跳出一个保存的文件选择器，让用户获得下一步的操作。当我们真正需要处理一些特殊的下载操作时，同样可以用 electron 的 DownloadItem 来实现，但其接口设计着实有点让笔者难以接受，这里推荐可以尝试 electron-userland/electron-download 这个库，虽然其本质也是 DownloadItem，但其接口相比之下友善许多，因为库本身也并不复杂，也可以在项目中自行实现这部分逻辑。

从URL启动

从 URL 启动其实是一个比较 tricky 的功能，这个功能在大约半年多以前的 Electron 1.4.x 再往前其实是一个体验相当差的功能，在那个时候 从 URL 启动还只能在 macOS 上实现，还需要为应用配置额外的 plist 文件 (使用 electron-builder 打包时，后面会具体讨论这个工具和其他工具)，且 windows 和 linux 并不支持。后来 Windows 提供了支持，但 Linux 由于需要 root 权限的问题，并不能很好的支持。

而现在实现这个功能在现在已经变得非常的容易了，只需要在 package.json 中配置 build.protocols 字段：

12345678910复制代码
 
"build": {	...,    "protocols": [      {        "name": "changkun://",        "schemes": [ "irc", "ircs" ]      }    ],    ...}复制代码

并在应用中添加一行代码：

1复制代码
 
app.setAsDefaultProtocolClient('changkun')复制代码

便可以通过 changkun://anything 来启动应用了，如果你还要让应用来针对不同的 URL 处理不同的事件，同样也是能做进一步定制的。

多窗口应用: 窗口数大于三无法退出

这个需求是笔者在下意识的创建多窗口应用时候发现的，虽然 Web 应用已经出现了 SPA 的发展趋势。但是有时候多窗口还是会有一些用处，例如一个用户产生应用的主窗口，一个后台隐藏的网络监测窗口，以及一个负责打开其他新页面的窗口。笔者约半年多之前发现这个问题，至今由于忙于他事也未认真寻找问题产生的根源，至今发现这个问题仍然违背解决，于是开出了 issue，有兴趣的读者可以跟踪研究一番。

注意: 此 bug 已被修复，请查看下面的 issue 获得更多细节。

相关 issue: github.com/electron/el…

UX

交互的反馈

在 UX 上其实大部分第三方框架已经做得足够优秀，Electron反倒是个例外。拿加载网页内容来说，当用户点击了某个选项之后，没有反馈的交互会让用户没有成功的执行刚才的点击操作，这时候页面上的 loading 进度条是非常有必要的。由于大部分的框架如 React, Polymer都具备这个组件，由于其内容已经脱离 Electron 本身，限于篇幅这里就只做简单提及不再做深入讨论。

类原生处理

Web 应用通常很难直接给用户带来像原生应用那样的体验的一个主要原因就是，文本是可选可拖拽的。为了维护上的可用性，如果一个 Web 应用会在浏览器端和 Electron 端同时分发，那么可以将这类体验的 CSS 通过 preload 的方式注入到 Web 页面，而不是直接在 Web 页面进行实现，从而实现很好的逻辑分离。

软件更新

软件的日后更新一直都是产品日后迭代的杀手，一个需要被分发的桌面应用，在没有确定的更新机制之前，切忌发布。

Electron 虽然本身自带 audoUpdater 模块，但作为框架的使用者来说，笔者很难说它做得优秀，因为需要配置的内容相较于其他功能来说略加繁琐。因此这里推荐使用 electron-updater。下面的代码相当于一个纯粹的更新功能的封装，使用成本非常简单，只需根据 electron-builder wiki 的说明配置好 publisher 即可实现更新功能：

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253复制代码
 
// updater.jsconst { dialog } = require('electron')const { autoUpdater } = require('electron-updater')let updater// 禁用自动下载，给用户选择余地autoUpdater.autoDownload = falseautoUpdater.on('error', (event, error) => {  dialog.showErrorBox('Error: ', error)})autoUpdater.on('update-available', () => {  dialog.showMessageBox({    type: 'info',    title: 'Found Updates',    message: 'Found updates, do you want update now?',    buttons: ['Sure', 'No']  }, (buttonIndex) => {    if (buttonIndex === 0) {      autoUpdater.downloadUpdate()    } else {      updater.enabled = true      updater = null    }  })})autoUpdater.on('update-not-available', () => {  dialog.showMessageBox({    title: 'No Updates',     message: 'Current version is up-to-date.'  })  updater.enabled = true  updater = null})// 下载完成时，提醒用户autoUpdater.on('update-downloaded', () => {  dialog.showMessageBox({    title: 'Install Updates',    message: 'Updates downloaded, application will be quit for update...'  }, () => {    autoUpdater.quitAndInstall()  })})// 将这个回调输出给更新功能所在的菜单项的 click 回调function checkForUpdates (menuItem, focusedWindow, event) {  updater = menuItem  updater.enabled = false  autoUpdater.checkForUpdates()}module.exports.checkForUpdates = checkForUpdates复制代码

发布

打包工具

期初的 Electron 打包是一个比较恼人的问题，因为可用的工具其实不多，electron-packager 是一个很原始的打包工具，虽然具备打包的功能，但是其提供以开发 API 为蓝本的入口使得构建还需要额外编写脚本进行，而它其实只具备将应用进行打包编译的功能，这与最终发布的 Installer 还有一步之遥，所以使用 electron-packager 是非常消耗开发成本的一件事情。好在有一个取而代之的工具 electron-builder。它的好处在本文前面的部分也已经多次提及，它不仅拥有方便的配置 protocol 的功能、内置的 Auto Update、简单的配置 package.json 便能完成整个打包工作，用户体验是相当优秀的。

代码签名

代码签名对于发布作为正式商业产品应用来说是非常重要的。如今的 electron-builder 对于代码签名已经做得相当友好，对于 macOS 来说，它能够自动获取系统中 Keychain 中的开发者证书，自动对代码进行签名，而 Windows 也可以通过配置一个 .p12 证书来达到签名的目的。

因此，到目前为止，代码的签名成本已经非常低，只需购买好证书，基本上没有什么烦心的事情，唯一一个值得注意的事情是：如果要分发 macOS 上的应用，那么构建平台将只有 macOS 是被推荐的，因为它是唯一一个能够同时构建 macOS/Linux/Windows 三平台应用的平台。但是，如果使用 CSC_LINK 将会出现冲突，因为 CSC_LINK 已被用于 macOS 平台的签名，因此额外在 package.json 中配置 Windows 平台的证书。

由于证书最终不会被分发，可以在签名时使用一个移除密码的证书；亦或者对两个平台的证书使用相同的密码，方便最终的签名和打包。

开发工具

开发工具其实与 Electron 本身并不无关系，因为如果我们编写的应用是 SPA，那么 Electron 并不能左右我们的工具选择。但作为一篇完整的实践总结，这里简单提及一些开发工具以作为笔者的个人爱好进行推荐。

Dev

开发本身其实是一件苦力活，我们有时候确实是需要一个工具来帮助我们提升代码质量的，所以正如各位所熟悉的工具 ESLint，可能在任何时候都是必不可少的。而对于最终整个应用的构建过程，笔者则更倾向于 webpack，虽然 gulp 也是不差。

Test

像 Electron 这种涉及 UI 的应用，实施 UI Testing 其实是一件不太顺畅的事情。对于 main process 的核心逻辑相关的测试我们大可使用自己熟悉的测试框架编写，但是对于 Electron 窗口和窗口之间的管理逻辑，直接下手是不太好做。好在有一个库帮我们解决了 UI 测试的问题，那就是 Spectron，它可以与任何我们喜欢的测试框架相配合，例如 mocha。Spectron 同时也是官方推荐的测试库，起使用非常简单，具体内容可以参考下面的链接，这里不再赘述。

相关链接: electron.atom.io/spectron/

Debug

编辑器的选择虽然是萝卜白菜的问题，但是笔者选择的是 VSCode ，不得不说他从速度和功能上打败了 Atom，同时还有微软在背后撑腰，Electron 的官方文档也有一篇关于使用 VSCode 来分别配置调试 main process 和 renderer process 的过程，鉴于其内容比较简单，这里只提及此内容，读者可以进一步阅读官方文档，了解如何配置调试文件，这里便也不再赘述。

相关链接: electron.atom.io/docs/tutori…

架构设计

架构是进化而来的。在项目之初过度的设计架构其实是一件非常不合理的事情，笔者在实践 Electron 之初就将 Electron 与业务逻辑、Web 页面混合得稀烂，webContent.send() 和 ipcRenderer.send 翻来覆去的发，最终导致逻辑混成一团麻，难以维护。

Electron 的 IPC 机制是一把非常锋利的双刃剑，利用的当非常便于实现一些功能，也能维护得很好。前面的 renderer 端创建 Menu 就是一个典型的例子：在 Renderer端创建的 Menu，具备调用 ipcRenderer.send(message, args) 的能力，这样所有的 MenuItem 的 click 功能都能够交给 ipcMain.on(message, args) 来实现。

最终，笔者实践得出的一个便于维护的 Electron 应用架构应该如下图所示：

当然也可能进化为更好的架构, 如果你有更好的架构设计愿意分享, 欢迎在下方留言

1. Electron 与应用逻辑层分离

正如之前提到的，Electron 如果和业务逻辑与页面代码混成一坨，将导致日后的维护难度增大，一方面原因在于 Electron 不断在发展，也必将面临接口升级的问题，另一方面，我们也很难保证 Electron 就能久经不衰，说不定明天就会有新的框架发布，替代 Electron。如果代码处处混杂着 Electron 的内容，整套应用全部重写的成本其实是很大的。一个比较简单的做法就是对 Electron 再做一层自定义的封装，将用到的 Electron 统一封装到一个脚本之内。例如：

123456789101112131415161718192021222324252627282930复制代码
 
// libmain.js'use strict'const electron = require('electron')const app = electron.appconst shell = electron.shellconst BrowserWindow = electron.BrowserWindowclass lib {  static exit (cleanCookie) {    if (cleanCookie) {      BrowserWindow.getAllWindows().forEach((win) => {        win.webContents.session.clearStorageData({storages: ['cookies']}, () => {          console.log('Successfully eliminate cookies')        })      })    }    app.quit()    app.exit(0)  }  static externalOpenURL (url) {    shell.openExternal(url)  }}// main.js...lib.exit(true)...lib.externalOpenURL(...)复制代码

在上面的代码中，我们其实实现了应用的退出逻辑，在每次退出应用之前，都将浏览器的 cookie 清除，shell.openExternal 也是如此。这样做的一个好处在于我们在需要 Electron 时，只需统一的调用 libmain.js 即可，无需再任何需要 electron 的地方 require electron，减少 Electron 和应用之间的耦合度。值得一提的是，ipcMain 和 ipcRenderer 不能在同一个脚本中被引入，所以我们好针对 renderer 进程额外再封装另一个脚本 librenderer.js。

2. IPC混合式 MVC/MVVC

IPC 固然好，但消息发来发去其实是非常绕逻辑的。例如一条消息首先从 ipcRenderer 发出，然后 ipcMain做出反应，然后通过 sender.send 发回，由另一个 ipcRenderer 再做响应。这样的逻辑方式是非常累人的。前面我们对 Electron 进行解耦和的过程中其实可以看到，当对 Electron 解耦之后，消息本身从何处发出其实是可以被淡忘的，这样便回归到了我们常见的 MVC/MVVC 结构的实践。Electron 本身的逻辑充当 Controller，而 Web 则充当 Model。在这个过程中，由于双向绑定的存在，我们竟可能减少IPC的双边通信逻辑，让 Render而 端单边向 ipcMain 通信，然后 Controller 来修改 Model 从而通过双向绑定达到修改 View 的目的。

相关 pull request: github.com/electron-us…

其他问题

杀毒软件的误报

如果你毅然决然的实现了前面提到的 protocol，即使应用代码也成功的进行了签名，仍然会有让你心烦的事情，那就是（Windows平台上）杀毒软件的报毒。笔者估计这也是很多独立开发者不愿意发行Windows版本应用的原因。

这是一个非常恶心的事情，如果你应用的目标用户是小白，那么很可能会因为杀软的误报而不考虑安装你的应用，这里有一个叫做 virustotal 的网站能够帮你检测你打包后的应用会被哪些杀毒软件处理。

当然，报毒并不仅仅是你使用了 protocol 这么简单，早期的 Electron 组件中包含了大量的容易被误报的内容，但现在这一问题少了很多，对此我们作为 Electron 的用户基本上没有别的办法，只能等待 Electron 的影响力继续扩大，使杀毒软件将其彻底列入白名单。

相关 issue: github.com/atom/atom/i…

压缩应用体积的方法

Electron 应用体积动辄一百多兆的体积从他发布的第一天起到现在一直被人诟病，而其体积之所以如此之大的原因在于 Electron 为其跨平台的支持，在内部打包了整个 V8 引擎，相当于一个功能完整的浏览器。

曾经 Slack 作为仰仗 Electron 『大厂』， macOS 版本曾神奇的只有 20M 左右。但事实上那个时候的 Slack macOS 版本并不依赖 Electron，而是 MacGap（所以你可以看到现在的 Slack 全面转向 Electron 后也毫无疑问的成为了百兆应用的大户）。如果你打算使用 MapGap 来优化 Mac 版本的体积，请打住。简单阅读一下 MacGap 的文档就会发现，MacGap 的发展速度甚至赶不上 Electron，很多需求在 MacGap 上甚至无法实现，例如 preload 这样的功能就不具备。

所以无论你的 Electron 应用多么简单，都至少拥有超过 120M 的体积。这是相当不友好的。对于这个问题，笔者实践中找到了三种相对妥协，却能很好的解决问题的方案：

1. 使用 yarn clean

我们知道 node 程序其实是将依赖库整个下载到了 node_modules 中，这也就包括一些 example 和 docs 和 test，而在 electron 应用被打包的过程中，这些依赖其实也是被耿直的打包进了应用之中。这也就无形之中增加了 Electron 应用的体积。

而使用 yarn clean 可以清除这些内容，从而一定程度上减少应用的体积。

2. 将应用程序打包后再分发

Electron 应用本身的 bundle 确实高达 120M，但其压缩后的体积能够变得很小，尤其是 Windows 平台上的安装程序甚至能够被压缩到 33M 左右，而 macOS 和 Linux 的打包体积也将被压缩为 40M 左右。这其实是一个相当可观的体积了，如果配合下面提到的第三点方法，那么几乎向用户隐瞒了应用本身体积巨大的事实。正如笔者在前面提到的，推荐使用 electron-builder。

3. 定制应用的更新功能

关于这一点内容，我们要从 Electron 打包应用的结构谈起。以 macOS 为例，Electron 应用最终被打包成了如下的结构：

123456789101112131415161718192021222324复制代码
 
ElectronApp.app└── Contents    ├── Frameworks    │   ├── Changkun\ Blog\ Helper\ EH.app    │   ├── Changkun\ Blog\ Helper\ NP.app    │   ├── Changkun\ Blog\ Helper.app    │   ├── Electron\ Framework.framework    │   ├── Mantle.framework    │   ├── ReactiveCocoa.framework    │   └── Squirrel.framework    ├── Info.plist    ├── MacOS    │   └── Changkun\ Blog    ├── PkgInfo    ├── Resources    │   ├── Changkun\ Blog.icns    │   ├── app-update.yml    │   ├── app.asar    │   ├── electron.asar    │   ├── en.lproj    │   ├── zh_CN.lproj    │   └── zh_TW.lproj    └── _CodeSignature        └── CodeResources复制代码

在这个结构中，我们自己的核心代码，其实是被完整的打包进了 Contents/Frameworks/Resources/app.asar 中，其他内容则都是 electron 自身的依赖。换句话说，我们只要更新了 app.asar 这个文件，也就相当于更新了整个应用。我们再来看看这个文件的大小：

1复制代码
 
-rw-r--r--   1 changkun  admin   2.9M Mar 16 17:07 app.asar复制代码

这将是一个非常可观的下载量，配合第二点，用户第一次下载了一个不超过 50M 的应用安装程序，每次更新应用时，下载的内容也非常之少。当然，实现这一功能也并不复杂，我们只需要和自己的服务器进行通信，然后下载这个文件退出应用进行替换即可。

相关 issue: github.com/electron/el…

案例：一个 bug 的生与死

electron-builder 出现过一个 bug : 在 productName 字段中，如果其包含了一些 UTF-8 字符，那么最终打包后的 dmg 包的应用 icon 的位置将出现错误。之所以以此为例，是因为恰好这个问题笔者前几日找时间跟踪修复的。

这个问题出现的根源可以追溯到 electron-builder 早期对 node-appdmg 的依赖。在 macOS 10.12 更新之前，用于打包 macOS 平台的 dmg 依赖 node-appdmg 不存在任何问题，而且其本身的实现逻辑也是根据苹果自身的文档描述正确无误完成的。但是莫名其妙的是在 macOS Sierra 上就是无法显示背景图。后来才发现是苹果系统自身的 bug，这个问题也在 10.12.3 之后的系统版本上被修复了。那么从 10.12.0 到 10.12.3 这么长的周期间隙中，electron-builder 的维护者也不能闲着，为了摆脱对 node-appdmg 的依赖，electron-builder 的作者使用 perl 黑魔法解决了这个问题，从那以后 electron-builder 不再依赖 node-appdmg。

然而这也就埋下了隐患。在去年十二月份的一次 bug 维护中，electron-builder 为了修复使其能够构建时自定义路径而更新了这个 perl 脚本，并将其中关键的 UTF-8 解码交给了 node 进行处理，在 packages/electron-builder/src/targets/dmg.ts 这个文件中非常『暴力』的让 node 读取 perl 脚本本身，然后将 $ENTRIES 进行替换，在运行时中执行整个 perl 脚本。但却忽略了 perl 脚本本身与 python 2 一样，如果不指定 utf-8 编码，那么执行将出错。

因此修复这个 bug 的方法也非常简单，只需要在 perl 脚本中增加一行代码：

1复制代码
 
use utf8;复制代码

相关 issue:

  1. github.com/electron-us…
  2. github.com/LinusU/node…
  3. github.com/electron-us…

结论

Electron 是一个仍在发展的的框架（可惜不能说它目前是高速发展的），甚至已经可以在 Electron 的官网上看到已经开始有 2.0 的 breaking changes 计划了。通过笔者个人的实践，Electron 存在各式各样的缺陷和问题，但是这些缺陷的背后其实有着高效的开发效率和的跨全平台的优势撑腰。尽管我们深知 native app 是『正道』，但『一套代码随处运行』的特点，在需求层出、高速迭代产品的今天，选择 Electron 是毋庸置疑的。

进一步的参考

如果你对笔者的部分实践感兴趣，可参考笔者使用 Electron 创建的博客桌面客户端，可以算作是一个非常轻量的 Electron 模板：

  • changkun/changkun-blog-clients/desktop

这个客户端的代码涵盖了大部分的实践内容（部分讨论的内容出于各种各样不可描述的原因而没有在代码中体现，感兴趣的读者可以根据本人的描述自行尝试）。

而对于 Electron 本身，有几个非常好的 repo 是值得深入研究的：

  1. Electron: github.com/electron-us…
  2. Electron Userland: github.com/electron-us…
  3. Awesome Electron: github.com/sindresorhu…


转载于:https://juejin.im/post/5c6d0361f265da2dd427647d

你可能感兴趣的:(Electron深入填坑之路)

  • 腾讯云技术深度探索：构建高效云原生微服务架构 我的运维人生 云原生架构腾讯云运维开发技术共享
    腾讯云技术深度探索：构建高效云原生微服务架构在当今快速发展的技术环境中，云原生技术已成为企业数字化转型的关键驱动力。腾讯云作为行业领先的云服务提供商，不断推出创新的产品和技术，助力企业构建高效、可扩展的云原生微服务架构。本文将深入探讨腾讯云在微服务领域的最新进展，并通过一个实际案例展示如何在腾讯云平台上构建云原生应用。腾讯云微服务架构概览腾讯云微服务架构基于云原生理念，旨在帮助企业快速实现应用的容
  • Pyecharts数据可视化大屏：打造沉浸式数据分析体验 我的运维人生 信息可视化数据分析数据挖掘运维开发技术共享
    Pyecharts数据可视化大屏：打造沉浸式数据分析体验在当今这个数据驱动的时代，如何将海量数据以直观、生动的方式展现出来，成为了数据分析师和企业决策者关注的焦点。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、灵活的配置选项以及高度的定制化能力，成为了构建数据可视化大屏的理想选择。本文将深入探讨如何利用Pyecharts打造数据可视化大屏，并通过实际代码案例
  • 从鸡肉高汤到记忆的魔法再到有效提示的艺术 步子哥 人工智能
    还记得小时候那些天马行空的白日梦吗？也许只要按下键盘上的某个神奇组合，电脑就会发出滴滴的声响，一个隐藏的世界突然在你眼前展开，让你获得超凡的能力，摆脱平凡的生活。这听起来像是玩过太多电子游戏的幻想，但实际上，间隔重复系统给人的感觉惊人地相似。在最佳状态下，这些系统就像魔法一样神奇。本文将以一个看似平凡的鸡肉高汤食谱为例，深入浅出地探讨如何编写有效的间隔重复提示，让你像掌握烹饪技巧一样轻松地掌握记忆
  • 深入理解 MultiQueryRetriever：提升向量数据库检索效果的强大工具 nseejrukjhad 数据库python
    深入理解MultiQueryRetriever：提升向量数据库检索效果的强大工具引言在人工智能和自然语言处理领域，高效准确的信息检索一直是一个关键挑战。传统的基于距离的向量数据库检索方法虽然广泛应用，但仍存在一些局限性。本文将介绍一种创新的解决方案：MultiQueryRetriever，它通过自动生成多个查询视角来增强检索效果，提高结果的相关性和多样性。MultiQueryRetriever的工
  • 自我意识 徐立华
    ----读帕克.帕尔默《教学勇气》（P18----19）5.铸造我们的学科帕克.帕尔默说学科知识对我们的自身认同和外部世界有启发意义。学科会铸造我们。“在我们与学科的命题概念和学科的生活框架相遇之前，自我意识知识处于潜伏状态，通过回想学科是怎样唤醒自我意识，我们就可以找回教学心灵。”《教学勇气》（P18）我们的自我意识像冰山表面下无限延伸的冰层，常常处于潜伏状态。但是在我们对所教授的学科进行深入思
  • 【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面 一个射手座的程序媛 程序员华为od面试职场和发展
    最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获
  • 4招写出高价值文章 zhiliner
    文章写得泛泛是因为思考得不够深，思考得越深文章会越有价值。拿到一个主题一定要去深入挖掘事件背后的东西，比如人物困境以及趋势性的东西。写作过程中有几个深度思考的方法一、解剖，让旧素材焕发新意作为一个写作者，我们能够做的最大贡献，就是给出自己看世界的角度。解剖其实就是把这个话题相关的信息都列出来，详细的列出来，看清楚它的内部。我们看到一个老话题或者一段旧素材的时候，不要只看这个素材或者话题本身，一定要
  • ES聚合分析原理与代码实例讲解 光剑书架上的书 大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLMJavaPython架构设计Agent程序员实现财富自由
    ES聚合分析原理与代码实例讲解1.背景介绍1.1问题的由来在大规模数据分析场景中，特别是在使用Elasticsearch（ES）进行数据存储和检索时，聚合分析成为了一个至关重要的功能。聚合分析允许用户对数据集进行细分和分组，以便深入探索数据的结构和模式。这在诸如实时监控、日志分析、业务洞察等领域具有广泛的应用。1.2研究现状目前，ES聚合分析已经成为现代大数据平台的核心组件之一。它支持多种类型的聚
  • 做好总书记心中的新青年 漂洋过海来看岐岐
    习近平总书记在党的二十大报告中强调：“广大青年要坚定不移听党话、跟党走，怀抱梦想又脚踏实地，敢想敢为又善作善成，立志做有理想、敢担当、能吃苦、肯奋斗的新时代好青年。”青年的本领要从基层一线的服务中来，主动跟群众交友，促膝长谈交心，深入基层，为民排忧解难。俗话说，事业都是拼搏出来的，但事业取得成功的前提是要有过硬的本领、足够精湛的技艺，只要肯学习，坚持学以致用，努力求得真知、锤炼本领，就一定会有所收
  • 开启你的思维成长之路 希思维
    图片发自App很多时候我们都羡慕别人家的孩子思维敏捷，记忆超强，脑回路清晰等，认为那些都是天生的能力，而自己要达到那样的境界几乎不可能，殊不知每个人都有一个强大的小宇宙，就看你是否找到了开启你思维小宇宙的方法。我们每个人的大脑都具有无限潜能，大部分人只开发出10-20%，还有很多潜力深埋于冰山底，而如何找到自己思维的动力呢?首先就是要了解我们神奇的大脑，从大脑神经元素，到神经回路的形成，知晓大脑思
  • android 更改窗口的层次,浮窗开发之窗口层级 Ms.Bu android更改窗口的层次
    最近在项目中遇到了这样的需求：需要在特定的其他应用之上悬浮自己的UI交互(拖动、输入等复杂的UI交互)，和九游的浮窗类似，不过我们的比九游的体验更好，我们越过了很多授权的限制。浮窗效果很多人都知道如何去实现一个简单的浮窗，但是却很少有人去深入的研究背后的流程机制，由于项目中浮窗交互比较复杂，遇到了些坑查看了很多资料，故总结浮窗涉及到的知识点：窗口层级关系(浮窗是如何“浮”的)？浮窗有哪些限制，如何
  • 计算机木马详细编写思路 小熊同学哦 php开发语言木马木马思路
    导语：计算机木马（ComputerTrojan）是一种恶意软件，通过欺骗用户从而获取系统控制权限，给黑客打开系统后门的一种手段。虽然木马的存在给用户和系统带来严重的安全风险，但是了解它的工作原理与编写思路，对于我们提高防范意识、构建更健壮的网络安全体系具有重要意义。本篇博客将深入剖析计算机木马的详细编写思路，以及如何复杂化挑战，以期提高读者对计算机木马的认识和对抗能力。计算机木马的基本原理计算机木
  • Python入门之Lesson2:Python基础语法 小熊同学哦 Python入门课程python开发语言算法数据结构青少年编程
    目录前言一.介绍1.变量和数据类型2.常见运算符3.输入输出4.条件语句5.循环结构二.练习三.总结前言欢迎来到《Python入门》系列博客的第二课。在上一课中，我们了解了Python的安装及运行环境的配置。在这一课中，我们将深入学习Python的基础语法，这是编写Python代码的根基。通过本节内容的学习，你将掌握变量、数据类型、运算符、输入输出、条件语句等Python编程的基础知识。一.介绍1
  • 《 C++ 修炼全景指南：九 》打破编程瓶颈！掌握二叉搜索树的高效实现与技巧 Lenyiin C++修炼全景指南技术指南c++算法stl
    摘要本文详细探讨了二叉搜索树（BinarySearchTree,BST）的核心概念和技术细节，包括插入、查找、删除、遍历等基本操作，并结合实际代码演示了如何实现这些功能。文章深入分析了二叉搜索树的性能优势及其时间复杂度，同时介绍了前驱、后继的查找方法等高级功能。通过自定义实现的二叉搜索树类，读者能够掌握其实际应用，此外，文章还建议进一步扩展为平衡树（如AVL树、红黑树）以优化极端情况下的性能退化。
  • 《 C++ 修炼全景指南：十 》自平衡的艺术：深入了解 AVL 树的核心原理与实现 Lenyiin C++修炼全景指南技术指南c++数据结构stl
    摘要本文深入探讨了AVL树（自平衡二叉搜索树）的概念、特点以及实现细节。我们首先介绍了AVL树的基本原理，并详细分析了其四种旋转操作，包括左旋、右旋、左右双旋和右左双旋，阐述了它们在保持树平衡中的重要作用。接着，本文从头到尾详细描述了AVL树的插入、删除和查找操作，配合完整的代码实现和详尽的注释，使读者能够全面理解这些操作的执行过程。此外，我们还提供了AVL树的遍历方法，包括中序、前序和后序遍历，
  • 深入浅出 -- 系统架构之负载均衡Nginx的性能优化 xiaoli8748_软件开发 系统架构系统架构负载均衡nginx
    一、Nginx性能优化到这里文章的篇幅较长了，最后再来聊一下关于Nginx的性能优化，主要就简单说说收益最高的几个优化项，在这块就不再展开叙述了，毕竟影响性能都有多方面原因导致的，比如网络、服务器硬件、操作系统、后端服务、程序自身、数据库服务等，对于性能调优比较感兴趣的可以参考之前《JVM性能调优》中的调优思想。优化一：打开长连接配置通常Nginx作为代理服务，负责分发客户端的请求，那么建议开启H
  • 误落尘网中，一去三十年 不会功夫的谭大侠
    图片发自App图片发自App图片发自App《财富自由之路》中开篇就讲述了财富自由的目的是为了时间自由，高中觉得每个月一千块是财富自由，大学觉得每个月两千块是财富自由，毕业时觉得每个月五千是财富自由，现在感觉每个月一万都不一定自由。思来想去，货币贬值也没有这么快，还是自己欲望太大了，欲壑难填。大学有一个梦想去西藏，当时觉得两千块就能去，现在感觉有一万都不够。膨胀了啊！曾经想过时间自由了干什么，我就半
  • 如何自学软件编程？零基础自学编程入门指南 _pangzi
    前言零基础自学编程的动力是什么?在开启学习编程之路的时候必须搞清楚自己为什么要学编程?是因为工资高?还是对编程有浓厚的兴趣？还有自己有一定的编程基础想要继续提升自己？其实对于这个问题需要具体分析，如果是单纯看到程序员工资高，而自己本身并没有什么兴趣，那我不建议自学，可以选择参加培训或者不要进入编程领域不然自己学不会没有获得高薪，反而浪费了大把的时间，如果方法不对，反而会打击自信心。下面小编针对学习
  • 绝招曝光！3小时高效利用ChatGPT写出精彩论文 kkai人工智能 chatgpt人工智能ai学习媒体
    在这份指南中，我将深入解析如何利用ChatGPT4.0的高级功能，指导整个学术研究和写作过程。从初步探索研究主题，到撰写结构严谨的学术论文，我将一步步展示如何在每个环节中有效运用ChatGPT。如果您还未使用PLUS版本，可以参考相关教程。**初步探索与主题的确定**起初，我处于庞大的知识领域中，寻找一个可深入研究的领域。ChatGPT如同灯塔，通过深入分析最新研究趋势和领域热点，帮助我在广阔的学
  • 《 C++ 修炼全景指南：四 》揭秘 C++ List 容器背后的实现原理，带你构建自己的双向链表 Lenyiin 技术指南C++修炼全景指南c++list链表stl
    本篇博客，我们将详细讲解如何从头实现一个功能齐全且强大的C++List容器，并深入到各个细节。这篇博客将包括每一步的代码实现、解释以及扩展功能的探讨，目标是让初学者也能轻松理解。一、简介1.1、背景介绍在C++中，std::list是一个基于双向链表的容器，允许高效的插入和删除操作，适用于频繁插入和删除操作的场景。与动态数组不同，list允许常数时间内的插入和删除操作，支持双向遍历。这篇文章将详细
  • 如何利用大数据与AI技术革新相亲交友体验 h17711347205 回归算法安全系统架构交友小程序
    在数字化时代，大数据和人工智能（AI）技术正逐渐革新相亲交友体验，为寻找爱情的过程带来前所未有的变革（编辑h17711347205）。通过精准分析和智能匹配，这些技术能够极大地提高相亲交友系统的效率和用户体验。大数据的力量大数据技术能够收集和分析用户的行为模式、偏好和互动数据，为相亲交友系统提供丰富的信息资源。通过分析用户的搜索历史、浏览记录和点击行为，系统能够深入了解用户的兴趣和需求，从而提供更
  • 《我的职业是小说家》 simple梦
    《我的职业是小说家》：《我的职业是小说家》是村上春树前所未有的自传性作品，历时六年完成。一个人，写作三十五年，十三部长篇小说，超过五十种语言译本。虽然拥有享誉世界的知名度，但关于村上春树，许多事情始终包裹在神秘的面纱中：他是怎样下定决心走上职业小说家之路？对他来说，人生中幸福的事是什么？究竟如何看待芥川奖与诺贝尔文学奖……小说家看似风光，却是份孤独的职业。三十五年来，村上春树在孤独中编织着美妙动人
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 129/365 给宝贝的第23封信：《道德经》第四章：道冲 珍珠能量站
    亲爱的宝贝：今天周六，我在外学习，听几位创业讲师讲授创业的相关知识，一天共4个老师讲解了7个小时。之前线上培训了40个小时，听了这么多，我还是觉得只是窥见皮毛。可见任何一个领域，都可以深入下去，有无穷无尽的细节值得研究。但是任何一件事，也可以用一句话总结。比如“道可道，非常道”创业，我理解的核心是：创立一个业务，通过调配资源，满足用户的需要。至于创立什么样的业务？调配哪些资源？满足用户什么需要？如
  • 程序员架构师主要是做什么_程序员架构师：职责、技能与挑战 绿色小猪
    免费备考资料（2024年11月软考）：历年试题+视频课合集+电子讲义点击领取>>>免费刷题：2024年11月软考备考刷题点此进入>>>程序员架构师的角色定位在软件开发领域，程序员架构师是一个至关重要的角色。他们不仅需要深入理解业务需求，还要将其转化为技术上的解决方案。程序员架构师是项目中的技术领航者，负责制定和维护软件系统的整体架构，确保系统的可扩展性、可维护性和性能。他们的工作涉及从概念化到实现
  • python实现规则引擎_规则引擎python weixin_39601511 python实现规则引擎
    广告关闭回望2020，你在技术之路上，有什么收获和成长么？对于未来，你有什么期待么？云+社区年度征文，各种定制好礼等你！我正在用python编写日志收集分析应用程序，我需要编写一个“规则引擎”来匹配和处理日志消息。它需要具有以下特点：正则表达式匹配消息本身消息严重性优先级的算术比较布尔运算符我设想一个例子规则可能是这样的：(message~program:messageandseverity>=h
  • 【ShuQiHere】 进制与补码的世界：从符号-大小表示法到二补码 ShuQiHere 二进制计算机组成原理
    【ShuQiHere】在计算机系统中，表示正数是相对简单的，只需使用其对应的二进制形式即可。然而，如何有效地表示负数一直是计算机科学中的一个关键问题。为了解决这个问题，科学家们提出了多种表示方法，包括符号-大小表示法（Sign-MagnitudeRepresentation）、一补码（One’sComplement）和二补码（Two’sComplement）。在本文中，我们将深入探讨这些表示方法的
  • 广东麻将开发 红匣子实力推荐
    在中国，麻将作为一种深受人们喜爱的传统娱乐活动，已经有着数百年的历史。随着互联网和移动设备的普及，麻将游戏也从实体桌面转移到了数字平台，其中广东麻将因其独特的地方特色和玩法而备受青睐。本文将介绍广东麻将的开发过程，包括其设计理念、技术实现以及用户体验优化等方面。一、设计理念：广东麻将开发的核心理念是保留传统麻将的精髓，同时融入现代科技元素，使游戏既具有亲切感又不失趣味性。开发者通常会深入研究广东地
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 生老病死 贝贝_1
    生老病死是生命的必然过程，是人生的必由之路。人生在世不过几十年，所包罗的生、老、病、死是不以人的意志为转移的。我们唯一能做到的就是顺乎自然，珍惜生命，老有所乐，战胜病魔，笑对死亡。生图片发自App“生”不由己，尽管你不愿睁开眼睛，尽管你哭着喊着，但你还是被带到了这个世界，而所有围着你的人包括你的父母，就是要听见你离开母体发出的这一串串生命的哭声，他们才会笑，并且笑得那般的欣慰。是啊，这第一声哭是你
  • Java序列化进阶篇 g21121 java序列化
            1.transient         类一旦实现了Serializable 接口即被声明为可序列化，然而某些情况下并不是所有的属性都需要序列化，想要人为的去阻止这些属性被序列化，就需要用到transient 关键字。
  • escape()、encodeURI()、encodeURIComponent()区别详解 aigo JavaScriptWeb
    原文：http://blog.sina.com.cn/s/blog_4586764e0101khi0.html   JavaScript中有三个可以对字符串编码的函数，分别是： escape,encodeURI,encodeURIComponent，相应3个解码函数：,decodeURI,decodeURIComponent 。 下面简单介绍一下它们的区别 1 escape()函
  • ArcgisEngine实现对地图的放大、缩小和平移 Cb123456 添加矢量数据对地图的放大、缩小和平移Engine
    ArcgisEngine实现对地图的放大、缩小和平移:  个人觉得是平移，不过网上的都是漫游，通俗的说就是把一个地图对象从一边拉到另一边而已。就看人说话吧.  具体实现: 一、引入命名空间    using ESRI.ArcGIS.Geometry;    using ESRI.ArcGIS.Controls; 二、代码实现.
  • Java集合框架概述 天子之骄 Java集合框架概述
       集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。   简单介绍：   Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
  • 旗正4.0页面跳转传值问题 何必如此 javajsp
    跳转和成功提示 a)        成功字段非空forward 成功字段非空forward，不会弹出成功字段，为jsp转发，页面能超链接传值,传输变量时需要拼接。接拼接方式list.jsp?test="+strweightUnit+"或list.jsp?test="+weightUnit+&qu
  • 全网唯一:移动互联网服务器端开发课程 cocos2d-x小菜 web开发移动开发移动端开发移动互联程序员
        移动互联网时代来了！     App市场爆发式增长为Web开发程序员带来新一轮机遇，近两年新增创业者，几乎全部选择了移动互联网项目！传统互联网企业中超过98%的门户网站已经或者正在从单一的网站入口转向PC、手机、Pad、智能电视等多端全平台兼容体系。据统计，AppStore中超过85%的App项目都选择了PHP作为后端程
  • Log4J通用配置|注意问题 笔记 7454103 DAOapachetomcatlog4jWeb
    关于日志的等级 那些去 百度就知道了！ 这几天 要搭个新框架  配置了 日志 记下来 ！做个备忘！ #这里定义能显示到的最低级别,若定义到INFO级别,则看不到DEBUG级别的信息了~! log4j.rootLogger=INFO,allLog # DAO层 log记录到dao.log 控制台 和 总日志文件 log4j.logger.DAO=INFO,dao,C
  • SQLServer TCP/IP 连接失败问题 ---SQL Server Configuration Manager darkranger sqlcwindowsSQL ServerXP
    当你安装完之后,连接数据库的时候可能会发现你的TCP/IP 没有启动.. 发现需要启动客户端协议 : TCP/IP  需要打开 SQL Server Configuration Manager... 却发现无法打开 SQL Server Configuration Manager..?? 解决方法:  C:\WINDOWS\system32目录搜索framedyn.
  • [置顶] 做有中国特色的程序员 aijuans 程序员
    从出版业说起 网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。 许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有些技术书读得可
  • document.domain 跨域问题 avords document
    document.domain用来得到当前网页的域名。比如在地址栏里输入：javascript:alert(document.domain); //www.315ta.com我们也可以给document.domain属性赋值，不过是有限制的，你只能赋成当前的域名或者基础域名。比如：javascript:alert(document.domain = "315ta.com");
  • 关于管理软件的一些思考 houxinyou 管理
    工作好多看年了,一直在做管理软件,不知道是我最开始做的时候产生了一些惯性的思维,还是现在接触的管理软件水平有所下降.换过好多年公司,越来越感觉现在的管理软件做的越来越乱. 在我看来,管理软件不论是以前的结构化编程,还是现在的面向对象编程,不管是CS模式,还是BS模式.模块的划分是很重要的.当然,模块的划分有很多种方式.我只是以我自己的划分方式来说一下. 做为管理软件,就像现在讲究MVC这
  • NoSQL数据库之Redis数据库管理(String类型和hash类型) bijian1013 redis数据库NoSQL
    一.Redis的数据类型 1.String类型及操作         String是最简单的类型，一个key对应一个value，string类型是二进制安全的。Redis的string可以包含任何数据，比如jpg图片或者序列化的对象。         Set方法：设置key对应的值为string类型的value
  • Tomcat 一些技巧 征客丶 javatomcatdos
    以下操作都是在windows 环境下 一、Tomcat 启动时配置 JAVA_HOME 在 tomcat 安装目录，bin 文件夹下的 catalina.bat 或 setclasspath.bat 中添加 set JAVA_HOME=JAVA 安装目录 set JRE_HOME=JAVA 安装目录/jre 即可； 二、查看Tomcat 版本 在 tomcat 安装目
  • 【Spark七十二】Spark的日志配置 bit1129 spark
    在测试Spark Streaming时，大量的日志显示到控制台，影响了Spark Streaming程序代码的输出结果的查看(代码中通过println将输出打印到控制台上)，可以通过修改Spark的日志配置的方式，不让Spark Streaming把它的日志显示在console   在Spark的conf目录下，把log4j.properties.template修改为log4j.p
  • Haskell版冒泡排序 bookjovi 冒泡排序haskell
    面试的时候问的比较多的算法题要么是binary search，要么是冒泡排序，真的不想用写C写冒泡排序了，贴上个Haskell版的，思维简单，代码简单，下次谁要是再要我用C写冒泡排序，直接上个haskell版的，让他自己去理解吧。     sort [] = [] sort [x] = [x] sort (x:x1:xs) | x>x1 = x1:so
  • java 路径 配置文件读取 bro_feng java
    这几天做一个项目，关于路径做如下笔记，有需要供参考。 取工程内的文件，一般都要用相对路径，这个自然不用多说。 在src统计目录建配置文件目录res,在res中放入配置文件。 读取文件使用方式： 1. MyTest.class.getResourceAsStream("/res/xx.properties") 2. properties.load(MyTest.
  • 读《研磨设计模式》-代码笔记-简单工厂模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 个人理解：简单工厂模式就是IOC; * 客户端要用到某一对象，本来是由客户创建的，现在改成由工厂创建，客户直接取就好了 */ interface IProduct {
  • SVN与JIRA的关联 chenyu19891124 SVN
    SVN与JIRA的关联一直都没能装成功，今天凝聚心思花了一天时间整合好了。下面是自己整理的步骤： 一、搭建好SVN环境，尤其是要把SVN的服务注册成系统服务 二、装好JIRA，自己用是jira-4.3.4破解版 三、下载SVN与JIRA的插件并解压，然后拷贝插件包下lib包里的三个jar，放到Atlassian\JIRA 4.3.4\atlassian-jira\WEB-INF\lib下，再
  • JWFDv0.96 最新设计思路 comsci 数据结构算法工作企业应用公告
                       随着工作流技术的发展，工作流产品的应用范围也不断的在扩展，开始进入了像金融行业(我已经看到国有四大商业银行的工作流产品招标公告了)，实时生产控制和其它比较重要的工程领域，而
  • vi 保存复制内容格式粘贴 daizj vi粘贴复制保存原格式不变形
        vi是linux中非常好用的文本编辑工具，功能强大无比，但对于复制带有缩进格式的内容时，粘贴的时候内容错位很严重，不会按照复制时的格式排版，vi能不能在粘贴时，按复制进的格式进行粘贴呢？ 答案是肯定的，vi有一个很强大的命令可以实现此功能 。     在命令模式输入:set paste，则进入paste模式，这样再进行粘贴时
  • shell脚本运行时报错误：/bin/bash^M: bad interpreter 的解决办法 dongwei_6688 shell脚本
    出现原因：windows上写的脚本，直接拷贝到linux系统上运行由于格式不兼容导致 解决办法： 1. 比如文件名为myshell.sh，vim myshell.sh 2. 执行vim中的命令 : set ff?查看文件格式，如果显示fileformat=dos，证明文件格式有问题 3. 执行vim中的命令 :set fileformat=unix 将文件格式改过来就可以了，然后:w
  • 高一上学期难记忆单词 dcj3sjt126com wordenglish
    honest 诚实的；正直的 argue 争论 classical 古典的 hammer 锤子 share  分享；共有 sorrow 悲哀；悲痛 adventure 冒险 error 错误；差错 closet 壁橱；储藏室 pronounce 发音；宣告 repeat 重做；重复 majority 大多数；大半   native 本国的，本地的，本国
  • hibernate查询返回DTO对象，DTO封装了多个pojo对象的属性 frankco POJOhibernate查询DTO
          DTO-数据传输对象；pojo-最纯粹的java对象与数据库中的表一一对应。       简单讲：DTO起到业务数据的传递作用，pojo则与持久层数据库打交道。         有时候我们需要查询返回DTO对象，因为DTO
  • Partition List hcx2013 partition
    Given a linked list and a value x, partition it such that all nodes less than x come before nodes greater than or equal to x. You should preserve the original relative order of th
  • Spring MVC测试框架详解——客户端测试 jinnianshilongnian
    上一篇《Spring MVC测试框架详解——服务端测试》已经介绍了服务端测试，接下来再看看如果测试Rest客户端，对于客户端测试以前经常使用的方法是启动一个内嵌的jetty/tomcat容器，然后发送真实的请求到相应的控制器；这种方式的缺点就是速度慢；自Spring 3.2开始提供了对RestTemplate的模拟服务器测试方式，也就是说使用RestTemplate测试时无须启动服务器，而是模拟一
  • 关于推荐个人观点 liyonghui160com 推荐系统关于推荐个人观点
        回想起来，我也做推荐了3年多了，最近公司做了调整招聘了很多算法工程师，以为需要多么高大上的算法才能搭建起来的，从实践中走过来，我只想说【不是这样的】     第一次接触推荐系统是在四年前入职的时候，那时候，机器学习和大数据都是没有的概念，什么大数据处理开源软件根本不存在，我们用多台计算机web程序记录用户行为，用.net的w
  • 不间断旋转的动画 pangyulei 动画
    CABasicAnimation* rotationAnimation; rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; rotationAnimation.toValue = [NSNumber numberWithFloat: M
  • 自定义annotation sha1064616837 javaenumannotationreflect
    对象有的属性在页面上可编辑，有的属性在页面只可读，以前都是我们在页面上写死的，时间一久有时候会混乱，此处通过自定义annotation在类属性中定义。越来越发现Java的Annotation真心很强大，可以帮我们省去很多代码，让代码看上去简洁。 下面这个例子 主要用到了 1.自定义annotation：@interface，以及几个配合着自定义注解使用的几个注解 2.简单的反射 3.枚举
  • Spring 源码 up2pu spring
    1.Spring源代码 https://github.com/SpringSource/spring-framework/branches/3.2.x 注：兼容svn检出 2.运行脚本 import-into-eclipse.bat 注：需要设置JAVA_HOME为jdk 1.7 build.gradle compileJava { sourceCompatibilit
  • 利用word分词来计算文本相似度 yangshangchuan wordword分词文本相似度余弦相似度简单共有词
    word分词提供了多种文本相似度计算方式： 方式一：余弦相似度，通过计算两个向量的夹角余弦值来评估他们的相似度 实现类：org.apdplat.word.analysis.CosineTextSimilarity 用法如下： String text1 = "我爱购物"; String text2 = "我爱读书"; String text3 =
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他