一、傳統(tǒng)的JavaScript

傳統(tǒng)的js是運(yùn)行在瀏覽器上的，因?yàn)闉g覽器內(nèi)核分為兩個(gè)部分：

• 渲染引擎—渲染HTML和CSS
• JavaScript 引擎—負(fù)責(zé)運(yùn)行 JavaScript

隨著技術(shù)的發(fā)展， Chrome 使用的 JavaScript 引擎是 V8，它的速度非?？烨倚阅芎?，同時(shí)由2009年5月Ryan Dahl開(kāi)發(fā)的Node.js 誕生。

二、什么是Node.js?

Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。Node.js 使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式 I/O 的模型，使其輕量又高效。

Node 是一個(gè)讓 JavaScript 運(yùn)行在服務(wù)端的開(kāi)發(fā)平臺(tái)，它讓 JavaScript 成為與PHP、Python、Perl、Ruby 等服務(wù)端語(yǔ)言平起平坐的腳本語(yǔ)言。 發(fā)布于2009年5月，由Ryan Dahl開(kāi)發(fā)，實(shí)質(zhì)是對(duì)Chrome V8引擎進(jìn)行了封裝。

Node對(duì)一些特殊用例進(jìn)行優(yōu)化，提供替代的API，使得V8在非瀏覽器環(huán)境下運(yùn)行得更好。V8引擎執(zhí)行Javascript的速度非?？?，性能非常好。 Node是一個(gè)基于Chrome JavaScript運(yùn)行時(shí)建立的平臺(tái)， 用于方便地搭建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。Node 使用事件驅(qū)動(dòng)， 非阻塞I/O 模型而得以輕量和高效，非常適合在分布式設(shè)備上運(yùn)行數(shù)據(jù)密集型的實(shí)時(shí)應(yīng)用。

官網(wǎng)上對(duì)其特點(diǎn)描述為：

• 它是一個(gè)Javascript運(yùn)行環(huán)境
• 依賴(lài)于Chrome V8引擎進(jìn)行代碼解釋
• 事件驅(qū)動(dòng)
• 非阻塞I/O
• 輕量、可伸縮，適于實(shí)時(shí)數(shù)據(jù)交互應(yīng)用
• 單進(jìn)程，單線程

相對(duì)于傳統(tǒng)的JavaScript來(lái)說(shuō)，Node.js 是一個(gè)運(yùn)行在服務(wù)端的框架，它的底層就使用了 V8 引擎。

我們知道 Apache + PHP 以及 Java 的 Servlet 都可以用來(lái)開(kāi)發(fā)動(dòng)態(tài)網(wǎng)頁(yè)，Node.js 的作用與他們類(lèi)似，只不過(guò)是使用 JavaScript 來(lái)開(kāi)發(fā)，它大大提升了開(kāi)發(fā)的性能以及便利。

1)使用node開(kāi)發(fā)還可以使用node自有配套的npm包管理工具：

NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問(wèn)題，常見(jiàn)的使用場(chǎng)景有以下幾種：

• 允許用戶(hù)從NPM服務(wù)器下載別人編寫(xiě)的第三方包到本地使用。
• 允許用戶(hù)從NPM服務(wù)器下載并安裝別人編寫(xiě)的命令行程序到本地使用。
• 允許用戶(hù)將自己編寫(xiě)的包或命令行程序上傳到NPM服務(wù)器供別人使用。
• Node.js 的使用包管理器 npm來(lái)管理所有模塊的安裝、配置、刪除等操作，使用起來(lái)非常方便。

2)node本身就是一個(gè)服務(wù)端的框架

對(duì)于一些簡(jiǎn)單的項(xiàng)目，我們可以不需要后端配合，直接用node進(jìn)行數(shù)據(jù)庫(kù)的增刪改查(但是我們一般不使用這個(gè)功能)；

3)nodejs是一個(gè)服務(wù)js平臺(tái)

