摘要：當(dāng)一個(gè)應(yīng)用啟動(dòng)時(shí)，會(huì)自動(dòng)加載這些庫(kù)，為應(yīng)用提供了一個(gè)基礎(chǔ)環(huán)境。也就是說(shuō)，模板文件只能包含以這三種標(biāo)簽為頂層標(biāo)簽的片段。在中，我們需要判斷當(dāng)前的具體運(yùn)行環(huán)境，以便執(zhí)行相應(yīng)的代碼。

Meteor和那些名聲如雷貫耳的前端框架，比如Angular, React等都不一樣，它是一個(gè) 采用單一開發(fā)語(yǔ)言的全棧開發(fā)的平臺(tái)：開發(fā)者可以使用JavaScript同時(shí) 進(jìn)行前端和后端的開發(fā)，然后交給Meteor運(yùn)行這個(gè)包含了前后端的完整應(yīng)用：

從圖中你可以看到，Meteor在前端使用瀏覽器作為基礎(chǔ)運(yùn)行環(huán)境，在后端則是以NodeJS作為 基礎(chǔ)運(yùn)行環(huán)境，以MongoDB作為數(shù)據(jù)持久化系統(tǒng)。

Meteor提供了一個(gè)橫跨前端和后端的中間層平臺(tái)，預(yù)置封裝了很多功能庫(kù)，簡(jiǎn)化了 Web應(yīng)用的開發(fā)：使用單一語(yǔ)言快速開發(fā)Web應(yīng)用，這是Meteor的最重要訴求。

從構(gòu)成來(lái)講，可以認(rèn)為Meteor開發(fā)平臺(tái)由兩部分構(gòu)成：

Meteor庫(kù) - 以功能包的形式存在，封裝了諸如實(shí)時(shí)通信、反應(yīng)式編程之類的核心功能。當(dāng) 一個(gè)Meteor應(yīng)用啟動(dòng)時(shí)，Meteor會(huì)自動(dòng)加載這些庫(kù)，為應(yīng)用提供了一個(gè)基礎(chǔ)環(huán)境。

Meteor工具 - 可以理解為命令行方式的開發(fā)環(huán)境，它使我們可以輕松地管理整個(gè)應(yīng)用 開發(fā)流程：從創(chuàng)建應(yīng)用、調(diào)試應(yīng)用、自動(dòng)化測(cè)試到打包、部署、熱升級(jí)。

現(xiàn)在，讓我們讓我們使用Meteor命令行工具meteor創(chuàng)建并啟動(dòng)第一個(gè)Meteor應(yīng)用吧。

在終端中輸入meteor create test,然后按回車：

~$ meteor create test

這個(gè)命令將在當(dāng)前目錄下創(chuàng)建一個(gè)子文件夾test，Meteor將使用內(nèi)置的應(yīng)用模板 作為這個(gè)文件夾的內(nèi)容。我們可以進(jìn)入test文件夾，執(zhí)行l(wèi)s命令查看一下內(nèi)容：

~$ cd test
~/test$ ls -al

你可以看到Meteor創(chuàng)建了3個(gè)文件和1個(gè)目錄。

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

test.html -前端的HTML文件

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

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

.meteor - 這個(gè)子目錄是Meteor應(yīng)用必須的特殊子目錄，由Meteor平臺(tái)維護(hù)，我們不要?jiǎng)?br>先略過(guò)3個(gè)文件的具體內(nèi)容，我們運(yùn)行起來(lái)看看。

執(zhí)行meteor命令啟動(dòng)應(yīng)用，在終端中輸入meteor，這等價(jià)于運(yùn)行meteor run：

~/test$ meteor

當(dāng)你看到終端中出現(xiàn)下面的提示信息：

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

恭喜！我們的第一個(gè)Meteor應(yīng)用已經(jīng)運(yùn)行起來(lái)了！

