言

前后端分離這個詞相信大家都聽過，不知道大家是怎么理解的呢。前陣子看項目的時候，有一段實現硬是沒看懂，下面來給大家說一下一段愚蠢的經歷哈。

(我沒正正式式寫過前端，所以如果文章有錯的地方希望可以在評論區友善交流~)

一、交代背景

我一直都知道我現在的這個系統是前后端分離的，我的接口只會返回JSON出去，但我不曾關心前端是怎么處理我的JSON數據的(以及他是怎么跑通和運行的)

在某一天，我在查接口的時候，習慣F12，想直接看一下這個請求返回的JSON數據是什么。但是一看，在network返回的是html格式：

于是，我就很好奇啊，就看一下這個接口是不是我想象中的那個。于是就去找我的接口，看一下是不是真的返回JSON(我還專門Debug了一下，看看是不是真請求到這個接口上了）：

得出的結果是：我的接口的確是返回JSON數據，瀏覽器的reponse返回的的確是HTML格式。

于是，我就去找我前端的小伙伴，去問了一下這是怎么搞的。他回復我說：“在瀏覽器看到返回的是頁面，那肯定是你們后端干的呀”

我說:“沒有啊，我Java接口返回的是JSON數據啊，是不是中途你們用node做了些處理啊？”(我之前聽過Node.js，但僅僅是聽過)

他說：“Node.js也是你們后端的啊。”

我一聽，啊？Node.js不是屬于前端的嗎？

二、初識Node.js

在遇到這個事情之前，其實我在知乎已經看了一個帖子，話題名是這個《畢設答辯，老師說node不可能寫后臺怎么辦?》

有興趣的小伙伴可以去了解一下，大多數內容還是挺通俗易懂的：

• www.zhihu.com/question/32…

我在下載Node.js的時候，發現其簡介十分簡潔：

Node.js? is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Node.js? 是一個基于 Chrome V8 引擎 的 JavaScript 運行時。

然后點進去Chrome V8引擎，再看了一下介紹：

V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others.

V8是Google的開源高性能JavaScript和WebAssembly引擎，用C ++編寫。它用于Chrome和Node.js等。

看了介紹，一臉懵逼，這是啥玩意啊。下面我來解釋一下

2.1 V8引擎是什么？

眾所周知，JavaScript是解析型語言，我們寫好的JavaScript代碼會由JavaScript引擎去解析，而V8是JavaScript引擎的一種。

• 在傳統意義上，我們會認為解析器是逐條解析（一邊執行一邊解析），但為了提高JavaScript的解析速度（相當于提高用戶體驗），在解析的時候做了點“手腳”。
• V8引擎：為了提高解析的性能，引入了一些“后端”的技術(不過他本來就由C++編寫的)。它是先將JavaScript源代碼轉成抽象語法樹，然后再將抽象語法樹生成字節碼。如果發現某個函數被多次調用或者是多次調用的循環體(熱點代碼)，那就會將這部分的代碼編譯優化。說白了就是：對熱點代碼做編譯，非熱點代碼直接解析。

總結：V8引擎是JavaScript引擎的一種，這個引擎由C++來編寫的，性能很不錯。

參考資料：

• zhuanlan.zhihu.com/p/27628685
• zhuanlan.zhihu.com/p/73768338

2.2回到Node.js

瀏覽器為了安全，沒有為JavaScript提供一套IO環境，而一門后端語言是肯定能進行網絡通信、文件讀寫(IO)的。

后來，有牛逼的人把V8引擎搬到了服務端上，在V8引擎的基礎上加了網絡通信、IO、HTTP等服務端的函數。取了一個名字叫：Node.js

• 比如通過libuv庫來進行文件讀取，以及建立TCP/UDP連接。通過xxx庫解析HTTP請求和響應....這些庫都是由C/C++來編寫的。

所以，Node.js是運行在服務端的，只不過在基礎語言是JavaScript。

三、前后端分離入門

回顧一下自己學JavaWeb的歷程：

• 剛學Servlet的時候，會在response對象上寫一些HTML代碼輸出到瀏覽器看效果
• 后來，學習到JSP了，就純粹用Servlet做控制，JSP做視圖。
• JSP本質上還是一個Servlet，只不過看起來像HTML文件，在編譯的時候還是會變成一個HttpJspPage類（該類是HttpServlet的一個子類）
• 再后來，學到了AJAX技術，發現我們完全可以通過AJAX來進行交互。AJAX請求Servlet，Servlet返回JSON數據回去，AJAX拿到Servlet返回的數據進行解析和處理。這里壓根就不需要JSP了(純HTML+AJAX)，這算是前后端分離的一種了
• 在開發上體驗：如果完全使用HTML+AJAX的話，會發現其實需要寫非常非常多的JavaScript代碼，而且這些JavaScript代碼都不好復用。
• 在部署上，還是跟Java一起部署(放在resource下)，沒有將前端單獨部署。
• 再后來，學到了一些在常用的模板引擎（比如freemarker)，其實用起來跟JSP沒多大的區別，只不過性能要比JSP好不少。
• ...流下不學無術的淚水

