Meteor入門介紹 - chyingp－IT工程師數位筆記本

文章出處

Meteor是什么

基于nodejs的實時web APP開發框架。

Meteor能帶來什么

簡單的說，你可以用js搞定客戶端、服務端的開發。另外，客戶端、服務端的界限被極大的模糊。客戶端的界面跟服務端的數據是雙向綁定的，修改服務端的數據，用戶界面會隨著更新；你也可以在客戶端直接修改服務端的數據庫。

系統的歸納下，對于（前端）開發者來說，可能比較吸引人的點。

統一開發語言：客戶端、服務端都可以用js搞定。
提高開發效率：開發者可以用10行左右的代碼就開發出一個具有多點實時更新的應用，因為底層框架已經幫你處理好了數據更新、數據同步以及界面更新的工作。
數據驅動下的多端同步更新機制：基于DDP協議，服務端數據的修改會引起客戶端界面的更新，同時客戶端對數據的改動也會同步到服務端。
統一插件系統：同樣的插件，可以同時運行在客戶端、服務端。
簡易熱部署：通過簡單的命令，即可快速部署到生產系統。同時對所有當前已鏈接的應用進行更新。
高實時性：通過巧妙的延遲補償策略，讓終端的用戶感覺是在訪問一個實時無延遲的應用。
原生應用：可通過編譯工具，將web app編譯成原生的終端應用程序
數據庫訪問：客戶端、服務端都可以直接訪問數據庫（安全性隱患）

getting started

demo請點擊，參照官方demo進行的仿寫，進一步進行了簡化。也可直接參考官方demo

meteor的入門demo還是比較好上手的。跟著ste by step的教程走，基本就可以搗鼓出一個像樣的TODO LIST的demo了，所以這里也不打算細講，只是挑一些重點備忘下。

首先，安裝meteor，然后通過meteor create這個命令創建一個新項目。

meteor create meteor-todo-list

創建好的項目結構如下。

Alt text

大致包含以下內容。有點像傳統的web頁面，1個HTML頁面，再加1個css文件、1個js文件。

.
├── .meteor  // 項目依賴的package，在這個小demo里我們可以先忽略
├── meteor-todo-list.css    // 頁面相關的css
├── meteor-todo-list.html  //  頁面入口文件
└── meteor-todo-list.js  // 頁面主邏輯

meteor-todo-list.html

打開html頁面，你會發現只有head、body、template三個標簽。如果接觸過模版引擎的同學會有中熟悉之感。其中：

head、body兩個標簽中的內容，最終會被嵌入到輸出給終端用戶的HTML頁面中。
template則定義了頁面需要用到的模版，有點向web component規范看齊的意味。

舉例來說，head標簽中內容如下

<head>
    <title>程序猿小卡的meteor demo</title>    
</head

我們訪問頁面就可以看到title為程序猿小卡

Alt text

至于body標簽，如果對handlebars熟悉的同學，大致就知道是干嘛用的了。{{>create}}引入定義好的模版，該模版的name為create。{{#each tasks}}則是對數據進行遍歷，至于數據源，下面會提到。

<body>
    {{>create}}

    <div class="todo-items">
        {{#each tasks}}
            {{>task}}
        {{/each}}
    </div>
</body>

我們再來看看這段模版。name為create，就可以在頁面里方便的通過create這個名字來引用這段模版（包括模版嵌套）。而模版數據會在 meteor-todo-list.js 小節提到。

<template name="create">
    <div class="">
        <input type="text" placehodler="輸入todo項" class="js-text" />
        <button class="js-add">創建</button>
    </div>
</template>

meteor-todo-list.js

打開meteor-todo-list.js，會看到一行顯眼的代碼。正如meteor官方介紹所說，meteor應用的代碼可以同時跑在客戶端、服務端。有些場景下，某些代碼只適合跑在客戶端，那么，就可以用下面的判斷。

if( Meteor.isClient ){
    //...
}

meteor-todo-list.html里其實就一堆模版。相應的，需要為這些模版提供數據。數據大都是存在數據庫的，那么就需要有數據庫操作。

除了數據之外，還要處理用戶交互，那么就涉及到事件綁定。

1、數據 & 數據庫操作

數據在meteor應用了扮演了極為重要的角色，作為實時雙向更新的引用，meteor服務端數據的修改，會導致客戶端界面的更新。同時，客戶端用戶操作導致的數據更新，也會實時同步到服務端。
比如這段代碼，意思就是，模版body用到的tasks數據，就是這個同名方法的返回值。

  Template.body.helpers({
    tasks: function(){
      return Tasks.find({});
    }
  });

比如頁面有這么一段無聊的模版，那么就可以通過Template.nonsense.helpers來注冊nonsense這段模版需要用到的數據。我們的頁面里其實沒有name為body的模版，這是因為內部做了特殊處理，body、head標簽默認當模板對待了。

<template name="nonsense">
    <p>hello {{nick}}</p>
</template>

下面來講數據庫操作，這里用到了人民大眾熱愛已久的mongodb。

首先，我們我們創建collections，對應的是一系列的文檔集合，下面我們做的就是對這個文檔集合進行操作，比如增、刪、改、查，這四大操作demo里都覆蓋到了。

var Tasks = new Mongo.Collection("tasks");

舉個例子，返回所有的task數據，類似mysql里的select *。

return Tasks.find({});

插入一條task。

Tasks.insert({text: value, createdAt: new Date()});

其余操作類似，這里不贅述，更多細節參考官方文檔。

2、事件綁定

相當直觀。以下面代碼為例。更多細節參考官方文檔

Template.create.events表示為 create 這個模版渲染出來的節點綁定事件。
click .js-add表示：為.js-add這個選擇器匹配中的節點監聽click事件。
event就是常規的事件對象。而template相當于模版自身的引用，可以通過template.$(selector)來選中模版內部的子節點。（類似backbone內部節點操作的設計）

  Template.create.events({
    'click .js-add': function(event, template){
      var ('.js-text'),
          value = $input.val();

      Tasks.insert({text: value, createdAt: new Date()});

      $input.val('');
    }
  });