從零開始使用Electron + jQuery開發桌面應用

從零開始使用Electron + jQuery開發桌面應用

Electron介紹
現現在，用 HTML、JavaScript、CSS、Node.js 寫桌面應用早已不是什麼新鮮的事了，做爲一名前端，可以使用本身熟悉的語言，快速實現本身想要的桌面應用，是件很讓人興奮的事。
目前常見的有 NW、heX、Electron。今天，就來簡單的上手一下 Electron。

Electron 是什麼？
Electron 是一款能夠利用 Web技術 開發跨平臺桌面應用的框架，最初是 Github 發佈的 Atom 編輯器衍生出的 Atom Shell，後改名爲 Electron。

Electron 能作什麼？
Electron 內置了 Chromium 內核 和 Node，所以可使用 HTML 和 CSS 來實現應用的 GUI 界面，用 JavaScript 調用豐富的原生 API 實現桌面應用。你也能夠將 Electron 看做是一個由 JavaScript 控制的一個小型的 Chrome 內核瀏覽器。

因爲內置的 Chromium 內核 和 Node, 所以咱們不須要關心前端的兼容問題，你甚至能夠寫 -webkit- only 的代碼; 也不須要關心一些須要編譯的 Node 模塊兼容問題，由於 Node 版本是固定的。所以，用 Electron 來編寫跨平臺應用程序是很是合適的。

Electron + jQuery
得知能夠直接把web網站打包成桌面應用程序，我頓時樂開了花。趕忙去助贏官網查了資源，工欲善其事，必先利其器。首先得把工具down下來。
手上恰好有個web網站，我就拿他試水吧。不過我沒有照官網的教程。我對前端自認爲是過關的，我就略過了js，css等等
一個最簡單的electron項目包含三個文件, package.json, index.html, main.js
爲了把mvc網站嵌入到桌面應用中去，在index.html裏面添加我mvc的錨文本。刷新electron,點擊錨文本就能看到網站內容了，心情好激動呀。很快這刺激就過了，點擊事件都不能正常響應。打開調試看看吧，console裏面提示說$沒有定義。明明網站就有引用，爲何還會提示這jb問題了。electron是否是傻了。

回想一下，electron是基於Chromium 環境依賴於Node.js，那應該是引用的姿式不對了。前兩天看jquery源碼開頭就有一段說是提供給node.js使用的，爲何在我手上就是不能正常使用了。帶着這個疑問去查了查相關資料，發現引用jquery前得告訴jquery我如今的環境是Node.js。

後面jquery開發就和日常寫代碼同樣了。