Meteor 開(kāi)始

開(kāi)始

第一印象十分重要，安裝 Meteor 并不會(huì)遇到什么困難。大多數(shù)情況下，在五分鐘內(nèi)便可以完成。

首先，如果在 Mac OS 或 Linux 系統(tǒng)下，你可以打開(kāi)終端窗口，輸入以下命令來(lái)安裝 Meteor：

$ curl https://install.meteor.com | sh

如果你使用 Windows 系統(tǒng)，請(qǐng)參考 Meteor 網(wǎng)站的 安裝指導(dǎo)。

以上命令會(huì)在系統(tǒng)中安裝 meteor 可執(zhí)行文件，然后就可以使用 Meteor 了。-

選擇不安裝 Meteor

如果你無(wú)法或者不想在本地安裝 Meteor ，我們推薦你使用 Nitrous.io。

使用 Nitrous.io 可以讓你在覽器中直接編輯代碼并運(yùn)行程序。我們撰寫了一篇簡(jiǎn)短的指南，介紹如何使用 Nitrous.io。

你可以一直閱讀那篇指南直到“Installing Meteor”部分，然后再回到本章，從“創(chuàng)建簡(jiǎn)單的應(yīng)用”一節(jié)開(kāi)始閱讀。

創(chuàng)建簡(jiǎn)單的應(yīng)用

安裝好 Meteor 之后，我們來(lái)創(chuàng)建一個(gè)應(yīng)用。創(chuàng)建應(yīng)用要使用 Meteor 的命令行工具 meteor：

$ meteor create microscope

上述命令會(huì)下載 Meteor，然后新建一個(gè)基本可用的 Meteor 項(xiàng)目。命令執(zhí)行完成后，會(huì)看到新建了一個(gè)文件夾，名為 microscope/，包含以下文件：

.meteor
microscope.css
microscope.html
microscope.js

Meteor 生成的應(yīng)用只是一個(gè)簡(jiǎn)單的骨架，演示一些簡(jiǎn)單的模式。

雖然這個(gè)應(yīng)用沒(méi)什么功能，但也能運(yùn)行。要運(yùn)行應(yīng)用，請(qǐng)切換到終端，輸入下面的命令：

$ cd microscope
$ meteor

現(xiàn)在打開(kāi)瀏覽器，訪問(wèn) http://localhost:3000（或者等效的 http://0.0.0.0:3000），應(yīng)該能看到下面的網(wǎng)頁(yè)：

在 GitHub 上查看

恭喜！你的第一個(gè) Meteor 應(yīng)用順利運(yùn)行了。順便說(shuō)一下，如果想停止運(yùn)行程序，只要切換到對(duì)應(yīng)的終端窗口按 ctrl+c 鍵即可。

如果你使用 Git，正是時(shí)候用 git init 來(lái)初始化你的項(xiàng)目倉(cāng)庫(kù)。

再見(jiàn) Meteorite

曾經(jīng)有段時(shí)間，Meteor 依賴于外部代碼包管理器 Meteorite。自從 Meteor 0.9.0 版本以后，就不再需要 Meteorite 了，因?yàn)樗墓δ芤呀?jīng)融入 Meteor 之中。

所以，如果你在這本書或在瀏覽 Meteor 相關(guān)的資料時(shí)，遇到 Meteorite 的 mrt 命令行工具，你可以放心地用 meteor 來(lái)替換它。

添加代碼包

下面我們使用 Meteor 的 package 系統(tǒng)在項(xiàng)目中引入 Bootstrap 框架。

這與通常手動(dòng)添加 Bootstrap 的 CSS 和 Javascript 文件的方法是沒(méi)有區(qū)別的，只不過(guò)我們依賴代碼包維護(hù)者來(lái)為我們更新這些文件。

既然我們說(shuō)到此，我們也來(lái)添加 Underscore 代碼包。 Underscore 是一個(gè) JavaScript 工具庫(kù)，對(duì)于操縱 JavaScript 數(shù)據(jù)結(jié)構(gòu)非常有用。

截至寫這本書時(shí)，underscore 代碼包依然算作 Meteor “官方”的代碼包，所以這個(gè)包沒(méi)有作者：

meteor add twbs:bootstrap
meteor add underscore

注意的是現(xiàn)在我們添加了 Bootstrap 3。而這本書中的一些截圖是老版本的 Microscope 使用 Bootstrap 2 時(shí)截取的，所有它們看起來(lái)會(huì)有稍微不同。

在 GitHub 上查看

一旦你添加了 Bootstrap 代碼包，你應(yīng)會(huì)注意到我們應(yīng)用的變化：

與“傳統(tǒng)”方式添加外部資源不同，我們還沒(méi)有鏈接任何 CSS 或 JavaScript 文件，因?yàn)?Meteor 已經(jīng)幫我們搞定了！這就是 Meteor 代碼包的眾多優(yōu)勢(shì)之一。

關(guān)于代碼包

