《Nodejs開發加密貨幣》之十二：靜態網站開發全景掃描

前言

在前面的入門部分，介紹了Nodejs在前端開發中的應用，並通過具體項目說明了Nodejs在比特幣客戶端領域被廣泛應用。當時爲了介紹Nodejs入門技術，一切都是從頭創建，沒有引入前端框架。但在具體的項目實踐中，前端是有框架可以選擇的，效率和體驗會有明顯提升。

具體到前端框架，我的選擇是Ember.js。Ember給開發帶來一種飛一般的感覺，如果問前端框架哪家強，我會毫不猶豫的說Ember。（具體爲什麼，網上仍然爭論不休，本文不做討論）

本文重點介紹靜態網站的類型，億書官網的技術選型，以及在開發億書官網時體會到的Ember使用的幾個大坑。

億書官網介紹

1.資源信息

億書官網： http://ebookchain.org 源碼： https://github.com/Ebookchain/ebookchain.org

截圖如下：

這是一個簡單的靜態網站，如果不考慮擴展性，單純使用div + css + javascript的形式，對於美工較好的前端來說，就是半天的時間。

當然，對於我這樣，習慣了後臺開發產品的人，實際花費的時間也不多。從安裝使用，搭建工程，到插件開發，引入第三方庫，都統統瞭解了一下，所以纔有了很爽快的感覺。

2.功能特點

一個靜態網站還要什麼特殊功能嗎？好看，能傳達產品信息，不就行了嗎？不過，既然是研究，就得多少弄點特色出來。億書，主要實現了以下幾個功能（這些功能，很多網站都有，我把它集中到一起，因此，億書官網可以作爲一個init工程來用）：

導航動畫：當滾動頁面的時候，網站的header會動態調整。這個我已經抽出來，做成了Ember的插件，源碼地址：https://github.com/imfly/ember-cli-animated-header
滾動事件：Ember沒有對Scroll事件的處理。這裏爲Ember提供了響應Scroll事件的能力，抽出的插件在這裏： https://github.com/imfly/ember-cli-scroller
SVG動畫: 當打開網站的時候，會看到第一頁ebookchain的動畫效果;
全頁展示: 滾動頁面，頁面會按照屏幕，逐個顯示出來，自動適配屏幕大小。封裝的插件在這裏： https://github.com/imfly/ember-cli-fullPagejs
多語言支持: 提供了英文和中文兩種語言，默認是英文，咱也走國際範;
模塊佈局: 產品特徵、合作伙伴部分（甚至footer部分）直接用的json數據，完全按照mvc模式進行分離，添加、修改、刪除、擴展都很方便，無需動刀頁面;
自動構建: 一鍵導出靜態頁面，合併壓縮js,css等文件;
一鍵部署

多語言支持和擴展性，顯然要比純粹的靜態頁面好處多多。細心的小夥伴，一定會發現，類似的主頁非常多，有的基本上完全一樣。事實上，很多是直接拷貝他人的靜態頁面，有了億書官網代碼，建立類似的主頁，擴展和修改就會簡單很多。

3.技術選型

開發靜態網站，可用的方案有很多，我嘗試了下面三種：

（1）自己開發設計

爲了延續前面的工作，最初在《Nodejs開發加密貨幣》入門部門提供的實例程序基礎上構建了一個應用，用來輸出靜態頁面。寫到最後，發現在走ember-cli等現有產品的老路，果斷放棄。（代碼已經廢棄刪除）

（2）使用第三方產品

這類產品，有人叫做靜態站點生成器，最早流行的是WordPress。不過，基於Nodejs並在github上被廣泛關注的，有Wintersimith，Assemble，Metalsmith，Hexo，DocPad等等。這類產品多是面向技術人員，要具備學習掌握基本安裝和使用的能力。

這類產品的特點，就是幫你解決了主題、轉化和部署等工作，把內容創作給你留下，極大的簡化靜態頁面的生成過程。其原理，與我現在使用 gitbook-summary 撰寫電子書一樣。試用了其中兩款，沒有簡單到哪去，因此，也不是俺的菜。

（3）藉助開發框架

個性化的產品，當然還得自己開發設計，只不過代碼的結構和後期的處理，可以交由現成的框架產品。這樣，即保證了開發設計的工作效率，也可獲得更大的代碼處理自由度。缺點可能是，技術門檻會高一些。

億書選擇使用Ember作爲前端開發框架，涉及的產品包括：官方網站、各平臺的客戶端。把可以共享的部分，全部抽取出來，獨立爲基本的組件，方便各產品共享使用，會大大提高產品線的開發進度。試用了一下Ember，感覺很爽，不再它顧。

與Ember的前仇舊恨

之前接觸過ember，那應該是1.0版本以前的事情，說起來也得有2年多了吧。當初ruby on rails火熱，出來的discourse論壇就是以RoR爲後臺，用Ember開發的前端，很酷，真有點ambitions的感覺（Ember的宣傳口號）。

不過，試用了一下，用後臺的思路去開發前端應用，有點撕裂，很多東西不對路。生搬硬套後端的MVC模式，除了使開發更復雜，感覺沒有太大的突破。另外，Ember是封裝最爲嚴格的前端框架，市面上大量現成的第三方開發包不能直接簡單的引入使用，也成爲其被受詬病的地方。

