WWW和瀏覽器的那些事
時間倒回1995年的春天岗照,那是一個瀏覽器領域的亂世村象,隨著大神Tim Berners-Lee 寫出了第一個萬維網瀏覽器,瀏覽器行業(yè)群雄并起攒至,嶄露頭角的有IE還有Netscape的 Netscape Navigator等厚者。
從那以后互聯(lián)網進入了一段像工業(yè)革命這樣令世界大變的發(fā)展。
學習內容
后面要學習的內容如下:
- MondoDB
- Express
- AngularJS
- Node.js
需要的基礎知識
- HTML
- CSS
- JavaScript
MEAN 簡介
MEAN 框架是一個使用JavaScript的全椘韧拢框架库菲,MEAN是它的四塊組成部分的首字母縮寫:
- MongoDB 數(shù)據庫
- Express web服務端框架
- AngularJS web客戶端框架
- Node.js 客戶端平臺
不知道為啥要組合成Mean這個詞,知道它很mean志膀,聽起來總是怪怪的\(^o^)/~
MEAN 框架的優(yōu)勢:
- 一種語言編寫整個Web應用
- 框架的所有組成部分都支持MVC
- 數(shù)據裝配使用Json對象熙宇,對于數(shù)據的處理無需 Serialization 和 Deserializtion了。
安裝Node.js
這里講window版本的安裝溉浙,首先到官網下載安裝包:http://nodejs.org/ 然后跟著安裝向導一步步安裝即可烫止。安裝完畢后,在cmd鍵入 node -v,若顯示出node版本則說明node安裝成功馆蠕。新一些的版本Node都是自帶npm的,同樣互躬,可以在cmd里鍵入 nmp -v,若顯示版本則成功吼渡。
安裝MongoDB
這里講window版本的安裝,安裝包去mongoDB官網下載乓序,注意選擇與自己環(huán)境相同的版本比如我的系統(tǒng)是64位的:https://www.mongodb.com/download-center?jmp=nav
MongoDB的安裝稍微有一點繁瑣,mac系統(tǒng)的請參考這篇博客:
http://www.reibang.com/p/80fe2efad81c
初識Node.js
這一章將要了解的知識點有:
- Node.js簡介
- JavaScript閉包和時間驅動編程
- Node.js事件驅動Web開發(fā)
- CommonJS modules和Node.js的Module系統(tǒng)
- 接入Web框架的簡介
- 中間件
Node.js 簡介
Node.js是一個Javascript運行環(huán)境(runtime)替劈。實際上它是對Google V8引擎進行了封裝。V8引 擎執(zhí)行Javascript的速度非程е剑快咙俩,性能非常好耿戚。Node.js對一些特殊用例進行了優(yōu)化湿故,提供了替代的API阿趁,使得V8在非瀏覽器環(huán)境下運行得更好坛猪。Node.js是一個基于Chrome JavaScript運行時建立的平臺, 用于方便地搭建響應速度快墅茉、易于擴展的網絡應用。Node.js 使用事件驅動悍募, 非阻塞I/O 模型而得以輕量和高效洋机,非常適合在分布式設備上運行數(shù)據密集型的實時應用坠宴。
2009年2月绷旗,Ryan Dahl在博客上宣布準備基于V8創(chuàng)建一個輕量級的Web服務器并提供一套庫。
-百度百科
事件驅動
Node.js運用了JavaScript支持non-blocking操作的特點衔肢,這一特點使得平臺的效率比較高庄岖。JavaScript是一個事件驅動的語言角骤,這意味著一段代碼對應著特殊的事件。當事件被觸發(fā)后硼控,相應的代碼將會被執(zhí)行。這一特點允許開發(fā)者很容易的實現(xiàn)異步代碼牢撼。下面的例子可以幫助我們更好的理解事件驅動
一下是一段Java代碼:
System.out.print("What's your name?");
String name = System.console().readLine();
System.out.print("Your name is: "+ name)
在上面的例子中疑苫,編譯器會從第一行開始執(zhí)行代碼,然后第二行捍掺。但是在用戶輸入名字之前,編譯器不會繼續(xù)往下執(zhí)行曲横。這就是同步編程,一行I/O操作的代碼會卡住剩下的代碼。然而禾嫉,JavaScript并不是這樣工作的。
JavaScript最早是用來支持瀏覽器操作的語言熙参,它做的最多的這與瀏覽器操作事件相關的事。由于這種架構模式昭娩,HTML代碼會把事件代理給JavaScript代碼。
<span>What is your name?</span>
<input type=""text id="nameInput">
<input type="button" id="showNameButton" value="Show Name">
<script type="text/javascript">
var showNmaeButton = document.getElementById('showNameButton');
showNameButton.addEventListener('click', function(){
alert(document.getElementById('nameInput').value);
});
</script>
(待續(xù)....)