有自身帶的npm(基于 Node.js的前端項(xiàng)目包管理工具)，有第三方的grunt(基于 Node.js的前端項(xiàng)目構(gòu)建工具即即腳手架)、有第三方的express(路由功能)等強(qiáng)大的代碼與項(xiàng)目管理應(yīng)用。還有自身帶的webpack(基于 Node.js的前端項(xiàng)目部署打包工具)，v8(谷歌客戶(hù)端瀏覽器 javascript 引擎)等強(qiáng)大的功能。

npm(包管理工具)

• 基于 Node.js的前端項(xiàng)目包管理工具，是項(xiàng)目中對(duì)各種程序包的依賴(lài)管理，傳統(tǒng)的開(kāi)發(fā)項(xiàng)目主要是后端，現(xiàn)在技術(shù)在更新，前端有了框架的開(kāi)發(fā)模式管理，也需要用包管理工具的思想去管理，目的是簡(jiǎn)化第三方程序包在項(xiàng)目中引用復(fù)雜化。
• 前端的js包是全世界JavaScript 天才開(kāi)發(fā)共享的各種代碼模塊，把這些代碼模塊都按照一個(gè)獨(dú)立的軟件功能統(tǒng)一在一個(gè)庫(kù)中，一個(gè)代碼模塊是一個(gè)程序包(package，即代碼模塊)。
• 它是世界上最大的軟件注冊(cè)表，每星期大約有 30 億次的下載量，包含超過(guò) 600000 個(gè) 包(package) (即，代碼模塊)，使用包的結(jié)構(gòu)使您能夠輕松跟蹤依賴(lài)項(xiàng)和版本。　　
• 官網(wǎng)：https://www.npmjs.cn/

webpack

• 基于 Node.js的前端項(xiàng)目部署打包工具。
• grunt是基于 Node.js的前端JS語(yǔ)言項(xiàng)目構(gòu)建工具，即腳手架。一句話：構(gòu)建項(xiàng)目自動(dòng)化。
• 對(duì)于需要反復(fù)重復(fù)的任務(wù)，例如壓縮(minification)、編譯、單元測(cè)試、linting等，自動(dòng)化工具可以減輕你的勞動(dòng)，簡(jiǎn)化你的工作。
• 當(dāng)你在 Gruntfile 文件正確配置好了任務(wù)，任務(wù)運(yùn)行器就會(huì)自動(dòng)幫你或你的小組完成大部分無(wú)聊的工作。
• 官網(wǎng)：https://www.gruntjs.net/

Express

• 是一個(gè)保持最小規(guī)模的靈活的 Node.js Web 應(yīng)用程序開(kāi)發(fā)框架，為 Web 和移動(dòng)應(yīng)用程序提供一組強(qiáng)大的功能。

三、Vue

首先vue.js 是庫(kù)，不是框架，不是框架，不是框架。Vue.js 使用了基于 HTML 的模版語(yǔ)法，允許開(kāi)發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。Vue.js 的核心是一個(gè)允許你采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。vue.js 支持路由功能開(kāi)發(fā)的 叫vue-route.js，vue.js支持?jǐn)?shù)據(jù)請(qǐng)求功能開(kāi)發(fā)的 叫vue-resource.js。

vue.js 下載過(guò)來(lái)直接在html中引入就能使用，并不一定要npm install vue，那為什么業(yè)務(wù)開(kāi)發(fā)需求場(chǎng)景下需要使用NPM呢？NPM是仕么？Vue.js可以在html里直接引用后使用，等到與Vue一起配合使用的第三方應(yīng)用的庫(kù)或框架多起來(lái)后，一個(gè)個(gè)從html里引入就不方便了，所有要借用node.js中的npm管理包的引入，是方便包管理。

使用Vue.js開(kāi)發(fā)的前端項(xiàng)目如何部署？我們用到node.js中的程序打包工具比如webpack(node.js中的程序部署打包工具)，可以直接require引入之后將不同模塊打包成單個(gè)js文件。同時(shí)這些工具提供各種自動(dòng)化處理，讓前端開(kāi)發(fā)更爽。

