web 前端開發筆記

1、 開發流程

• 本地建立項目
• gitlab 倉庫建立項目
• 本地 git 跟蹤遠程項目的 master 分支
• 建立 develop 分支
• 編寫代碼，提交到 遠程 develop 分支
• 項目測試完畢，本地 master 合併本地 develop 分支
• 本地 master 分支修改測試 api 域名爲正式 api 域名
• 本地 master 切出 pre 分支
• 提交本地 pre 分支到遠程 pre 分支
• 遠程 pre 分支請求遠程 master pull
• 遠程 master 合併完代碼，編譯完成，正式版就能夠測試了
• 正式上線，須要相應的平臺接入，一個項目週期就已經結束了
• 下一個週期就是版本的迭代以及bug的修復了

2、 代碼優化

一、用 vue 進行前端開發，怎麼作到函數式編程呢？

每次作完項目，都會發現本身在代碼的解耦，接口的封裝方面作的還不夠，後期一定會屢次進行優化，在優化的過程當中，就想到，如何把零散的代碼，編程總體性更強的代碼，令人一看到就知道手腳在哪裏。在這裏個人總結是，按功能點進行函數的封裝，一個大點是一個函數，這個大點裏面又有不少小點，能夠把函數賦值給變量，進行使用，這樣就不用每次都跳來跳去了，維護起來也更方便快捷。

二、vue-cli3 中靜態文件怎麼處理？

用 vue-cli2 的人習慣把靜態文件放 static 或者 asset 裏，放 asset 裏，會被打包，不推薦，可是 vue-cli3 沒有 static 文件，怎麼辦呢？個人答案是，放在 public 目錄下，由於這個文件是不會被打包壓縮的，必定程度上能夠提升編譯效率

三、代碼抽離

把通用功能抽離到 utils 目錄，把通用 api 進行二次封裝，放到 api 文件裏，以 export 的方式導出，須要的時候再引入，會使代碼看起來簡潔不少，也簡化了對應頁面的代碼量，維護起來更是駕輕就熟了，至於性能方面，對首屏加載速度仍是有必定提升效果的。

組件抽離，核心思想，只抽離ui，業務邏輯仍是在引用處

多個 vue 組件引用同一個組件，且類似度高的，用 render 進行合併，並更新數據

html

儘可能的減小頁面的節點，能夠優化網頁的加載速度，因此應該考慮的思路是以最少的節點，寫最多的頁面。同時避免過多的操做 DOM，儘可能以數據驅動頁面。

3、 項目中遇到的問題總結

一、給遍歷出來的 input 綁定 v-model 引起的思考

給一個 input 綁定 v-model，咱們知道是在 data 中加一個新的屬性 x，而後 v-model = x，就能夠實現雙向數據綁定了，可是若是我有一個 input 列表呢？顯然不能這麼幹了，這個時候，能夠在 data 中添加一個數組屬性 list：[]，根據列表長度遍歷數組，添加佔位元素，v-model = list[index]，就能夠實現 input 列表的雙向數據綁定了。經過更新 list[index] 的 value 屬性，實現數據的修改。可是這裏有個問題，value 屬性本來是不存在 data[list[index] 裏面的，在 vue 的實現中，不在 data 裏的屬性，就沒有加入到 watcher 裏，那咱們怎麼去監聽這個新的值呢？答案是，給 list 添加新的值，也就是往 data 的 list 裏添加新的值，這樣 vue 就會把該值加入到監聽列表，監聽 list[index] 的變化。

二、對象沒有深拷貝，致使添加選項受影響

有這麼一個需求，給題目添加選項，每一個題型的原始數據是一個對象，對象裏面有 option 屬性，是一個數組，opion 裏面包含了多個選項，按常理說，咱們只要給一個 index，一個 value，就能夠給 option 賦值了。可是因爲對象沒有深拷貝的緣由，致使新添加的選項收到了影響，因此，這裏想說明的是，對原始數據的引用，最好使用深拷貝，避免原始數據受到操做的影響。