第14篇—node.js及項目工程化

使用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)
複製代碼

Node如何實現版本的升級？爲何要使用nvm?

• 爲何要升級node的版本？
  • 新的ES語法
  • webpack作打包的時候，提高打包速度，由於webpack底層依賴node的api
• 如何升級node版本
  • npm install nvm
• nvm的使用：容許在電腦上安裝多個node版本
• nvm use 版本號
• 安裝新版本的版本：nvm install 版本號
• 還有一個和nvm差很少的一個n模塊

前端開發爲何要學習Node.js

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

模塊化的差別 AMD CommonJS ESModule

• AMD依賴前置，也就是說依賴以前就寫好了
• ESmodule是靜態的，加載的是一個接口
• AMD和commonJS都是動態的，能夠實現動態加載，並且加載的是一個對象
• 靜態引入的好處：能夠作代碼的靜態分析，webpack中的打包就是利用了靜態依賴

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

複製代碼

圖片上傳到服務器的過程

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

token存在cookie裏，過時怎麼處理

• token儘可能讓後端作，前端不要作這方面的動詞
• 過時處理最好的解決辦法就是直接跳轉到登陸界面

mongle與mysql的優點

• noSQL的設計很是靈活，目前大數據方面的數據庫有noSQL的
• mysql適合作比較規範化的數據存儲

git上的衝突解決

• 爲何會產生衝突：兩我的同時修改了相同文件的相同代碼
• 直接在衝突的文件中修改對應的文件，修改以後再次提交

設計模式

Node中的npm與版本管理（package.lock yarn.lock）

• package.lock版本鎖，會鎖住當前的版本信息，安裝依賴的時候會參考鎖文件的版本