這次，爲了開發億書的官方網站，也爲了給日後客戶端的開發選擇一個技術方案，重新看了看Ember。不看不知道，一看，我了個去，簡直就是按照自己當年的期望在改進，試用了一下，豈止一個爽字了得。真心感謝，這些踏踏實實做事的團隊，他們真的非常ambitions。對美麗的東西，我們得學着欣賞。

理解Ember幾個讓人迷亂的深“坑”

對某些小夥伴來說，ember的學習曲線還是陡了些。這裏把拉幾個Ember的“不良”習慣，不至於一試用就被潑了冷水。入門文章，網上有很多，就不重複了。這裏提示性的，把我理解的、需要提醒小夥伴們注意的地方，簡單說說。

1.什麼是前端框架？

貌似高深的東西，其實也不過是一個js文件而已。因此，您完全可以像用其他js文件一樣，在自己的頁面裏引入和使用。既然它叫框架，顯然是提供了特定的規則，所以學習它的重點，就是要掌握這些規則。掌握不好，自然就會掉進“坑”裏。

爲什麼要這麼說，是因爲Ember官方文檔實在不是個好東西，它沒有一個整體的概念，有時候讓人無從知曉“爲什麼會如此”。即便是對細節的介紹，也不是那麼細，有時候需要結合源碼去理解。再者，版本、Api變化太快。這些在兩年前，已經被人提出來，現在仍然沒有太大改進。可見團隊是多麼“堅持”的一幫哥們。

2.一定要使用它的命令行工具Ember-cli

這個就別猶豫了，雖然可以直接使用js文件，但是沒有Ember-cli這樣強有力的命令行工具，使用Ember的難度會陡增。這個工具，讓開發Ember應用，如開發後臺程序，特別是用慣了ruby on rails的朋友，會非常親切。從建立工程、產生各類邏輯代碼，到測試、部署，等等，該工具（或通過插件）包攬了一切。

不習慣命令行開發？當我沒說。

3.在瀏覽器上安裝使用ember-inspector插件

這個必須有。在ruby on rails裏，產生的路由等信息，可以在命令行裏查看。但是，針對前端應用，只能在前端查看。通過該工具，可以掌握生成的路由、控制器、視圖組件等各類對象信息，以及它們之間的對應關係，還能點擊對應對象，查看對應方法和加載的數據。更主要的是，Ember默認生成的路由和視圖等也被羅列了出來，如indexRoute，如圖：

4.Ember提倡的MVC模型裏沒有了VC

在Ember的MVC模型裏，之前的版本，M：代表model，V: view（外加helper,component)，C：controller，路由route單獨存在。2.0版本以後，這個模式改變了，VC部分逐步剔除，取而代之的是router + model + component的形式。

或者說，V的內容變成了component，C的內容放在了router裏。個人看來，這應該是理性迴歸，因爲之前的版本里，controller能做的事情，router也照樣能做，留着controller只能是一個概念的實現，本質上沒什麼用處。

當然，目前的版本還保留着控制器和視圖（可以通過插件來用），但是能不用就別用了。

5.有了組件，自然就沒了全局模板layout和局部模板partial的存在了

理解這個很重要。一方面，Ember號稱面向未來，今天開發的UI組件component，在以後也能被使用。以後的版本里，組件的地位更加重要。所以，以前可能對文章列表，比如：post-item的處理，就是寫一個局部模板partial來實現重用，今天用component就好了。partial不再被支持。

另一方面，application.hbs本身就相當於一個layout.hbs文件，作爲單頁面應用，自然就沒有所謂layout的存在，這與後臺使用handlebar.js有區別。它的渲染層次如下：

這張圖，權且簡單的描述一下Ember的視圖渲染過程，動態圖像纔會更直觀。事實上，它還可以更復雜一些，把一些鉤子方法也放進去，這樣對於Ember的數據傳遞、視圖渲染等過程就會更加直觀。

6.掌握路由、模型、UI組件等各部分的鉤子方法，是玩轉Ember的必經之路

設計獨立靜止的頁面，肯定沒有什麼難度，所以簡單的hello world程序看不出什麼來。現實是，多個模型的關聯操作，路由狀態的轉移變更，UI組件的交互嵌套，插件與主程序的良好擴展，纔是開發中的常態，處理它們簡單了，才真叫簡單。

這部分，有必要單獨總結一下，有機會再說，^_^。

7.本地插件開發，最容易忽視的小動作

這個不是ember的問題，但是ember的插件也是npm包，自然npm的問題也是它的問題。我們本地開發調試npm包（或ember-cli插件），通常使用npm link和npm link npm-name兩個命令，將開發的npm包引入工程。最容易忽略的就是，運行完命令後，還應在工程的package.json裏，添加對該包的依賴ember-cli-pluginName: '*'。

事實上，也有不需要設置的。不過這麼做，是最穩妥的方法。建議把這一個小步驟作爲一個固定約束，會節省很多時間（俺這次被坑了大半天）。