Meteor——以NodeJS爲基礎環境，MongoDB爲數據環境的全棧開發平臺！

1、全棧開發平臺 - 不只僅是前端

Meteor和那些名聲如雷貫耳的前端框架，好比Angular, React等都不同，它是一個 採用單一開發語言的全棧開發的平臺：開發者可使用JavaScript同時 進行前端和後端的開發，而後交給Meteor運行這個包含了先後端的完整應用：

從圖中你能夠看到，Meteor在前端使用瀏覽器做爲基礎運行環境，在後端則是以NodeJS做爲 基礎運行環境，以MongoDB做爲數據持久化系統。

Meteor提供了一個橫跨前端和後端的中間層平臺，預置封裝了不少功能庫，簡化了 Web應用的開發：使用單一語言快速開發Web應用，這是Meteor的最重要訴求。

2、初識Meteor

從構成來說，能夠認爲Meteor開發平臺由兩部分構成：

Meteor庫 - 以功能包的形式存在，封裝了諸如實時通訊、反應式編程之類的核心功能。當 一個Meteor應用啓動時，Meteor會自動加載這些庫，爲應用提供了一個基礎環境。

Meteor工具 - 能夠理解爲命令行方式的開發環境，它使咱們能夠輕鬆地管理整個應用 開發流程：從建立應用、調試應用、自動化測試到打包、部署、熱升級。

如今，讓咱們讓咱們使用Meteor命令行工具meteor建立並啓動第一個Meteor應用吧。

1. 建立應用 —— meteor create [project]

在終端中輸入meteor create test,而後按回車：

~$ meteor create test

這個命令將在當前目錄下建立一個子文件夾test，Meteor將使用內置的應用模板 做爲這個文件夾的內容。咱們能夠進入test文件夾，執行ls命令查看一下內容：

~$ cd test
~/test$ ls -al

你能夠看到Meteor建立了3個文件和1個目錄。

• test.css - 前端的樣式表文件

• test.html -前端的HTML文件

• test.js - 前端/後端共用的JavaScript文件。

全棧，對吧O(∩_∩)O~

.meteor - 這個子目錄是Meteor應用必須的特殊子目錄，由Meteor平臺維護，咱們不要動
先略過3個文件的具體內容，咱們運行起來看看。

2. 運行應用 —— meteor run

執行meteor命令啓動應用，在終端中輸入meteor，這等價於運行meteor run：

~/test$ meteor

當你看到終端中出現下面的提示信息：

...
App running at: http://localhost:3000/

恭喜！咱們的第一個Meteor應用已經運行起來了！

3.中止應用運行 —— Ctrl+C

用鼠標左鍵點擊一下終端區域，確保它得到鍵盤輸入焦點（你應該能夠看到一個 閃爍的光標），而後同時按Ctrl鍵和C鍵，便可中止應用運行：

^C
    ~/test$

4.復位應用數據 —— meteor reset

Meteor應用運行時會生成打包文件、建立應用數據庫。可使用下面命令 清理這些生成的文件和應用數據：

~/test$ meteor rest

meteor reset命令不影響你的源代碼文件。

3、模板文件 - test.html

打開test.html，你可能會略有不適：

它不是一個標準的HTML文件：沒有html頂層標籤，奇怪的符號{{> hello}}... 不過，在Metoer中這樣的文件倒是合法的文件 —— 模板文件。

1.模板頂層標籤 —— head/body/template

Meteor規定，在一個模板文件裏，只能出現三種頂層標籤：head、body和template。 也就是說，模板文件只能包含以這三種標籤爲頂層標籤的HTML片斷。

這是由於，Meteor在運行應用以前有一個打包/bundle的過程，此時Meteor會提取全部 模板文件（一個應用中能夠有多個模板文件）中的head、body和template片斷，分別進行 合併、編譯後才呈現給用戶：

上圖中，a.html和b.html中的head片斷合併後做爲最終的head內容，b.html和c.html中 的body片斷合併後做爲最終的body內容，至於c.html中的template的內容，則最終替換了 b.html中的{{> hello}}。

2.模板語言 —— Spacebars

Meteor的模板使用的語言是私有的spacebars語言，它基於流行的handlebars，經過 在HTML片斷中嵌入模板標籤（以兩對大括號爲邊界）實現模板化。所以，Meteor的模板 其實就是HTML標籤和模板標籤的混合體。

{{> hello}}模板標籤用來調用一個子模板，Meteor將在最終呈現給用戶的HTML文檔中， 使用子模板hello的內容進行原地替換。

特殊的template標籤用來定義一個子模板。