目前我了解到的前后端分離，首先部署是分離的(至少不會跟Java綁定在一起部署)：

Java接口只返回JSON數據：

關于前端這幾大框架：angular/vue/react這幾個我都是沒有寫過的，所以也就不多BB了。我一直想知道的是：前框框架和node是啥關系。問了一下前端的小伙伴，他回復是大致這樣的：

前端現在是講究工程化的，工程化用到了node而已(就是打包編譯那些會用到，項目里面真正跑起來的話是沒有這些東西的)

-----------以下引用摘錄：

Webpack、Less、Sass、Gulp、Bower以及這些工具的插件都是Node上開發的---@知乎陳龍

舉個例子：隨著發展，前端的JavaScript需要依賴的包也非常復雜，類比于Java我們會有Maven，而前端現在有npm （包管理）

• 而npm是隨同Node.js一起安裝的。所以前端(vue/angular/react)在開發環境下都是離不開Node.js的(編譯、打包等等)

參考資料（為什么要使用 npm）：

• zhuanlan.zhihu.com/p/24357770

3.1 方式一(Nginx+Server)

OK，現在假設我們用前端(vue/angular/react)開發完，開發環境下將JavaScript編譯/打包完，那我們能得到純靜態的文件。我們可以直接將純靜態文件放到Nginx(CDN)等等地方【只要能夠響應HTTP請求就行】。

如果請求是調用后端服務，則經過Nginx轉發到后端服務器，完成響應后經Nginx返回到瀏覽器。

3.2 方式二（加入Node.js)

在前邊的基礎上加入Node.js，至于為啥要Node.js，一個重要的原因就是：加快首屏渲染速度，解決SEO問題

加入Node.js，此時的請求流程應該是這樣的：

瀏覽器發起的請求經過前端機的Nginx進行分發.

URL請求統一分發到Node Server，在Node Server中根據請求類型從后端服務器上通過RPC服務請求頁面的模板數據，然后進行頁面的組裝和渲染；

API請求則直接轉發到后端服務器，完成響應。

最后

好的，現在問題來了：你是覺得Node.js歸屬在后端還是前端？

小結

歡迎關注頭條號:JAVA大飛哥

覺得收獲的話可以點個關注收藏轉發一波喔，謝謝大佬們支持！

私信本頭條號：發送：“免費資料”就可以獲取微服務、分布式、高并發、高可用，性能優化丶源碼分析等等一些技術資料

最后，每一位讀到這里的Java程序猿朋友們，感謝你們能耐心地看完。希望在成為一名更優秀的Java程序猿的道路上，我們可以一起學習、一起進步！都能贏取白富美，走向架構師的人生巔峰!

年來，從事JavaScript的程序員越來越多，JavaScript的曝光率也越來越高，如果你想轉行試試JavaScript，不妨收下這份面試題及答案，沒準用得上。當然，如果針對這些問題，你有更棒的答案，歡迎移步至評論區。

1、什么是JavaScript？（這是基本題，對很多程序員來說也是送分題！）

JavaScript是客戶端和服務器端腳本語言，可以插入到HTML頁面中，并且是目前較熱門的Web開發語言。同時，JavaScript也是面向對象編程語言。

類似的基本題目還包括：JavaScript都有哪些類型?JavaScript是誰發明的？......

2、列舉Java和JavaScript之間的區別？

