前後端分離與Node和NPM的那些事

lonelyRoad發表於2019-03-04

前言

現在的前端同學如果去面試的話,面試的問題肯定會有你瞭解前後端分離嗎,你瞭解nodejs嗎?在沒有了解的時候感覺這是個什麼東西,好高大上,去網上查了查資料,再多做幾個demo,終於對傳說中的前後端分離以及nodejs有了一些瞭解。 其實在技術這個行業裡面沒有什麼是絕對好的技術也沒有什麼是過時的差的技術,只要合適的技術在合適的環境下他就是最好的技術,所以我們在學習一些新技術的時候,也不要覺著只要是新技術,是最新最熱門的技術就是最好的,其實它也是通過不同的行業背景行業環境以及一些以往的技術慢慢的衍生過度而來的。

什麼是前後端分離?

網上對於前後端分離的言論,簡析已經數不勝數,這裡我只是談一談通過我自己的學習實踐之後的一些我的認知,前後端之間使用 JSON 來交流,前端同學和後端同學制定好資料的格式以及介面API進行互動。從此,前端同學就不用再等後臺同學制定出介面之後再開發,就可以前後端同步開發,大大的提高了開發的效率。

我們真的需要前後端分離嗎?

這個問題就需要具體的業務需求和業務場景了,不過目前大多數網站開發尤其是注重使用者體驗的網站,都在做前後端分離,我們公司最開始開發官方網站的時候因為為了快速開發,而且最開始的時候使用者量比較少,後臺壓力也比較小,就使用的是jsp,服務端直接渲染,後來因為業務需求改變並且開發了微信端和APP,為了更好的使用者體驗以及更炫酷的圖形介面我們最終採用了前後端分離的開發模式

前後端分離的核心:後臺提供資料,前端負責顯示

最近前端大熱的什麼MVC,MVVM框架VUEJS,angularjs,Reactjs了一說就是為了更好的前後端分離開發,難道不用這幾個框架就不是前後端分離了嗎?當然不是的,只要不是服務端直接渲染的就是前後端分離,比如正常的生產環境之下,後臺同學給了我們前端同學一些資料介面我們用Ajax同後臺互動然後在前端頁面上操作這些資料這就是前後端分離,那為什麼vue,angular,react會大熱呢,以我自己學習瞭解之後感覺其實就是倆點。用我比較熟悉的vue框架來舉例說明。

1雙向繫結

一個所謂雙向繫結,用vue舉例來說就是vue例項中的data與其渲染的DOM元素的內容保持一致,無論誰被改變,另一方會相應的更新為相同的資料這是框架通過內部的封裝機制實現的,在我們日常開發比如這麼一個功能使用者需要修改一個表單內容而在其下方有個檢視是可以實時展示表單內容的,
而我們開發的時候就需要寫大量的js來互相監聽元素的內容和表單的內容是否發生了變化,而vue已經幫我們寫好了,只要我們按照它規定的語法進行配置就好了。

2依賴注入

vue內部已經編寫好了依賴,只有當路由跳轉的時候才會注入需要展示的頁面,而其他頁面則沒有載入,在小型專案中體現可能不是很明顯,大型專案的使用中會大大的提高網頁的載入效率,效能效率。

Node.js

Node.js的需求

在上面的三大框架流行的同時nodejs也根據需求因勢而出,在我們前後端分離做資料互動的時候,是依賴與後臺同學的介面地址的,如果後臺同學也在開發除錯的時候出現bug,或者是我們除錯請求介面出現問題就都互相影響,當然我們可以在頁面上先寫上假資料,等待最後開發完成後再清除掉所有的假資料,一個是當介面調通了之後頁面樣式還是多多少少有些差距,一個是需要清掉假資料很繁瑣,這樣nodejs就有了用武之地。我們前端同學就需要一個執行在瀏覽器端的伺服器。

Node.js的概念

簡單的說 Node.js 就是執行在服務端的 JavaScript。
Node.js 是一個基於Chrome JavaScript 執行時建立的一個平臺。
Node.js是一個事件驅動I/O服務端JavaScript環境,基於Google的V8引擎,V8引擎執行Javascript的速度非常快,效能非常好。

NPM

NPM是隨同NodeJS一起安裝的包管理工具,能解決NodeJS程式碼部署上的很多問題,常見的使用場景有以下幾種:
1 允許使用者從NPM伺服器下載別人編寫的第三方包到本地使用。
2 允許使用者從NPM伺服器下載並安裝別人編寫的命令列程式到本地使用。
3 允許使用者將自己編寫的包或命令列程式上傳到NPM伺服器供別人使用。
由於新版的nodejs已經整合了npm,所以之前npm也一併安裝好了。同樣可以通過輸入 “npm -v” 來測試是否成功安裝.

使用 npm 命令安裝模組

npm 安裝 Node.js 模組語法格式如下:
npm install <Module Name>

全域性安裝與本地安裝

npm 的包安裝分為本地安裝(local)、全域性安裝(global)兩種,從敲的命令列來看,差別只是有沒有-g而已,比如
npm install <Module Name> # 本地安裝
npm install <Module Name> -g # 全域性安裝

使用淘寶 NPM 映象

大家都知道國內直接使用 npm 的官方映象是非常慢的,這裡推薦使用淘寶 NPM 映象。
淘寶 NPM 映象是一個完整 npmjs.org 映象,你可以用此代替官方版本(只讀),同步頻率目前為 10分鐘 一次以保證儘量與官方服務同步。
你可以使用淘寶定製的 cnpm (gzip 壓縮支援) 命令列工具代替預設的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
這樣就可以使用 cnpm 命令來安裝模組了:
cnpm install [name]

相關文章