Meteor 中的代碼包有點(diǎn)特殊，分為五種：

• Meteor 核心代碼本身分成多個(gè)核心代碼包（core package），每個(gè) Meteor 應(yīng)用中都包含，你基本上不需要花費(fèi)精力來(lái)維護(hù)它們
• 常規(guī) Meteor 代碼包稱為“isopack”，或同構(gòu)代碼包（isomorphic package，意味著它們既能在客戶端也能在服務(wù)器端工作）。第一類代碼包例如 accounts-ui 或 appcache 由 Meteor 核心團(tuán)隊(duì)維護(hù)，與 Meteor 捆綁在一起。
• 第三方代碼包就是其他用戶開(kāi)發(fā)的 isopack 上傳到 Meteor 的代碼包服務(wù)器上。你可以訪問(wèn) Atmosphere 或 meteor search 命令來(lái)瀏覽這些代碼包。
• 本地代碼包（local package）是自己開(kāi)發(fā)的代碼包，保存在 /packages 文件夾中。
• NPM 代碼包（NPM package）是 Node.js 的代碼包，雖不能直接用于 Meteor，但可以在上述幾種代碼包中使用

Meteor 應(yīng)用的文件結(jié)構(gòu)

開(kāi)始編寫代碼之前，我們必須要正確的設(shè)置項(xiàng)目。為了保證項(xiàng)目整潔，請(qǐng)打開(kāi) microscope 文件夾，刪除 microscope.html、microscope.js 和 microscope.css。

請(qǐng)?jiān)?microscope 文件夾中新建四個(gè)子文件夾：/client，/server，/public 和 /lib。然后在 /client 文件夾中新建兩個(gè)空文件：main.html 和 main.js。如果程序無(wú)法運(yùn)行了先別擔(dān)心，從下一章開(kāi)始我們會(huì)編寫代碼。

值得一提的是，上述文件夾中有一些擁有特別的作用。關(guān)于文件， Meteor 有以下幾條規(guī)則：

• 在 /server 文件夾中的代碼只會(huì)在服務(wù)器端運(yùn)行。
• 在 /client 文件夾中的代碼只會(huì)在客戶端運(yùn)行。
• 其它代碼則將同時(shí)運(yùn)行于服務(wù)器端和客戶端上。
• 請(qǐng)將所有的靜態(tài)文件（字體，圖片等）放置在 /public 文件夾中。

知道 Meteor 以什么順序加載文件也很有用：

• 在 /lib 文件夾中的文件將被優(yōu)先載入。
• 所有以 main.* 命名的文件將在其他文件載入后載入。
• 其他文件以文件名的字母順序載入。

需要注意的是，即便 Meteor 包含上述規(guī)則，這并不意味著它強(qiáng)制你為你的 Meteor 應(yīng)用采用任何預(yù)設(shè)的文件結(jié)構(gòu)。上述結(jié)構(gòu)只是我們的建議，并不是一成不變的。

對(duì)此如果你想了解更多，我們強(qiáng)烈建議你參閱 Meteor 官方文檔。

Meteor 采用 MVC 架構(gòu)嗎？

如果你之前有過(guò)在其它諸如 Ruby on Rails 框架下開(kāi)發(fā)的經(jīng)歷，此時(shí)你心中可能會(huì)有這樣的疑問(wèn)， Meteor 采用 MVC（Model View Controller）架構(gòu)嗎？

簡(jiǎn)短的回答是，不。與 Rails 不同，Meteor 并不為你的應(yīng)用強(qiáng)加任何預(yù)設(shè)的架構(gòu)。因此本書將直接給出我們認(rèn)為最合理的代碼，而不對(duì)任何現(xiàn)有架構(gòu)作過(guò)多考慮。

不需要 public 文件夾？

好吧，我們承認(rèn)在之前小小的忽悠了大家一下。其實(shí)我們并不需要為我們的應(yīng)用建立一個(gè) public/ 文件夾，因?yàn)?Microscope 并不需要使用任何的靜態(tài)文件。但是值得注意的是，大多數(shù) Meteor 應(yīng)用都會(huì)或多或少使用一些圖片，因此我們覺(jué)得 public/ 文件夾還是值得一談的。

另外，你可能注意到了一個(gè)隱藏的 .meteor 文件夾。這是 Meteor 存儲(chǔ)它內(nèi)部代碼的地方，嘗試更改里面的內(nèi)容并不是什么好主意。事實(shí)上，你根本不需要關(guān)心其中的內(nèi)容。有兩個(gè)例外是 .meteor/packages 文件和 .meteor/release 文件。它們分別列出了你安裝的所有智能代碼包和你使用的 Meteor 版本。當(dāng)你為你的應(yīng)用添加代碼包或更改 Meteor 版本時(shí)，查看這兩個(gè)文件的變更可能會(huì)為你帶來(lái)一些幫助。

下劃線命名法 vs 駝峰命名法