Java是一門十分完整、成熟的編程語言。相比之下，JavaScript是一個可以被引入HTML頁面的編程語言。這兩種語言并不完全相互依賴，而是針對不同的意圖而設計的。 Java是一種面向對象編程（OOPS）或結構化編程語言，類似的如C ++或C，而JavaScript是客戶端腳本語言，它被稱為非結構化編程。

3. JavaScript和ASP腳本相比，哪個更快？

JavaScript更快。JavaScript是一種客戶端語言，因此它不需要Web服務器的協助來執行。另一方面，ASP是服務器端語言，因此總是比JavaScript慢。值得注意的是，Javascript現在也可用于服務器端語言（nodejs）。

4、什么是負無窮大？

負無窮大是JavaScript中的一個數字，可以通過將負數除以零來得到。

5、如何將JavaScript代碼分解成幾行嗎？

在字符串語句中可以通過在第一行末尾使用反斜杠“\”來完成

例：document.write("This is \a program");

如果不是在字符串語句中更改為新行，那么javaScript會忽略行中的斷點。

例：

var x=1, y=2,

z=

x+y;

上面的代碼是完美的，但并不建議這樣做，因為阻礙了調試。

6、什么是未聲明和未定義的變量？

未聲明的變量是程序中不存在且未聲明的變量。如果程序嘗試讀取未聲明變量的值，則會遇到運行時錯誤。未定義的變量是在程序中聲明但尚未給出任何值的變量。如果程序嘗試讀取未定義變量的值，則返回未定義的值。

7、如何編寫可動態添加新元素的代碼？

8、什么是全局變量？這些變量如何聲明，使用全局變量有哪些問題？

全局變量是整個代碼長度可用的變量，也就是說這些變量沒有任何作用域。var關鍵字用于聲明局部變量或對象。如果省略var關鍵字，則聲明一個全局變量。

例：// Declare a global globalVariable=“Test”;

使用全局變量所面臨的問題是本地和全局變量名稱的沖突。此外，很難調試和測試依賴于全局變量的代碼。

9、解釋JavaScript中定時器的工作？如果有，也可以說明使用定時器的缺點？

定時器用于在設定的時間執行一段代碼，或者在給定的時間間隔內重復該代碼。這通過使用函數setTimeout，setInterval和clearInterval來完成。

• setTimeout（function，delay）函數用于啟動在所述延遲之后調用特定功能的定時器。

• setInterval（function，delay）函數用于在提到的延遲中重復執行給定的功能，只有在取消時才停止。

• clearInterval（id）函數指示定時器停止。

定時器在一個線程內運行，因此事件可能需要排隊等待執行。

10、ViewState和SessionState有什么區別？

“ViewState”特定于會話中的頁面。

“SessionState”特定于可在Web應用程序中的所有頁面上訪問的用戶特定數據。

11、什么是===運算符？

===被稱為嚴格等式運算符，當兩個操作數具有相同的值而沒有任何類型轉換時，該運算符返回true。

12、說明如何使用JavaScript提交表單？

要使用JavaScript提交表單，請使用

document.form [0] .submit（）;

document.form [0] .submit（）

13、元素的樣式/類如何改變？

可以通過以下方式完成：

document.getElementById(“myText”).style.fontSize=“20?;

或

document.getElementById(“myText”).className=“anyclass”;

14、JavaScript中的循環結構都有什么？

For、While、do-while loops

15、如何在JavaScript中將base字符串轉換為integer？

parseInt() 函數解析一個字符串參數，并返回一個指定基數的整數。parseInt（）將要轉換的字符串作為其第一個參數，第二個參數是給定字符串的基礎。

為了將4F（基數16）轉換為整數，所使用的代碼是 ：parseInt ("4F", 16);

16、說明“==”和“===”之間的區別？

“==”僅檢查值相等，而“===”是一個更嚴格的等式判定，如果兩個變量的值或類型不同，則返回false。

17、3 + 2 +“7”的結果是什么？

由于3和2是整數，它們將直接相加。由于7是一個字符串，它將會被直接連接，所以結果將是57。

18、說明如何檢測客戶端機器上的操作系統？

為了檢測客戶端機器上的操作系統，應使用navigator.appVersion字符串（屬性）。

19、Javascript中的NULL是什么意思？

NULL用于表示無值或無對象。它意味著沒有對象或空字符串，沒有有效的布爾值，沒有數值和數組對象。