用鼠標(biāo)左鍵點(diǎn)擊一下終端區(qū)域，確保它獲得鍵盤輸入焦點(diǎn)（你應(yīng)該可以看到一個(gè) 閃爍的光標(biāo)），然后同時(shí)按Ctrl鍵和C鍵，即可停止應(yīng)用運(yùn)行：

    ^C
    ~/test$

Meteor應(yīng)用運(yùn)行時(shí)會(huì)生成打包文件、創(chuàng)建應(yīng)用數(shù)據(jù)庫(kù)。可以使用下面命令 清理這些生成的文件和應(yīng)用數(shù)據(jù)：

~/test$ meteor rest

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

打開test.html，你可能會(huì)略有不適：

它不是一個(gè)標(biāo)準(zhǔn)的HTML文件：沒有html頂層標(biāo)簽，奇怪的符號(hào){{> hello}}... 不過(guò)，在Metoer中這樣的文件卻是合法的文件 —— 模板文件。

Meteor規(guī)定，在一個(gè)模板文件里，只能出現(xiàn)三種頂層標(biāo)簽：head、body和template。 也就是說(shuō)，模板文件只能包含以這三種標(biāo)簽為頂層標(biāo)簽的HTML片段。

這是因?yàn)?，Meteor在運(yùn)行應(yīng)用之前有一個(gè)打包/bundle的過(guò)程，此時(shí)Meteor會(huì)提取所有 模板文件（一個(gè)應(yīng)用中可以有多個(gè)模板文件）中的head、body和template片段，分別進(jìn)行 合并、編譯后才呈現(xiàn)給用戶：

上圖中，a.html和b.html中的head片段合并后作為最終的head內(nèi)容，b.html和c.html中 的body片段合并后作為最終的body內(nèi)容，至于c.html中的template的內(nèi)容，則最終替換了 b.html中的{{> hello}}。

Meteor的模板使用的語(yǔ)言是私有的spacebars語(yǔ)言，它基于流行的handlebars，通過(guò) 在HTML片段中嵌入模板標(biāo)簽（以兩對(duì)大括號(hào)為邊界）實(shí)現(xiàn)模板化。因此，Meteor的模板 其實(shí)就是HTML標(biāo)簽和模板標(biāo)簽的混合體。

{{> hello}}模板標(biāo)簽用來(lái)調(diào)用一個(gè)子模板，Meteor將在最終呈現(xiàn)給用戶的HTML文檔中， 使用子模板hello的內(nèi)容進(jìn)行原地替換。

特殊的template標(biāo)簽用來(lái)定義一個(gè)子模板。

{{counter}}模板標(biāo)簽執(zhí)行插值工作，Meteror將在最終呈現(xiàn)給用戶的HTML文檔中，使用 標(biāo)識(shí)符counter對(duì)應(yīng)的值進(jìn)行原地替換。

和模板文件類似，Meteor在打包過(guò)程中，會(huì)將所有的樣式文件合并成一個(gè)大的樣式文件， 然后在呈現(xiàn)給用戶的HTML文檔中引用這個(gè)樣式文件：

上圖中，a.css和b.css的內(nèi)容將被合并為一個(gè)文件，并在最終呈現(xiàn)給用戶的HTML文檔中， 使用link標(biāo)簽引用這個(gè)文件。

test.js是最有趣的文件，Meteor將在前端和后端同時(shí)運(yùn)行這個(gè)文件?？梢赃@樣理解：

前端 - Meteor將在最終呈現(xiàn)給用戶的HTML文檔中使用script標(biāo)簽引用test.js

后端 - Meteor將通過(guò)NodeJS讀入并運(yùn)行test.js

毫無(wú)疑問(wèn)，如果不做任何處理，誰(shuí)也沒法保證一段JS代碼既可以在前端瀏覽器環(huán)境中運(yùn)行， 也可以在后端NodeJS中運(yùn)行。在test.js中，我們需要判斷當(dāng)前的具體運(yùn)行環(huán)境，以便 執(zhí)行相應(yīng)的代碼。

