前端面試錦集之 node.js 及項目工程化

一、node.js 及項目工程化

1. 使用 Node.js 編寫代碼實現遍歷文件夾及所有文件名，代碼如下所示：

// 實現遍歷文件下，獲取所有的文件
// 這裏使用同步的方式比異步的方式簡單的多，異步需要回調裏面嵌套回調
const fs = require('fs')
const path = require('path')
const readDir = (entry) => {
    const dirInfo = fs.readdirSync(entry);// [ 'hello', 'test.js' ]
    dirInfo.forEach(item => {
        const location = path.join(entry, item)
        const info = fs.statSync(location)
        // console.log(info.isDirectory())
        if (info.isDirectory()) {// 如果是一個文件夾
            console.log(`dir: ${location}`)
            readDir(location) // 遞歸的方式實現
        } else {// 如果是一個文件
            console.log(`file: ${location}`)
        }
    })
    // console.log(dirInfo)
}
 
// __dirname是系統級的變量，拿到的是當前文將所在文件夾
readDir(__dirname)

2. Node 如何實現版本的升級，使用 nvm 的原因，答案如下所示:

• 爲什麼要升級 node 的版本
  • 新的 ES 語法
  • webpack 做打包的時候，提升打包速度，因爲cwebpack 底層依賴 node的 api
• 如何升級 node 版本
  • npm install nvm
• nvm 的使用是允許在電腦上安裝多個 node 版本
• nvm use 版本號，安裝新版本的版本是 nvm install 版本號
• 還有一個和 nvm差不多的一個n模塊

3. 前端開發要學習 Node.js 的原因，答案如下所示：

• node.js 不算是非常優秀的後端語言，計算能力是非常差的，這給後端開發帶來了很大的麻煩
• node.js可以做一箇中間的過濾層的服務器
• node.js 可以作爲一個數據的分發服務器
• node.js 最強的能力，給前端提供工程化的能力，webpack 就是用 node.js 實現的
• npm 的包管理系統也是 node.js 最後的體現

4. 模塊化的差異 AMD CommonJS ESModule，如下所示：

• AMD 依賴前置，也就是說依賴之前就寫好了
• ESmodule 是靜態的，加載的是一個接口
• AMD 和 commonJS 都是動態的，可以實現動態加載，而且加載的是一個對象
• 靜態引入的好處：可以做代碼的靜態分析，webpack中的打包就是利用了靜態依賴
• 代碼示例如下所示：

  // AMD 在Angular中就是非常好的體現
  defined(['a','b'],function(a, b){
      // 數組中放的是a模塊和b模塊
      // 函數相當於一個c模塊
  })
  

5. 圖片上傳到服務器的過程，答案如下所示：

• <input type='file'> 考慮的問題：低版本瀏覽器的兼容問題 高版本瀏覽器的兼容問題
• 針對高版本瀏覽器的兼容，如下所示：
  • 預覽功能的實現：通過input標籤的onchange事件觸發函數
  • 瀏覽器的FileReader 和 FileReader.readAsDataURL
  • <img src='base64'>來展示圖片
• 針對低版本瀏覽器的兼容，如下所示：
  • 低版本瀏覽器是沒有FileReader這個類的
  • 在onchange觸發的時候：直接讓input通過表單的形式直接提交給後端，後端存儲完會返回一個圖片的url
  • 創建img標籤，顯示圖片

6. token存在cookie裏，過期的處理方式，答案如下所示：

• token儘量讓後端做，前端不要做這方面的動作
• 過期處理最好的解決辦法就是直接跳轉到登錄界面

7. node 框架中的 MVC，答案如下所示：

• Node.js是典型的MVC模塊化開發的框架，明顯的特點是加入了後臺的服務器進來，使讀取本地文件變得容易
• 視圖層，放在views文件夾中。由ejs寫成的模版，可以實現html的代碼複用
• 路由層，在 router裏，用來分配頁面的路由，無論頁面什麼邏輯，都可以用路由來控制頁面的跳轉，每個路由其實就是頁面的一種狀態，這有些類似於react的狀態控制，每個狀態跳轉之後都會交給controller
• 控制層，在controllers裏，可以負責當前路由下的頁面或者說狀態的接口調用和數據返回，在頁面中拿到 controller 返給的數據，就可以控制頁面的渲染
• 如果 mvc 是骨架，那麼存在 public 裏的js和css以及圖片、圖標等資源文件的編寫和引用就可以使得我們網站更加豐富美觀的

8. mongle與mysql的優勢，答案如下所示：

• mongle是屬於noSQL，noSQL的設計非常靈活，目前大數據方面的數據庫有noSQL的
• mysql適合做比較規範化的數據存儲