Vue.js是數(shù)據(jù)驅(qū)動(dòng)，和JQuery思路不同，你幾乎不需要自己進(jìn)行復(fù)雜低效的dom操作，開(kāi)發(fā)簡(jiǎn)介明了。從這一點(diǎn)上說(shuō)，可以基本拋棄JQuery了。

Vue.js開(kāi)發(fā)有第三方支持的項(xiàng)目構(gòu)建工具，vue-cli腳手架

通過(guò)上面的分析，與其說(shuō)是VUE需要借助NODE開(kāi)發(fā)前端項(xiàng)目，不如換個(gè)思路，在NODE中集成VUE開(kāi)發(fā)前端項(xiàng)目，所以，先安裝Node,使用Node的npm先安裝Vue，然后再安裝vue-cli腳手架，最后通過(guò)vue-cli腳手架構(gòu)建前端項(xiàng)目。

再擴(kuò)展一下思路：

上述我們解讀了Vue與Node的關(guān)系，從他們之間的關(guān)系，刨根問(wèn)底，這個(gè)問(wèn)題的本質(zhì)是前端開(kāi)發(fā)思想的問(wèn)題，傳統(tǒng)前端開(kāi)發(fā)只是CSS3、HTML5、面向?qū)ο驤S的開(kāi)發(fā)，前端技術(shù)在近幾年發(fā)展迅速，如今的前端開(kāi)發(fā)己不再是 10 年前寫(xiě)個(gè) HTML 和 css 那樣簡(jiǎn)單 了，新的概念層出不窮，比如 ES6、 Node.js、 NPM、前端工程化、輕量級(jí)模板引擎、模塊化(如vue模塊vue-require.js)、組件化、預(yù)編譯、雙向數(shù)據(jù)綁定、路由(如vue路由vue-route.js、前端路由的框架通用的有 Director、Angular 的 ngRouter、React 的 ReactRouter)、狀態(tài)管 理、動(dòng)畫(huà)、、 SSR、前后端分離開(kāi)發(fā)等。這些新東西在不斷 優(yōu)化我們的開(kāi)發(fā)模式，改變我們的編程思想。