讓同一個(gè)js文件即可以跑在前端，也可以跑在后端（比如NodeJS），已經(jīng)有很多 應(yīng)用了，只需要判斷下在某個(gè)特定環(huán)境才存在的變量就可以了（比如，NodeJS有g(shù)lobal，而 瀏覽器有window）。Meteor提供了一組更加清晰的API來(lái)實(shí)現(xiàn)這個(gè)判斷：

Meteor.isClient - 為真時(shí)，表示當(dāng)前運(yùn)行環(huán)境為前端

Meteor.isServer - 為真時(shí)，表示當(dāng)前運(yùn)行環(huán)境為后端

你可以看到，在test.js中也是這么做的：

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

很顯然，如果在test.js中，不判斷執(zhí)行環(huán)境的代碼將同時(shí)在前端和后端運(yùn)行。比如：

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

運(yùn)行應(yīng)用后，你將在后臺(tái)的終端中看到Hello,Meteor!，也將在前臺(tái)的調(diào)試臺(tái) 中看到相同的輸出。

回憶下，在模板文件test.html中，我們定義了一個(gè)模板：

當(dāng)Meteor運(yùn)行這個(gè)應(yīng)用時(shí)，將自動(dòng)創(chuàng)建一個(gè)對(duì)應(yīng)的模板實(shí)例對(duì)象:Template.hello。 對(duì)模板的數(shù)據(jù)綁定和事件綁定，這些通常需要使用JavaScript實(shí)現(xiàn)的功能，就通過(guò)這 個(gè)對(duì)象來(lái)實(shí)現(xiàn):

在hello模板中，{{counter}}模板標(biāo)簽中的標(biāo)識(shí)符couter的值，將由對(duì)應(yīng)模板實(shí)例 對(duì)象的counter函數(shù)返回值決定，這個(gè)函數(shù)被稱為模板的helper函數(shù)，使用模板實(shí)例的 helpers()方法聲明模板標(biāo)簽中標(biāo)識(shí)符對(duì)應(yīng)的helper函數(shù)。

而通過(guò)模板實(shí)例對(duì)象的events方法，則為模板中的button元素掛接了click事件監(jiān)聽處理 函數(shù)。

使用Template.hello.helpers(helpers)方法聲明hello模板中模板標(biāo)簽標(biāo)識(shí)符的解析函數(shù)。參數(shù)helpers是一個(gè)JS對(duì)象，屬性表示應(yīng)用在模板標(biāo)簽中的標(biāo)識(shí)符，值 通常是一個(gè)函數(shù)，被稱為helper，大致是幫助Meteor解析模板中的標(biāo)識(shí)符的值 這樣的意思。

比如，在test.js中我們?yōu)閔ello模板中出現(xiàn)在{{counter}}模板標(biāo)簽中的counter表達(dá) 式聲明其對(duì)應(yīng)的helper函數(shù)：

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

每次當(dāng)Meteor需要對(duì)模板標(biāo)簽{{counter}}進(jìn)行計(jì)算時(shí)，都將調(diào)用其counter標(biāo)識(shí)符 對(duì)應(yīng)的helper函數(shù)進(jìn)行計(jì)算：它簡(jiǎn)單地返回Session變量counter的當(dāng)前值。

helper函數(shù)可以接受參數(shù)，比如對(duì)于模板test中的displayName標(biāo)識(shí)符：

聲明如下的helper函數(shù)：

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

那么Meteor渲染后將獲得如下的HTML結(jié)果：

Hello,Mr. Jason!

當(dāng)然，也可以將helper定義為一個(gè)常量：

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

這時(shí)，模板標(biāo)簽{{displayName}}將永遠(yuǎn)地被設(shè)定為固定的值了。

在線練習(xí)內(nèi)容和更多示例可以去這里看看：
http://www.hubwiz.com/course/55b87a7b3ad79a1b05dcc339