對(duì)于歷史悠久的下劃線命名法（my_variable）和駝峰命名法（myVariable）我們認(rèn)為選擇哪種并不重要，只要你堅(jiān)持在項(xiàng)目中貫徹它。

在本書中，我們將采用駝峰命名法，因?yàn)樗?JavaScript 中的慣例（畢竟它叫 JavaScript 而不是 java_script 呀?。?。

對(duì)此唯一的例外是，對(duì)文件的命名，我們將采用下劃線命名法（my_file.js）。對(duì)于 CSS 類，我們將使用連字號(hào)（.my-class）。這樣做的原因是在文件系統(tǒng)中，下劃線命名法最常見(jiàn)，而 CSS 語(yǔ)法本身就使用連字號(hào)作為連接（比如 font-family，text-align等）。

搞定 CSS

本書并不側(cè)重于 CSS 。所以為了避免在 CSS 細(xì)節(jié)上花費(fèi)過(guò)多時(shí)間，我們決定在本書一開(kāi)始就為大家提供完整的 CSS 文件。因此你不必再擔(dān)心這個(gè)問(wèn)題。

CSS 文件將被 Meteor 自動(dòng)加載并簡(jiǎn)化。因此，不同于其它的靜態(tài)文件都被放置于 /public 文件夾，請(qǐng)將 CSS 文件放入 /client 文件夾。請(qǐng)創(chuàng)建一個(gè) client/stylesheets/ 文件夾并將以下 style.css 文件放置入內(nèi)。

.grid-block, .main, .post, .comments li, .comment-form {
  background: #fff;
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 10px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }

body {
  background: #eee;
  color: #666666; }

#main {
  position: relative;
}
.page {
  position: absolute;
  top: 0px;
  width: 100%;
}

.navbar {
  margin-bottom: 10px; }
  /* line 32, ../sass/style.scss */
  .navbar .navbar-inner {
    border-radius: 0px 0px 3px 3px; }

#spinner {
  height: 300px; }

.post {
  /* For modern browsers */
  /* For IE 6/7 (trigger hasLayout) */
  *zoom: 1;
  position: relative;
  opacity: 1; }
  .post:before, .post:after {
    content: "";
    display: table; }
  .post:after {
    clear: both; }
  .post.invisible {
    opacity: 0; }
  .post.instant {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none; }
  .post.animate{
    -webkit-transition: all 300ms 0ms;
    -moz-transition: all 300ms 0ms ease-in;
    -o-transition: all 300ms 0ms ease-in;
    transition: all 300ms 0ms ease-in; }
  .post .upvote {
    display: block;
    margin: 7px 12px 0 0;
    float: left; }
  .post .post-content {
    float: left; }
    .post .post-content h3 {
      margin: 0;
      line-height: 1.4;
      font-size: 18px; }
      .post .post-content h3 a {
        display: inline-block;
        margin-right: 5px; }
      .post .post-content h3 span {
        font-weight: normal;
        font-size: 14px;
        display: inline-block;
        color: #aaaaaa; }
    .post .post-content p {
      margin: 0; }
  .post .discuss {
    display: block;
    float: right;
    margin-top: 7px; }

.comments {
  list-style-type: none;
  margin: 0; }
  .comments li h4 {
    font-size: 16px;
    margin: 0; }
    .comments li h4 .date {
      font-size: 12px;
      font-weight: normal; }
    .comments li h4 a {
      font-size: 12px; }
  .comments li p:last-child {
    margin-bottom: 0; }

.dropdown-menu span {
  display: block;
  padding: 3px 20px;
  clear: both;
  line-height: 20px;
  color: #bbb;
  white-space: nowrap; }

.load-more {
  display: block;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  text-align: center;
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px; }
  .load-more:hover {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.1); }

.posts .spinner-container{
  position: relative;
  height: 100px;
}

.jumbotron{
  text-align: center;
}
.jumbotron h2{
  font-size: 60px;
  font-weight: 100;
}

@-webkit-keyframes fadeOut {
  0% {opacity: 0;}
  10% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes fadeOut {
  0% {opacity: 0;}
  10% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}

.errors{
  position: fixed;
  z-index: 10000;
  padding: 10px;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  pointer-events: none;
}
.alert {
          animation: fadeOut 2700ms ease-in 0s 1 forwards;
  -webkit-animation: fadeOut 2700ms ease-in 0s 1 forwards;
     -moz-animation: fadeOut 2700ms ease-in 0s 1 forwards;
  width: 250px;
  float: right;
  clear: both;
  margin-bottom: 5px;
  pointer-events: auto;
}

重新整理文件結(jié)構(gòu)

CoffeeScript 說(shuō)明

在本書中我們將使用純 JavaScript。但是如果你更傾向于使用 CoffeeScript，Meteor 可以幫助你做到這點(diǎn)。你只需添加 CoffeeScript 代碼包，之后便可以在項(xiàng)目中使用 CoffeeScript 了！

meteor add coffeescript