9. Less、sass、stylus、css，命名空間與 css module 之間的區別，答案如下所示：

• Less 的底層是 JS 所實現的，Sass 的底層是 Ruby 所實現的，Stylus 的底層更加小巧一些的，相比 CSS
• 命名空間可以解決樣式的衝突問問題，css module可以使得樣式的管理與使用更加的模塊化

10. 工程化上的按需加載，答案如下所示：

• 前端工程化是一個高層次的思想，而模塊化和組件化是爲工程化思想下相對較具體的開發方式，因此可以簡單的認爲模塊化和組件化是工程化的表現形式。
• 模塊化和組件化一個最直接的好處就是複用，除了複用之外還有就是分治，我們能夠在不影響其他代碼的情況下，按需修改某一獨立的模塊或是組件，因此很多地方我們即使沒有複用需要，也可以根據分治需求進行模塊化或組件化開發。
• 前端工程化，將前端項目當成一項系統工程進行分析、組織和構建從而達到項目結構清晰、分工明確、團隊配合默契、開發效率提高的目的。
• 模塊化以及模塊化的好處，一個模塊就是一個實現特定功能的文件，有了模塊我們就可以更方便的使用別人的代碼，要用什麼功能就加載什麼模塊。js模塊化方案很多有AMD、CommonJS、UMD、ES6 Module等。css模塊化開發大多數是在less、sass、stylus等預處理器的import、minxin特性支持下實現。
• 前端發展的導向是前端工程化，智能化，模塊化，組件化，層次化。Web前端頁面的開發必然與DOM進行交互操作，前端框架的一次次更新，是從滿足目前的業務需求到提升效率的階段，慢慢走向改善性能的階段（開發和部署環境優化，代碼優化，網站性能優化，數據優化，頁面優化等等）。
• 前端工程化指的是將軟件工程的方法和原理運用在前端開發中, 目的是實現 高效協同，質量開發，具體如下：
  • Node服務，提供數據代理，路由，服務器渲染
  • Web應用開發，專注於web交互體驗
  • 前端運維：構建，測試，部署，監控
• 前端的開發，一定要規範化，代碼規範，分支管理，模塊管理，自動化測試，最後部署；規範化有利於以後項目的重構，二次開發，版本迭代，前端上手，如下所示：
  • 重命名，對類，接口，方法，屬性重命名
  • 抽取代碼，將方法內代碼抽取其他地方調用
  • 封裝字段，類字段換屬性
  • 刪除參數，重排參數

11. git 上的衝突怎麼解決的，答案如下所示：

• 產生衝突是因爲兩個人同時修改了相同文件的相同代碼
• 直接在衝突的文件中修改對應的文件，修改之後再次提交
• 具體步驟，如下所示：
  • git brach bugfix
  • git checkout bug fix
  • git add .
  • git commit
  • git setOrigin
  • git push
  • git checkout master
  • git merge bugfix
  • webpack 打包 master 分支代碼
  • 把生成的代碼扔到 CDN 上

12. 設計模式的理解，如下所示：

• 設計模式，從設計到模式，可以理解爲 設計、模式、分開和從設計到模式。
• 23 種設計模式，分爲創建型、組合型和行爲型。
• 創建型模式，如下所示：
  • 工廠模式，工廠方法模式，抽象工廠模式和建造者模式
  • 單例模式
  • 原型模式
• 結構型模式，如下所示：
  • 適配器模式
  • 裝飾器模式
  • 代理模式
  • 外觀模式
  • 橋接模式
  • 組合模式
  • 享元模式
• 行爲型模式，如下所示：
  • 策略模式
  • 模版方法模式
  • 觀察者模式
  • 迭代器模式
  • 職責連模式
  • 命令模式
  • 備忘錄模式
  • 狀態模式
  • 訪問者模式
  • 中介者模式
  • 解釋器模式

13. node 中的 npm 與版本管理，答案如下所示：

• package.lock 版本鎖，會鎖住當前的版本信息，安裝依賴的時候會參考鎖文件的版本
• yarn.lock，爲了跨機器安裝得到一致的結果，Yarn 需要比你配置在 package.json 中的依賴列表更多的信息。 Yarn 需要準確存儲每個安裝的依賴是哪個版本。
  爲了做到這樣，Yarn 使用一個你項目根目錄裏的 yarn.lock 文件。這可以媲美其他像 Bundler 或 Cargo 這樣的包管理器的 lockfiles。它類似於 npm 的 npm-shrinkwrap.json，然而他並不是有損的並且它能創建可重現的結果。所有 yarn.lock 文件應該被提交到版本控制系統