20、delete操作符的功能是什么？

delete操作符用于刪除程序中的所有變量或對象，但不能刪除使用VAR關鍵字聲明的變量。

21、JavaScript中有哪些類型的彈出框？

Alert、Confirm and、Prompt

22、Void（0）怎么用？

• Void（0）用于防止頁面刷新，并在調用時傳遞參數“zero”。

• Void（0）用于調用另一種方法而不刷新頁面。

23、如何強制頁面加載JavaScript中的其他頁面？

必須插入以下代碼才能達到預期效果：

24、escape字符是用來做什么的？

使用特殊字符（如單引號，雙引號，撇號和＆符號）時，將使用轉義字符（反斜杠）。在字符前放置反斜杠，使其顯示。

例：

25、什么是JavaScript Cookie？

Cookie是用來存儲計算機中的小型測試文件，當用戶訪問網站以存儲他們需要的信息時，它將被創建。

26、解釋JavaScript中的pop（）方法？

pop（）方法與shift（）方法類似，但不同之處在于Shift方法在數組的開頭工作。此外，pop（）方法將最后一個元素從給定的數組中取出并返回。然后改變被調用的數組。

例：

var cloths=[“Shirt”, “Pant”, “TShirt”];

cloths.pop();

//Now cloth becomes Shirt,Pant

27、在JavaScript中使用innerHTML的缺點是什么？

如果在JavaScript中使用innerHTML，缺點是：內容隨處可見；不能像“追加到innerHTML”一樣使用；即使你使用+=like“innerHTML=innerHTML +'html'”舊的內容仍然會被html替換；整個innerHTML內容被重新解析并構建成元素，因此它的速度要慢得多；innerHTML不提供驗證，因此我們可能會在文檔中插入有效的和破壞性的HTML并將其中斷。

28、break和continue語句的作用？

• Break語句從當前循環中退出。

• continue語句繼續下一個循環語句。

29、在JavaScript中，dataypes的兩個基本組是什么？

• Primitive

• Reference types

原始類型是數字和布爾數據類型。引用類型是更復雜的類型，如字符串和日期。

30、如何創建通用對象？

通用對象可以創建為：

var I=new object();

31、operator類型用來做什么？

'Typeof'是一個運算符，用于返回變量類型的字符串描述。

32、哪些關鍵字用于處理異常？

try... Catch-finally用于處理JavaScript中的異常。

33、JavaScript中不同類型的錯誤有幾種？

有三種類型的錯誤：

• Load time errors：該錯誤發生于加載網頁時，例如出現語法錯誤等狀況，稱為加載時間錯誤，并且會動態生成錯誤。

• Run time errors：由于在HTML語言中濫用命令而導致的錯誤。

• Logical Errors：這是由于在具有不同操作的函數上執行了錯誤邏輯而發生的錯誤。

34、在JavaScript中使用的Push方法是什么？

push方法用于將一個或多個元素添加或附加到數組的末尾。使用這種方法，可以通過傳遞多個參數來附加多個元素。

35、什么是JavaScript中的unshift方法？

Unshift方法就像在數組開頭工作的push方法。該方法用于將一個或多個元素添加到數組的開頭。

36、對象屬性如何分配？

屬性按以下方式分配給對象：

obj["class"]=12;

或

obj.class=12;

37、獲得CheckBox狀態的方式是什么？

alert（document.getElementById（'checkbox1'）。checked）;

如果CheckBox被檢查，此警報將返回TRUE。

38、解釋window.onload和onDocumentReady？

在載入頁面的所有信息之前，不運行onload函數。這導致在執行任何代碼之前會出現延遲。

onDocumentReady在加載DOM之后加載代碼。這允許早期的代碼操縱。

39、你將如何解釋JavaScript中的閉包？ 什么時候使用？

Closure是與函數返回時保留在內存中的函數相關的本地聲明變量。

例如：

40、一個值如何附加到數組？

可以以給定的方式將值附加到數組：

arr [arr.length]=value;

41、解釋for-in循環？

for-in循環用于循環對象的屬性。

for-in循環的語法是：

在每次循環中，來自對象的一個屬性與變量名相關聯，循環繼續，直到對象的所有屬性都被耗盡。

42、描述JavaScript中的匿名函數？

