體驗meteor
27 May 2012What?
先很簡單的介紹下meteor，它的官網是： meteor.com ，官方的介紹是：
Meteor is a set of new technologies for building top-quality web apps in a fraction of the time, whether you're an expert developer or just getting started.
翻譯成中文大概就是：Meteor 是一套讓用戶在短時間內搭建一個高質量網頁應用的新技術，面向的用戶不僅是專業的開發者，還包括剛入門者。
它不是一種新語言，它應該算是一種開發框架，當然這和我們前端傳統認識的框架是不同的兩個概念。這是整個開發流程與方法的定義，一種新的開發模式。
Features
其官網上列了9個特點，就不一一復制了，我個人較喜歡的幾個特點是：
- Pure Javascript 這個不必多說，做為一個前端，這就是Meteor直接吸引我的主因
- Live page updates 開發時的頁面自動更新，這對開發效率是很有幫助的
- Clean, powerful data synchronization 強大的數據同步能力，(這個有人噴會有安全問題，但是不否認這個讓我在開發時體驗非常棒)
其它的一些特點就不多說的.
hello world
照例，先來一個hello world，看看Meteor是如何構建應用的，當然也看它是否真的是很方便的短時間內就能構建完成。
如果你的機器上還沒有安裝過Meteor，當然你得先把Meteor環境安裝到你的機器上，這是很簡單的一件事，打開終端，輸入如下命令執行即可：
$ curl install.meteor.com | sh
當然，meteor是依賴于nodejs的，所以，你得先確保機器上已有nodejs環境。
安裝好后，要創建一個簡單的hello world實在是太簡單了，因為你執行：
$ meteor create helloworld
創建一個新項目，meteor會新建一個名為helloworld的目錄，里面包括了三個文件:
? helloworld tree
.
├── helloword.css
├── helloword.html
└── helloword.js
你在此文件夾中啟動 meteor 服務，在瀏覽器中訪問： localhost:3000 就能看到helloworld已經成功運行了。
這樣可能會讓不了解的人有些迷惑，所以，我把helloworld文件夾清空，我們從零開始來創建一個helloworld.
Html
進入到helloworld文件夾，新建一個html文件: index.html。編輯 index.html:
1
<title>
Hello World
</title>
2
<body>
Hello World
</body>
啟動：meteor，在瀏覽器就能看到效果了。
Css
接著上面的，再新建一個 style.css 的文件，我們加點樣式看看，注意你的瀏覽器變化：
1
2
body
{
3
color
：
red
;
4
}
可以看到，當你保存style.css后，瀏覽器立即就做出了相應反應，這種實時反應開發結果的開發模式顯然是很能提高開發效率的，這不是meteor首創，有很多類似的庫與工具都能實現相似的效果，但是meteor是集體到自身內部的，你完全無需去特別的配置，非常的簡單，對于初學者來講是很是友好。
Template
meteor 提供了一種非常方便的模板機制，讓我們開發起來非常的舒服，比如上面的例子，我們再擴展開來，編輯index.html:
1
<head>
…
</head>
2
<body>
3
<h1>
Hello World
</h1>
4
{{> hello }}
5
</body>
6
<template
name=
"hello"
>
7
<p>
This is from template
</p>
8
</template>
當然，meteor也可以很方便的從javascript文件中定義變量，下面我們新建一個javascript文件 app.js，并寫入：
1
if
(
this
.
Template
)
2
Template
.
hello
.
who
=
function
()
{
3
return
'Lian Hsueh'
;
4
};
然后在html中通過 {{變量名}} 來訪問javascript文件定義的變量值。如：
1
<template
name=
"hello"
>
2
<p>
This is from template, and I am {{who}}
</p>
3
</template>
meteor的模板系統是非常強大的，后面在實例中可以慢慢體會。
后端？
講了這么多，好像一直是停留在瀏覽器端，難道就這么簡單么？顯然不是的，meteor是支持后端的，用的是nodejs，語言就是javascript。那如何開始編寫后端程序呢？其實上面的代碼中有一部分已要是在后端也運行著，就是 app.js。
我們可以做個簡單的測試來驗證一下，編輯app.js，加入一行：
1
console
.
log
(
'Hey, can you see me?'
);
2
保存后查看終端與瀏覽器console，都能見到輸出，證明 app.js 文件是同時運行在瀏覽器與服務端。
這就有疑問了，如果有的對象只能瀏覽器訪問，有的則只能服務端訪問，這怎么辦？
meteor很好的解決了這個問題，簡單的應用中，比如我們這個helloworld程序，只是包括很小部分的代碼，你可以直接在 app.js 中通過 Meteor.is_client 與 Meteor.is_server 來限定哪些在瀏覽器中執行，哪些只在服務端中執行，如上面的給模板設定變量的語句，只需要在瀏覽器端執行，則可以這樣寫：
1
if
(
Meteor
.
is_client
)
{
2
Template
.
hello
.
who
=
function
()
{
3
return
'Lian Hsueh'
;
4
};
5
}
而像一些可以同時應用于前后端的腳本，你就不需要做特別的處理了，一份代碼服務于前后端，比之前后端分離肯定是要高效很多。比如一個表單的驗證腳本，通常你要前端一個檢測的腳本，后端也要維護一份相同功能的代碼，而此時我們只需要維護一份代碼就好。
數據
一個完整的應用，必然要與數據打交道的，Meteor的數據通訊很棒，它操作數據也是異常的方便，如果使用過一些其它語言的ORM實現，應該能很好的去理解。
下面給helloworld添加點代碼，用來顯示從數據庫中取得到一個列表，修改 app.js，添加：
1
var
NameList
=
new
Meteor
.
Collection
(
'namelist'
);
2
if
(
Meteor
.
is_client
)
{
3
Template
.
hello
.
namelist
=
function
()
{
4
return
NameList
.
find
({});
5
};
6
}
然后修改 index.html：
1
<template
name=
"hello"
>
2
<p>
This is from template, and I am {{who}}
</p>
3
<ul>
4
{{#each namelist}}
5
<li>
{{ username }}
</li>
6
{{/each}}
7
</ul>
8
</template>
數據庫、表，這些都是直接與你代碼collection對應，你完全不需要去在意，在意你的代碼就行了。
此時數據庫還沒有數據，頁面中也不會顯示什么，要添加數據很簡單，你可以直接在瀏覽器console中執行
Namelist.insert({username: 'xyududu'});
來添加一些數據，相應的也有remove與update方法。meteor較神奇的是，你對無論你在何地對數據庫的操作都將實時的反應在頁面中，所以你可以很方便的在開發時利用瀏覽器console來測試你的應用。
實例講解
helloworld實在是太過簡單了，完全不能領略meteor的強大，下面來完全一個完整的應用，看看meteor在實際使用中的表現。
從實例著手，一般就是做個blog了，恰巧w3ctech長沙站的各位哥也要求有這么一個blog來分享聚合一些技術文章。索性，就開始寫這么一個blog程序，并讓其可在實際中應用。
源碼可到 github 獲取，這里只提幾個要點。
文件結構
要做一個較正式的應用，文件顯然不能亂放，特別是我們前端，涉及眾多javascrpt、css、images等等，如果隨意擺放越往后就越頭痛。我這里簡單規劃的一個文件結構如下：
? w3ctech tree
.
├── client //文件夾，瀏覽器端使用
├── server //文件夾，服務端使用
└── static //文件夾，主要存放圖片
數據結構
簡單點搞，先就一個文章的數據表結構如下：
Article -- {
title: String,
author: String,
content: String,
tags: [String, …],
createtime: Number
}
與Backbone結合
做web application，選一個好的前端MVC框架，會帶來很多便利，顯然 Meteor 與 Backbone 的結合是非常的理所應當。Meteor的官方也把 Backbone 做為一個內置 package。可以在命令行中很方便的給你的應用添加 backbone 支持:
$ meteor add backbone
另外我寫css一般都用less，所以順便我也把 less 引入進來：
$ meteor add less
meteor 現在可用命令添加的 package 有蠻多了，可至其官網查詢。
好，繼續說 Backbone， 先看下面代碼：
1
var
Blog
=
Backbone
.
Router
.
extend
({
2
routes
:
{
3
"admin"
:
"backend"
,
4
":article_id"
:
"showArticle"
,
5
""
:
'index'
6
},
7
index
:
function
()
{
8
Session
.
set
(
"article_id"
,
null
);
9
Session
.
set
(
"backend"
,
null
);
10
},
11
backend
:
function
()
{
12
if
(
$
.
cookie
(
'admin'
))
{
13
Session
.
set
(
"backend"
,
'post'
);
14
}
else
{
15
Session
.
set
(
"backend"
,
'login'
);
16
}
17
},
18
showArticle
:
function
(
_id
)
{
19
Session
.
set
(
"article_id"
,
_id
);
20
Session
.
set
(
"backend"
,
null
);
21
},
22
changeTo
:
function
(
_id
)
{
23
this
.
navigate
(
_id
,
true
);
24
}
25
26
});
27
28
Router
=
new
Blog
();
29
Meteor
.
startup
(
function
()
{
30
Backbone
.
history
.
start
({
pushState
:
true
});
31
});
如果你之前用 Backbone 寫過應用之類的，應該能很快理解上面的代碼，開啟一個全局路由，捕獲 url 的變化而執行相應的方法。這樣就很方便的控制應用的顯示，從而模擬出傳統頁面的切換。
內容的展示
Meteor 負責頁面渲染主要是通過模板，可以說你了解了如何控制模板，你就能用 Meteor 寫出牛B的應用。其實基本上所有的富前端應用都是非常的倚重模板的。
Meteor 的模板上面的提過一個是 Template，還有一個是 Meteor.ui，這兩個都是負責把數據組合到模板并渲染到頁面。我此次的 demo 大量的使用了 Template。
拿列表頁來說，主要功能就是把文章的標題與時間以列表的形式顯示在頁面中。查看其模板代碼:
1
<template
name=
"list"
>
2
<ul>
3
{{#each list}}
4
<li>
5
<time
datetime=
"{{createtime}}"
>
{{formarttime}}
</time>
6
<a
7
id=
"{{ _id }}"
8
href=
"/{{ _id}}"
>
{{ title }}
</a></li>
9
{{/each}}
10
</ul>
11
</template>
然后在javascrpt文件中可以直接以 Template.list 來操作這塊模板。比如這個例子中：
1
var
listTpl
=
Template
.
list
;
2
listTpl
.
list
=
function
()
{
3
return
Article
.
find
({});
4
};
5
listTpl
.
formarttime
=
function
()
{
6
return
moment
(
this
.
createtime
).
fromNow
();
7
}
8
listTpl
.
events
=
{
9
'click li>a'
:
function
(
_e
)
{
10
var
key
=
_e
.
target
.
id
;
11
Router
.
changeTo
(
key
);
12
return
false
;
13
}
14
};
指定 list 數據，還有一個 formarttime 是格式化時間，在模板中可以直接以 {{formarttime}} 來調用。
events
你的應用要與用戶交互，必然就離不開事件，根據用戶的操作而觸發不同的事件來響應用戶。 Meteor 的事件在模板中可以很方便的綁定，其實本質上應該是一個總的委托在模板上的事件。這種處理方式現在應該很常見了，比如 jquery 的 delegate()， Backbone 模板的事件處理也是類似的。
Meteor的事件可以直接綁在 Template 對象的 events 屬性上。如上面的：
1
listTpl
.
events
=
{
2
'click li>a'
:
function
(
_e
)
{
3
var
key
=
_e
.
target
.
id
;
4
Router
.
changeTo
(
key
);
5
return
false
;
6
}
7
};
deploy or host yourself
應用寫完了，如果你打算把服務托管到 meteor 上，那就非常方便，你可以直接命令行：
$ meteor deploy yourappname.meteor.com
上傳完成后，你就可以直接以：yourappname.meteor.com 來訪問你的應用了。
而且很舒服的一點是，你不需要去管你的javascript文件與css文件是否合并，是否壓縮，因為這些都是 meteor 會自動完成的。
當然你可以把應用托管在你自己的服務器中，你可以用 meteor bundle 來進行代碼打包，然后就可以方便的上傳到你自己的服務器了。
PPT
Meteor Intro ?on? Prezi
Related Posts
- 13 Aug 2012??? Socket.io 折騰記
- 27 Jun 2012??? Preload CSS/Javascript without execution [read and translate]
- 22 May 2012??? 關于腳本加載的一些事[高性能javascript讀書筆記]
Showing? 0 ?comments
??
Subscribe by email
?
??
Subscribe by RSS
Add New Comment
Optional: Login below.
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