隨著這些技術(shù)的普及，出現(xiàn)一套可稱(chēng)為“萬(wàn)金油”的技術(shù)技被許多商業(yè)項(xiàng)目用于生產(chǎn)環(huán)境：jQuery + RequireJS ( SeaJS ) + artTemplate (doT) +Gulp (Grunt)是一種前端開(kāi)發(fā)方案。這套技術(shù)戰(zhàn)以 jQuery 為核心，能兼容絕大部分瀏覽器，這是很多企業(yè)比較關(guān)心的，因?yàn)樗麄?的客戶(hù)很可能還在用 IE7 及以下瀏覽器。使用 RequireJS 或 SeaJS 進(jìn)行模塊化開(kāi)發(fā)可以解決代碼依 賴(lài)混亂的問(wèn)題， 同時(shí)便于維護(hù)及團(tuán)隊(duì)協(xié)作。使用輕量級(jí)的前端模板(如 doT)可以將數(shù)據(jù)與 HTML 模板分離。最后，使用自動(dòng)化構(gòu)建工具(如 Gulp)可以合并壓縮代碼，如果你喜歡寫(xiě) Less、 Sass 以及現(xiàn)在流行的 ES 6，也可以幫你進(jìn)行預(yù)編譯。 這樣一套看似完美無(wú)瑕的前端解決方案就構(gòu)成了我們所說(shuō)的傳統(tǒng)前端開(kāi)發(fā)模式，由于它的簡(jiǎn) 單、 高效、實(shí)用， 至今仍有不少開(kāi)發(fā)者在使用。不過(guò)隨著項(xiàng)目的擴(kuò)大和時(shí)間的推移，出現(xiàn)了更復(fù)雜 的業(yè)務(wù)場(chǎng)景，比如 SPA (單頁(yè)面富應(yīng)用〉 、 組件解稍等。為了提升開(kāi)發(fā)效率，降低維護(hù)成本，傳 統(tǒng)的前端開(kāi)發(fā)模式己不能完全滿(mǎn)足我們的需求，這時(shí)就出現(xiàn)了如Angular、 React 以及我們要介紹 的主角 Vue 。

?從綜合解決方案來(lái)講，Node.js邁出第一步，為前端工程化開(kāi)發(fā)奠定了基礎(chǔ)，基于Node提供了項(xiàng)目腳手架、打包工具、包管理工具等等，基于Node誕生了Vue、Angular、 React等前端開(kāi)發(fā)思想，以及組裝搭配的前端開(kāi)發(fā)方案。

?在 Node.js 出現(xiàn)后，jQuery + RequireJS ( SeaJS ) + artTemplate (doT) +Gulp (Grunt)開(kāi)發(fā)組合又有了改善，就是所謂的大前端，得益于 Node.js 和 JavaScript 的語(yǔ)言特性， html 模板可以完全由前端來(lái)控制，同步或異步渲染完全由前端自由決定，并且由前端維 護(hù)一套模板，這就是為什么在服務(wù)端使用 artTemplate、 React 以及 Vue2 的原因。說(shuō)了這么多，到 底怎樣算是 SPA 呢？其實(shí)就是在前后端分離的基礎(chǔ)上，加一層前端路由。

?前端路由，即由前端來(lái)維護(hù)一個(gè)路由規(guī)則。實(shí)現(xiàn)有兩種，一種是利用 url 的 hash， 就是常說(shuō)的 錨點(diǎn)(刑， JavaScrip／通過(guò) hashChange 事件來(lái)監(jiān)聽(tīng) url 的改變， IE7 及以下需要用輪詢(xún)：另一種就是 HTML5 的 History 模式，它使 url 看起來(lái)像普通網(wǎng)站那樣，以“／”分剖，沒(méi)有＃，但頁(yè)面并沒(méi)有 跳轉(zhuǎn)，不過(guò)使用這種模式需要服務(wù)端支持，服務(wù)端在接收到所有的請(qǐng)求后，在fl指向同一個(gè) html 文 件，不然會(huì)出現(xiàn) 404。因此， SPA 只有一個(gè) ht時(shí)，整個(gè)網(wǎng)站所有的內(nèi)容都在這一個(gè) html 里，通過(guò) JavaScript 來(lái)處理。 前端路由的優(yōu)點(diǎn)有很多，比如頁(yè)面持久性，像大部分音樂(lè)網(wǎng)站，你都可以在播放歌曲的同時(shí) 跳轉(zhuǎn)到別的頁(yè)面，而音樂(lè)沒(méi)有中斷。再比如前后端徹底分離。前端路由的框架通用的有 Director (ht刷：／／github.com/flatiron/director )，不過(guò)更多還是結(jié)合具體框架來(lái)用，比如 Angular 的 ngRouter, React 的 ReactRouter，以及本節(jié)要介紹的 Vue 的 vue-router。 如果要獨(dú)立開(kāi)發(fā)一個(gè)前端路由，需要考慮到頁(yè)面的可插拔、頁(yè)面的生命周期、內(nèi)存管理等 問(wèn)題。Node的webpack打包的核心思想就是單頁(yè)面富應(yīng)用(SPA) 。

SPA 通常是由一個(gè)html文件和一堆按需 加載的 js 組成，它的 html 結(jié)構(gòu)可能會(huì)非常簡(jiǎn)單，比如：

<!DOCTYPE html>
 
<html lang=”zh-CN”>
 
<head>
 
    <meta charset=”UTF-8”>
 
    <title>webpack app</title>
 
    <link rel＝” stylesheet” href＝”dist/main.css ”>
 
</head>
 
<body> 
    <div id=” app”></div>
    <script type=”text/javascript” src=”dist/main.js ”></lcript> 
</body>
 
</html>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論