Meteor 開始

開始

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

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

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

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

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

選擇不安裝 Meteor

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

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

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

創(chuàng)建簡單的應用

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

$ meteor create microscope

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

.meteor
microscope.css
microscope.html
microscope.js

Meteor 生成的應用只是一個簡單的骨架，演示一些簡單的模式。

雖然這個應用沒什么功能，但也能運行。要運行應用，請切換到終端，輸入下面的命令：

$ cd microscope
$ meteor

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

在 GitHub 上查看

恭喜！你的第一個 Meteor 應用順利運行了。順便說一下，如果想停止運行程序，只要切換到對應的終端窗口按 ctrl+c 鍵即可。

如果你使用 Git，正是時候用 git init 來初始化你的項目倉庫。

再見 Meteorite

曾經(jīng)有段時間，Meteor 依賴于外部代碼包管理器 Meteorite。自從 Meteor 0.9.0 版本以后，就不再需要 Meteorite 了，因為它的功能已經(jīng)融入 Meteor 之中。

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

添加代碼包

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

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

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

截至寫這本書時，underscore 代碼包依然算作 Meteor “官方”的代碼包，所以這個包沒有作者：

meteor add twbs:bootstrap
meteor add underscore

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

在 GitHub 上查看

一旦你添加了 Bootstrap 代碼包，你應會注意到我們應用的變化：

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

關(guān)于代碼包

Meteor 中的代碼包有點特殊，分為五種：

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

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

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

請在 microscope 文件夾中新建四個子文件夾：/client，/server，/public 和 /lib。然后在 /client 文件夾中新建兩個空文件：main.html 和 main.js。如果程序無法運行了先別擔心，從下一章開始我們會編寫代碼。

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

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

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

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

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

對此如果你想了解更多，我們強烈建議你參閱 Meteor 官方文檔。

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

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

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

不需要 public 文件夾？

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

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

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

對于歷史悠久的下劃線命名法（my_variable）和駝峰命名法（myVariable）我們認為選擇哪種并不重要，只要你堅持在項目中貫徹它。

在本書中，我們將采用駝峰命名法，因為它是 JavaScript 中的慣例（畢竟它叫 JavaScript 而不是 java_script 呀！）。

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

搞定 CSS

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

CSS 文件將被 Meteor 自動加載并簡化。因此，不同于其它的靜態(tài)文件都被放置于 /public 文件夾，請將 CSS 文件放入 /client 文件夾。請創(chuàng)建一個 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 說明

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

meteor add coffeescript