{{counter}}模板標籤執行插值工做，Meteror將在最終呈現給用戶的HTML文檔中，使用 標識符counter對應的值進行原地替換。

4、樣式文件 - test.css

和模板文件相似，Meteor在打包過程當中，會將全部的樣式文件合併成一個大的樣式文件， 而後在呈現給用戶的HTML文檔中引用這個樣式文件：

上圖中，a.css和b.css的內容將被合併爲一個文件，並在最終呈現給用戶的HTML文檔中， 使用link標籤引用這個文件。

5、代碼文件 - test.js

test.js是最有趣的文件，Meteor將在前端和後端同時運行這個文件。能夠這樣理解：

• 前端 - Meteor將在最終呈現給用戶的HTML文檔中使用script標籤引用test.js

• 後端 - Meteor將經過NodeJS讀入並運行test.js

毫無疑問，若是不作任何處理，誰也無法保證一段JS代碼既能夠在前端瀏覽器環境中運行， 也能夠在後端NodeJS中運行。在test.js中，咱們須要判斷當前的具體運行環境，以便 執行相應的代碼。

1.判斷代碼執行環境 —— Meteor.isClient/Meteor.isServer

讓同一個js文件便可以跑在前端，也能夠跑在後端（好比NodeJS），已經有不少 應用了，只須要判斷下在某個特定環境才存在的變量就能夠了（好比，NodeJS有global，而 瀏覽器有window）。Meteor提供了一組更加清晰的API來實現這個判斷：

• Meteor.isClient - 爲真時，表示當前運行環境爲前端

• Meteor.isServer - 爲真時，表示當前運行環境爲後端

你能夠看到，在test.js中也是這麼作的：

//test.js
if(Meteor.isClient){
  //僅在前端執行的代碼塊
}
if(Meteor.isServer){
  //僅在後端執行的代碼塊
}

2.先後端都執行的代碼

很顯然，若是在test.js中，不判斷執行環境的代碼將同時在前端和後端運行。好比：

//test.js
console.log("Hello,Meteor!");
if(Meteor.isClient){...}
if(Meteor.isServer){...}

運行應用後，你將在後臺的終端中看到Hello,Meteor!，也將在前臺的調試臺 中看到相同的輸出。

6、前端代碼 - 模板實例對象

回憶下，在模板文件test.html中，咱們定義了一個模板：

<!--test.html-->
<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p> 
</template>

當Meteor運行這個應用時，將自動建立一個對應的模板實例對象:Template.hello。 對模板的數據綁定和事件綁定，這些一般須要使用JavaScript實現的功能，就經過這 個對象來實現:

在hello模板中，{{counter}}模板標籤中的標識符couter的值，將由對應模板實例 對象的counter函數返回值決定，這個函數被稱爲模板的helper函數，使用模板實例的 helpers()方法聲明模板標籤中標識符對應的helper函數。

而經過模板實例對象的events方法，則爲模板中的button元素掛接了click事件監聽處理 函數。

7、前端代碼 - 模板標籤標識符解析/helper

使用Template.hello.helpers(helpers)方法聲明hello模板中模板標籤標識符的解析函數。參數helpers是一個JS對象，屬性表示應用在模板標籤中的標識符，值 一般是一個函數，被稱爲helper，大體是幫助Meteor解析模板中的標識符的值 這樣的意思。

好比，在test.js中咱們爲hello模板中出如今{{counter}}模板標籤中的counter表達 式聲明其對應的helper函數：

//test.js
Template.hello.helpers({
  'counter':function(){
    return Session.get('counter');
  }
});

每次當Meteor須要對模板標籤{{counter}}進行計算時，都將調用其counter標識符 對應的helper函數進行計算：它簡單地返回Session變量counter的當前值。

1.爲helper函數設定參數

helper函數能夠接受參數，好比對於模板test中的displayName標識符：

<template name="test">
  <h1>Hello,{{displayName "Jason" "Mr."}}!</h1>
</template>

聲明以下的helper函數：

Template.test.helpers({
  'displayName' : function(name,title){
    return title + ' ' + name;
  }
});

那麼Meteor渲染後將得到以下的HTML結果：

<h1>Hello,Mr. Jason!</h1>

2.使用常量helper

固然，也能夠將helper定義爲一個常量：

Template.test.helpers({
  displayName : "Mr. WHOAMI"
})

這時，模板標籤{{displayName}}將永遠地被設定爲固定的值了。

在線練習內容和更多示例能夠去這裏看看：
http://www.hubwiz.com/course/55b87a7b3ad79a1b05dcc339