被聲明為沒有任何命名標識符的函數被稱為匿名函數。一般來說，匿名函數在聲明后無法訪問。

匿名函數聲明：

43、.call（）和.apply（）之間有什么區別？

函數.call（）和.apply（）在使用上非常相似，只是有一點區別。當程序員知道函數參數的編號時，使用.call（），因為它們必須在調用語句中被提及為參數。另一方面，當不知道數字時使用.apply（）,函數.apply（）期望參數為數組。

.call（）和.apply（）之間的基本區別在于將參數傳遞給函數。它們的用法可以通過給定的例子進行說明。

44、定義事件冒泡？

JavaScript允許DOM元素嵌套在一起。在這種情況下，如果單擊子級的處理程序，父級的處理程序也將執行同樣的工作。

45、什么樣的布爾運算符可以在JavaScript中使用？

“And”運算符（&&），'Or'運算符（||）和'Not'運算符（！）可以在JavaScript中使用。

*運算符沒有括號。

46、一個特定的框架如何使用JavaScript中的超鏈接定位？

可以通過使用“target”屬性在超鏈接中包含所需幀的名稱來實現。

<a href=”newpage.htm” target=”newframe”>>New Page</a>

47、在web-garden和web-farm之間有何不同？

web-garden和web-farm都是網絡托管系統。唯一的區別是web-garden是在單個服務器中包含許多處理器的設置，而web-farm是使用多個服務器的較大設置。

48、如何分配對象屬性？

將屬性分配給對象的方式與賦值給變量值相同。例如，表單對象的操作值以下列方式分配為“‘submit”：Document.form.action=“submit”

49、在JavaScript中讀取和寫入文件的方法是什么？

可以通過使用JavaScript擴展（從JavaScript編輯器運行），打開文件的示例來完成：

fh=fopen(getScriptPath(), 0);

50、在JavaScript中如何使用DOM？

DOM代表文檔對象模型，并且負責文檔中各種對象的相互交互。DOM是開發網頁所必需的，其中包括諸如段落，鏈接等對象。可以操作這些對象以包括添加或刪除等操作，DOM還需要向網頁添加額外的功能。除此之外，API的使用比其他更有優勢。

51、JavaScript中如何使用事件處理程序？

事件是由用戶生成活動（例如單擊鏈接或填寫表單）導致的操作。需要一個事件處理程序來管理所有這些事件的正確執行。事件處理程序是對象的額外屬性。此屬性包括事件的名稱以及事件發生時采取的操作。

52、解釋延遲腳本在JavaScript中的作用？

默認情況下，在頁面加載期間，HTML代碼的解析將暫停，直到腳本停止執行。這意味著，如果服務器速度較慢或者腳本特別沉重，則會導致網頁延遲。在使用Deferred時，腳本會延遲執行直到HTML解析器運行。這減少了網頁加載時間，并且它們的顯示速度更快。

53、JavaScript中的各種功能組件是什么？

JavaScript中的不同功能組件是：

• First-class函數：JavaScript中的函數被用作第一類對象。這通常意味著這些函數可以作為參數傳遞給其他函數，作為其他函數的值返回，分配給變量，也可以存儲在數據結構中。

• 嵌套函數：在其他函數中定義的函數稱為嵌套函數。

54、解釋unshift（）方法？

該方法在數組啟動時起作用，與push（）不同。 它將所需數量的元素添加到數組的頂部。例如：

輸出如下所示：

[" joseph "," Jane ", " charlie ", " john "]

55、decodeURI（）和encodeURI（）是什么？

EncodeURl（）用于將URL轉換為十六進制編碼。而DecodeURI（）用于將編碼的URL轉換回正常。

56、為什么不建議在JavaScript中使用innerHTML？

innerHTML內容每次刷新，因此很慢。 在innerHTML中沒有驗證的余地，因此，更容易在文檔中插入錯誤代碼，從而使網頁不穩定。

57、如何在不支持JavaScript的舊瀏覽器中隱藏JavaScript代碼？

• 在<script>標簽之后的代碼中添加“<！ - ”，不帶引號。

• 在<script>標簽之前添加“// - >”代碼中沒有引號。

• 舊瀏覽器現在將JavaScript代碼視為一個長的HTML注釋。而支持JavaScript的瀏覽器則將“<！ - ”和“// - >”作為一行注釋。