標籤：
Meteor是什麼基於nodejs的即時web APP開發架構。
Meteor能帶來什麼簡單的說，你可以用js搞定用戶端、服務端的開發。另外，用戶端、服務端的界限被極大的模糊。用戶端的介面跟服務端的資料是雙向繫結的，修改服務端的資料，使用者介面會隨著更新；你也可以在用戶端直接修改服務端的資料庫。
系統的歸納下，對於（前端）開發人員來說，可能比較迷人的點。
demo請點擊，參照官方demo進行的仿寫，進一步進行了簡化。也可直接參考官方demo
meteor的入門demo還是比較好上手的。跟著ste by step的教程走，基本就可以搗鼓出一個像樣的TODO LIST的demo了，所以這裡也不打算細講，只是挑一些重點備忘下。
首先，安裝meteor，然後通過meteor create這個命令建立一個新項目。
meteor create meteor-todo-list建立好的項目結構如下。
大致包含以下內容。有點像傳統的web頁面，1個HTML頁面，再加1個css檔案、1個js檔案。
.├── .meteor // 項目依賴的package，在這個小demo裡我們可以先忽略├── meteor-todo-list.css // 頁面相關的css├── meteor-todo-list.html // 頁面入口檔案└── meteor-todo-list.js // 頁面主邏輯開啟html頁面，你會發現只有head、body、template三個標籤。如果接觸過模版引擎的同學會有中熟悉之感。其中：
head、body兩個標籤中的內容，最終會被嵌入到輸出給終端使用者的HTML頁面中。template則定義了頁面需要用到的模版，有點向web component規範看齊的意味。舉例來說，head標籤中內容如下
<head> <title>程式猿小卡的meteor demo</title> </head我們訪問頁面就可以看到title為程式猿小卡
至於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官方介紹所說，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(‘‘); } });沒什麼好講的，跳過。。。
DDP協議DDP是 分布式資料協議 (Distributed Data Protocol)的簡稱，meteor雙向即時更新機制的底層依賴的就是這東東。官方協議
粗略瞄了下協議，大致有兩個特點：
實際看看例子。在chrome控制台下，切到WebSocket這個tab，就會看到不斷的有收發包。部分是使用者操作發出（如刪除操作），部分是用於保持通訊狀態的心跳包。（可以這樣翻譯吧。。）
協議比較長，內容本身倒是不複雜，有興趣的自行圍觀。。。
packagemeteor有自己的包管理機制，也有個專門的社區在維護 https://atmospherejs.com/ 。關於這個，有空再單獨拎出來講講。
編譯原生應用同樣沒什麼好講的，直接貼上官方文檔地址 https://www.meteor.com/try/7 ，有空再貼幾章。。
附錄TODO demo：https://github.com/chyingp/meteor-todo-list
官網：https://www.meteor.com/
入門教程：https://www.meteor.com/install
DDP協議：https://github.com/meteor/meteor/blob/devel/packages/ddp/DDP.md
Meteor入門
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
