一、傳統(tǒng)的JavaScript

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

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

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

二、什么是Node.js?

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

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

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

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

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

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

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

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

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

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

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

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

3)nodejs是一個服務(wù)js平臺

有自身帶的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(谷歌客戶端瀏覽器 javascript 引擎)等強(qiáng)大的功能。

npm(包管理工具)

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

webpack

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

Express

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

三、Vue

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

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

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

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

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

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

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

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

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

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

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

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

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

<!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é)

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

最新評論