資訊專欄INFORMATION COLUMN
摘要：當一個應用啟動時，會自動加載這些庫，為應用提供了一個基礎環境。也就是說，模板文件只能包含以這三種標簽為頂層標簽的片段。在中，我們需要判斷當前的具體運行環境，以便執行相應的代碼。
一、全棧開發平臺 - 不僅僅是前端
Meteor和那些名聲如雷貫耳的前端框架，比如Angular, React等都不一樣，它是一個 采用單一開發語言的全棧開發的平臺：開發者可以使用JavaScript同時 進行前端和后端的開發，然后交給Meteor運行這個包含了前后端的完整應用：
從圖中你可以看到，Meteor在前端使用瀏覽器作為基礎運行環境，在后端則是以NodeJS作為 基礎運行環境，以MongoDB作為數據持久化系統。
Meteor提供了一個橫跨前端和后端的中間層平臺，預置封裝了很多功能庫，簡化了 Web應用的開發：使用單一語言快速開發Web應用，這是Meteor的最重要訴求。
二、初識Meteor從構成來講，可以認為Meteor開發平臺由兩部分構成：
Meteor庫 - 以功能包的形式存在，封裝了諸如實時通信、反應式編程之類的核心功能。當 一個Meteor應用啟動時，Meteor會自動加載這些庫，為應用提供了一個基礎環境。
Meteor工具 - 可以理解為命令行方式的開發環境，它使我們可以輕松地管理整個應用 開發流程：從創建應用、調試應用、自動化測試到打包、部署、熱升級。
現在，讓我們讓我們使用Meteor命令行工具meteor創建并啟動第一個Meteor應用吧。
1. 創建應用 —— meteor create [project]在終端中輸入meteor create test,然后按回車：
~$ meteor create test
這個命令將在當前目錄下創建一個子文件夾test，Meteor將使用內置的應用模板 作為這個文件夾的內容。我們可以進入test文件夾，執行ls命令查看一下內容：
~$ cd test ~/test$ ls -al
你可以看到Meteor創建了3個文件和1個目錄。
test.css - 前端的樣式表文件
test.html -前端的HTML文件
test.js - 前端/后端共用的JavaScript文件。
全棧，對吧O(∩_∩)O~
.meteor - 這個子目錄是Meteor應用必須的特殊子目錄，由Meteor平臺維護，我們不要動
先略過3個文件的具體內容，我們運行起來看看。
執行meteor命令啟動應用，在終端中輸入meteor，這等價于運行meteor run：
~/test$ meteor
當你看到終端中出現下面的提示信息：
... App running at: http://localhost:3000/
恭喜！我們的第一個Meteor應用已經運行起來了！
3.停止應用運行 —— Ctrl+C用鼠標左鍵點擊一下終端區域，確保它獲得鍵盤輸入焦點（你應該可以看到一個 閃爍的光標），然后同時按Ctrl鍵和C鍵，即可停止應用運行：
^C
~/test$
4.復位應用數據 —— meteor reset
Meteor應用運行時會生成打包文件、創建應用數據庫。可以使用下面命令 清理這些生成的文件和應用數據：
~/test$ meteor rest
meteor reset命令不影響你的源代碼文件。
三、模板文件 - test.html打開test.html，你可能會略有不適：
它不是一個標準的HTML文件：沒有html頂層標簽，奇怪的符號{{> hello}}... 不過，在Metoer中這樣的文件卻是合法的文件 —— 模板文件。
1.模板頂層標簽 —— head/body/templateMeteor規定，在一個模板文件里，只能出現三種頂層標簽：head、body和template。 也就是說，模板文件只能包含以這三種標簽為頂層標簽的HTML片段。
這是因為，Meteor在運行應用之前有一個打包/bundle的過程，此時Meteor會提取所有 模板文件（一個應用中可以有多個模板文件）中的head、body和template片段，分別進行 合并、編譯后才呈現給用戶：
上圖中，a.html和b.html中的head片段合并后作為最終的head內容，b.html和c.html中 的body片段合并后作為最終的body內容，至于c.html中的template的內容，則最終替換了 b.html中的{{> hello}}。
2.模板語言 —— SpacebarsMeteor的模板使用的語言是私有的spacebars語言，它基于流行的handlebars，通過 在HTML片段中嵌入模板標簽（以兩對大括號為邊界）實現模板化。因此，Meteor的模板 其實就是HTML標簽和模板標簽的混合體。
{{> hello}}模板標簽用來調用一個子模板，Meteor將在最終呈現給用戶的HTML文檔中， 使用子模板hello的內容進行原地替換。
特殊的template標簽用來定義一個子模板。
{{counter}}模板標簽執行插值工作，Meteror將在最終呈現給用戶的HTML文檔中，使用 標識符counter對應的值進行原地替換。
四、樣式文件 - test.css和模板文件類似，Meteor在打包過程中，會將所有的樣式文件合并成一個大的樣式文件， 然后在呈現給用戶的HTML文檔中引用這個樣式文件：
上圖中，a.css和b.css的內容將被合并為一個文件，并在最終呈現給用戶的HTML文檔中， 使用link標簽引用這個文件。
五、代碼文件 - test.jstest.js是最有趣的文件，Meteor將在前端和后端同時運行這個文件。可以這樣理解：
前端 - Meteor將在最終呈現給用戶的HTML文檔中使用script標簽引用test.js
后端 - Meteor將通過NodeJS讀入并運行test.js
毫無疑問，如果不做任何處理，誰也沒法保證一段JS代碼既可以在前端瀏覽器環境中運行， 也可以在后端NodeJS中運行。在test.js中，我們需要判斷當前的具體運行環境，以便 執行相應的代碼。
1.判斷代碼執行環境 —— Meteor.isClient/Meteor.isServer讓同一個js文件即可以跑在前端，也可以跑在后端（比如NodeJS），已經有很多 應用了，只需要判斷下在某個特定環境才存在的變量就可以了（比如，NodeJS有global，而 瀏覽器有window）。Meteor提供了一組更加清晰的API來實現這個判斷：
Meteor.isClient - 為真時，表示當前運行環境為前端
Meteor.isServer - 為真時，表示當前運行環境為后端
你可以看到，在test.js中也是這么做的：
//test.js
if(Meteor.isClient){
//僅在前端執行的代碼塊
}
if(Meteor.isServer){
//僅在后端執行的代碼塊
}
2.前后端都執行的代碼
很顯然，如果在test.js中，不判斷執行環境的代碼將同時在前端和后端運行。比如：
//test.js
console.log("Hello,Meteor!");
if(Meteor.isClient){...}
if(Meteor.isServer){...}
運行應用后，你將在后臺的終端中看到Hello,Meteor!，也將在前臺的調試臺 中看到相同的輸出。
六、前端代碼 - 模板實例對象回憶下，在模板文件test.html中，我們定義了一個模板：
You"ve pressed the button {{counter}} times.
當Meteor運行這個應用時，將自動創建一個對應的模板實例對象:Template.hello。 對模板的數據綁定和事件綁定，這些通常需要使用JavaScript實現的功能，就通過這 個對象來實現:
在hello模板中，{{counter}}模板標簽中的標識符couter的值，將由對應模板實例 對象的counter函數返回值決定，這個函數被稱為模板的helper函數，使用模板實例的 helpers()方法聲明模板標簽中標識符對應的helper函數。
而通過模板實例對象的events方法，則為模板中的button元素掛接了click事件監聽處理 函數。
七、前端代碼 - 模板標簽標識符解析/helper使用Template.hello.helpers(helpers)方法聲明hello模板中模板標簽標識符的解析函數。參數helpers是一個JS對象，屬性表示應用在模板標簽中的標識符，值 通常是一個函數，被稱為helper，大致是幫助Meteor解析模板中的標識符的值 這樣的意思。
比如，在test.js中我們為hello模板中出現在{{counter}}模板標簽中的counter表達 式聲明其對應的helper函數：
//test.js
Template.hello.helpers({
"counter":function(){
return Session.get("counter");
}
});
每次當Meteor需要對模板標簽{{counter}}進行計算時，都將調用其counter標識符 對應的helper函數進行計算：它簡單地返回Session變量counter的當前值。
1.為helper函數設定參數helper函數可以接受參數，比如對于模板test中的displayName標識符：
Hello,{{displayName "Jason" "Mr."}}!
聲明如下的helper函數：
Template.test.helpers({
"displayName" : function(name,title){
return title + " " + name;
}
});
那么Meteor渲染后將獲得如下的HTML結果：
2.使用常量helperHello,Mr. Jason!
當然，也可以將helper定義為一個常量：
Template.test.helpers({
displayName : "Mr. WHOAMI"
})
這時，模板標簽{{displayName}}將永遠地被設定為固定的值了。
在線練習內容和更多示例可以去這里看看：
http://www.hubwiz.com/course/55b87a7b3ad79a1b05dcc339
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/18784.html
摘要：自從一年前發布了小書的電子書，也有些日子沒有碰過它們了，現在因為項目的緣故，需要使用全棧開發。說起來搭建全棧開發環境，設計到的東西真的不少。這個案例的數據模型就是對一個，的對象進行創建刪除列表。 自從一年前發布了Vuejs小書的電子書，也有些日子沒有碰過它們了，現在因為項目的緣故，需要使用JavaScript全棧開發。所以，我得把這個全棧環境搭建起來。 說起來搭建JS全棧開發環境，設計...
摘要：注冊成功后會返回注冊用戶的此就是上面說到的，用于用戶登陸的基礎，請保管好。 地址 https://github.com/billyhoomm...http://blog.billyhu.com 說明（Instructions） 本項目后臺基于express、mongodb，前臺基于Vue2.0全家桶、bootstrap、scss預編譯器以及一眾工具類插件 項目前后臺代碼在同一個目錄中...
摘要：注冊成功后會返回注冊用戶的此就是上面說到的，用于用戶登陸的基礎，請保管好。 地址 https://github.com/billyhoomm...http://blog.billyhu.com 說明（Instructions） 本項目后臺基于express、mongodb，前臺基于Vue2.0全家桶、bootstrap、scss預編譯器以及一眾工具類插件 項目前后臺代碼在同一個目錄中...
摘要：注冊成功后會返回注冊用戶的此就是上面說到的，用于用戶登陸的基礎，請保管好。 地址 https://github.com/billyhoomm...http://blog.billyhu.com 說明（Instructions） 本項目后臺基于express、mongodb，前臺基于Vue2.0全家桶、bootstrap、scss預編譯器以及一眾工具類插件 項目前后臺代碼在同一個目錄中...
摘要：原文來源全棧初體驗前言據說現在不會點后臺的前端都找不到工作了嚇得我這幾天看起了和并且做了一個應該算是最簡單的前后端例子，如圖輸入賬戶密碼，提交表單，保存信息到數據庫再重定向到頁面獲取數據庫中的信息，渲染在瀏覽器上具體代碼主要技術前端模板后臺 原文來源： 全棧初體驗 前言 據說現在不會點后臺的前端都找不到工作了嚇得我這幾天看起了Nodejs和MongoDB并且做了一個應該算是最簡單的前后...
閱讀 3305·2021-09-30 09:54
閱讀 3801·2021-09-22 15:01
閱讀 3109·2021-08-27 16:19
閱讀 2577·2019-08-29 18:39
閱讀 2160·2019-08-29 14:09
閱讀 632·2019-08-26 10:23
閱讀 1340·2019-08-23 12:01
閱讀 1869·2019-08-22 13:57
