什么是Meteor?
Meteor是高性能Javascript全端開(kāi)發(fā)框架
優(yōu)勢(shì):
- Javascript 全平臺(tái)單一語(yǔ)言開(kāi)發(fā)
- 跨平臺(tái)開(kāi)發(fā) iOS Android Browser Mobile
- 熱部署
- 前后端可以同時(shí)操作數(shù)據(jù)庫(kù)
- 實(shí)時(shí)系統(tǒng)
- 代碼壓縮混淆部署都由Meteor透明完成
- 可以使用npm擴(kuò)展
Meteor Collections(數(shù)據(jù)庫(kù) Mongodb)
每個(gè)Collections對(duì)應(yīng)MongoDB的一個(gè)表
Create
Languages=new Mongo.Collection('languages');
增刪改查
Languages.insert({})
Languages.find({})
Languages.remove({})
Languages.update()
html,css,js
Meteor規(guī)定，在一個(gè)模板文件里，只能出現(xiàn)三種頂層標(biāo)簽：head褒傅、body和template。css樣式最終也會(huì)合并后呈現(xiàn)給用戶.
最終, Meteor會(huì)編譯合并后呈現(xiàn)給用戶.
模板語(yǔ)言
{{spacebars}} 基于流行的handlebars,{{> hello}}模板標(biāo)簽用來(lái)調(diào)用一個(gè)子模板
加載順序
- 應(yīng)用程序根目錄下的 lib 目錄里的文件最先加載懦铺。
- 然后是所有文件名匹配 main.* 的文件。
- 子目錄里的文件在父目錄之前加載支鸡，所以先加載最深層的文件冬念，根目錄下的文件最后加載。
- 在一個(gè)目錄中苍匆，文件按照文件名的字母順序加載刘急。
目錄結(jié)構(gòu)
-
client 參與打包的前端代碼文件夾, 相當(dāng)與使用
if(Meter.isClient){...}進(jìn)行前端代碼隔離的效果 -
server 參與打包的后端代碼文件夾, 相當(dāng)與使用
if(Meter.isServer){...}進(jìn)行后端代碼隔離的效果, 敏感代碼(如身份驗(yàn)證)放在此目錄 -
public 不參與打包的前端資源文件夾,相當(dāng)于
http虛擬根目錄 -
client/compatibility 不參與打包的前端兼容庫(kù)目錄, 全局var變量,會(huì)在其他前端
JavaScript文件之前執(zhí)行 - test 僅用于測(cè)試,前后端都不會(huì)使用
Meteor 函數(shù)
helper
<template name="test">
<h1>Hello,{{displayName "Jason" "Mr."}}!</h1>
</template>
//JS聲明如下
Template.test.helpers({
'displayName' : function(name,title){
return title + ' ' + name;
}
});
// 渲染后
<h1>Hello,Mr. Jason!</h1>
Meteor.flush 使DOM立刻更新
Meteor.render 渲染HTML
preserve 指定模板重新渲染后保留的元素
Meteor 安全
封裝直接操作數(shù)據(jù)庫(kù)操作方法
meteor remove insecure
Meteor.methods({
// 增刪改查
// 權(quán)限驗(yàn)證
method_name:function(...args){},...
});
Meteor.call('method_name',..args);
禁用自動(dòng)發(fā)布
meteor remove autopublish
if (Meteor.isServer) {
Meteor.publish("tasks", function () {
return Tasks.find();
});
}
if (Meteor.isClient) {
Meteor.subscribe("tasks");
}
Meteor 部署
meteor deploy
支持自定義域名, 可以操作服務(wù)器上的mongodb
自定義部署 meteor-up
$ meteor #1 先保證應(yīng)用是可以執(zhí)行運(yùn)行的
$ meteor build --directory ../rel # 構(gòu)建 Node.js 項(xiàng)目
$ cd ../rel/bundle
# 該目錄下 README 有詳細(xì)的介紹
$ (cd programs/server && npm install)
$ export MONGO_URL='mongodb://user:password@host:port/databasename'
$ export ROOT_URL='http://example.com'
$ export MAIL_URL='smtp://user:password@mailhost:port/'
$ export PORT=3000 # 默認(rèn) 80
$ node main.js
F&Q
如何使用npm package?
請(qǐng)?jiān)?a target="_blank" rel="nofollow">AtmosphereJS上搜索有無(wú)相關(guān)的封裝包。盡量采用已有的封裝包浸踩，而不是自己封裝叔汁。
有兩種方法在項(xiàng)目中使用來(lái)自npm的模塊。
- 封裝為Meteor包并在項(xiàng)目中添加包检碗。使用
meteor create 包名 --package來(lái)創(chuàng)建包据块，并通過(guò)將包目錄放置于項(xiàng)目的packages文件夾等方法向項(xiàng)目引入包。包中使用Npm.depends和Npm.require來(lái)引入npm模塊折剃。Meteor文檔-包中引入Npm模塊 http://cmeteor.org/t/meteor-npm/31 - 使用
meteorhacks:npm另假。meteorhacks:npm @ AtmosphereJS
如何使用Cordova插件？
一般在 http://plugins.cordova.io 上搜索插件包時(shí)就會(huì)提供插件包的全名和版本號(hào)怕犁。
meteor add cordova:org.apache.cordova.media@0.2.16
注意包名前要加cordova: 包名后要加@版本號(hào)
如何在一個(gè)域名下使用多個(gè)的APP?
Meteor的localstorage package存儲(chǔ)代碼:
if (key === retrieved) {
Meteor._localStorage = {
getItem: function (key) {
return window.localStorage.getItem(key);
},
setItem: function (key, value) {
window.localStorage.setItem(key, value);
},
removeItem: function (key) {
window.localStorage.removeItem(key);
}
};
}
這樣會(huì)導(dǎo)致app1和app2的value被覆蓋
改成:
if (key === retrieved) {
var path = window.location.pathname.replace(/^\/([^\/]*).*$/, '$1') + '.';
Meteor._localStorage = {
getItem: function (key) {
return window.localStorage.getItem(path + key);
},
setItem: function (key, value) {
window.localStorage.setItem(path + key, value);
},
removeItem: function (key) {
window.localStorage.removeItem(path + key);
}
};
}
則最終 www.example.com/app1 & www.example.com/app2 的value
app1.Meteor.userId
app1.Meteor.loginToken
app1.Meteor.loginTokenExpires
app2.Meteor.userId
app2.Meteor.loginToken
app2.Meteor.loginTokenExpires
觸發(fā)界面更新的reactive數(shù)據(jù)源有哪些?reactive上下文運(yùn)行的函數(shù)有哪些?
Meteor函數(shù)會(huì)在reactive上下文中運(yùn)行你的代碼:
- Templates
- Meteor.render 和 Meteor.renderList
- Meteor.autosubscribe
- Meteor.autorun
能夠觸發(fā)變化的reactive數(shù)據(jù)源：
- Session variables
- Database queries on Collections
- Meteor.status
- Meteor.user
- Meteor.userId
- Meteor.loggingIn
可以用Meteor.deps模塊“勾入”到上下文中边篮，以增加新的reactive上下文和數(shù)據(jù)源己莺。
