（十四）-前端-面試-專案相關
專案相關
1.元件化和模組化
為什麼要元件化開發
有時候頁面程式碼量太大，邏輯太多或者同一個功能元件在許多頁面均有使用，維護起來相當複雜，這個時候，就需要元件化開發來進行功能拆分、元件封裝，已達到元件通用性，增強程式碼可讀性，維護成本也能大大降低
元件化開發的優點
很大程度上降低系統各個功能的耦合性，並且提高了功能內部的聚合性。這對前端工程化及降低程式碼的維護來說，是有很大的好處的，耦合性的降低，提高了系統的伸展性，降低了開發的複雜度，提升開發效率，降低開發成本
元件化開發的原則
· 專一
· 可配置性
· 標準性
· 複用性
· 可維護性
模組化
為什麼要模組化
早期的javascript版本沒有塊級作用域、沒有類、沒有包、也沒有模組，這樣會帶來一些問題，如複用、依賴、衝突、程式碼組織混亂等，隨著前端的膨脹，模組化顯得非常迫切
模組化的好處
· 避免變數汙染，命名衝突
· 提高程式碼複用率
· 提高了可維護性
· 方便依賴關係管理
2.你如何對網站的檔案和資源進行優化？
期待的解決方案包括：
\1. 檔案合併
\2. 檔案最小化/檔案壓縮
\3. 使用 CDN 託管
\4. 快取的使用（多個域名來提供快取）
3.請說出三種減少頁面載入時間的方法
\1. 優化圖片
\2. 影象格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）
\3. 優化 CSS（壓縮合並 css，如 margin-top, margin-left...)
\4. 網址後加斜槓（如 www.campr.com/目錄，會判斷這個目錄是什麼檔案型別，或者是目錄。）
\5. 標明高度和寬度（如果瀏覽器沒有找到這兩個引數，它需要一邊下載圖片一邊計算大小，如果圖片很多， 瀏覽器需要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。 當瀏覽器知道了高度和寬度引數後，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然後繼續載入 後面的內容。從而載入時間快了，瀏覽體驗也更好了）
\6. 減少 http 請求（合併檔案，合併圖片）
4.VUE專案中的優化
1.不要在模板裡面寫過多表達式
2.迴圈呼叫子元件時新增key
3.頻繁切換的使用v-show，不頻繁切換的使用v-if
4.儘量少用float，可以用flex
5.按需載入，可以用require或者import()按需載入需要的元件
6.路由懶載入
\7. 對於圖片過多的頁面，為了加速頁面載入速度，所以很多時候我們需要將頁面內未出現在可視區域內的圖片先不做載入， 等到滾動到可視區域後再去載入。這樣對於頁面載入效能上會有很大的提升，也提高了使用者體驗。我們在專案中使用 Vue 的 vue-lazyload 外掛：
（1）安裝外掛
npm install vue-lazyload --save-dev
（2）在入口檔案 man.js 中引入並使用
import VueLazyload from 'vue-lazyload'
然後再 vue 中直接使用
Vue.use(VueLazyload)
或者新增自定義選項
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
複製程式碼
（3）在 vue 檔案中將 img 標籤的 src 屬性直接改為 v-lazy ，從而將圖片顯示方式更改為懶載入顯示：
\8. Vue 會通過 Object.defineProperty 對資料進行劫持，來實現檢視響應資料的變化，然而有些時候我們的元件就是純粹的資料展示，不會有任何改變，我們就不需要 Vue 來劫持我們的資料，在大量資料展示的情況下，這能夠很明顯的減少元件初始化的時間，那如何禁止 Vue 劫持我們的資料呢？可以通過 Object.freeze 方法來凍結一個物件，一旦被凍結的物件就再也不能被修改了。
9減少 ES6 轉為 ES5 的冗餘程式碼
（1）首先，安裝 `babel-plugin-transform-runtime` ：
npm install babel-plugin-transform-runtime --save-dev
（2）然後，修改 .babelrc 配置檔案為：
"plugins": [
"transform-runtime"
]
5.用沒用過git，說幾個常用的命令？
git add .
git commit -m 'm'
git push
git pull
git merge
git branch
git checkout xxx
6.VUE專案路由許可權
前後端分離的許可權管理基本就以下兩種方式：
\1. 後端生成當前使用者相應的路由後由前端（用 Vue Router 提供的API）addRoutes 動態載入路由。
\2. 前端寫好所有的路由，後端返回當前使用者的角色，然後根據事先約定好的每個角色擁有哪些路由對角色的路由進行分配。
l 第一種，完全由後端控制路由，但這也意味著如果前端需要修改或者增減路由都需要經過後端大大的同意；
l 第二種，相對於第一種，前端相對會自由一些，但是如果角色許可權發生了改變就需要前後端一起修改，而且如果某些（技術型）使用者在前端修改了自己的角色許可權就可以通過路由看到一些本不被允許看到的頁面，雖然拿不到資料，但是有些頁面還是不希望被不相關的人看到。
7.你做過的專案中有什麼亮點嗎？有什麼讓你自豪的嗎
獨立封裝了什麼什麼元件，提高了程式碼的複用率，減少了冗餘程式碼；
圖片資源懶載入
對於圖片過多的頁面，為了加速頁面載入速度，所以很多時候我們需要將頁面內未出現在可視區域內的圖片先不做載入， 等到滾動到可視區域後再去載入。這樣對於頁面載入效能上會有很大的提升，也提高了使用者體驗。我們在專案中使用 Vue 的 vue-lazyload 外掛：
（1）安裝外掛
npm install vue-lazyload --save-dev
（2）在入口檔案 man.js 中引入並使用
import VueLazyload from 'vue-lazyload'
然後再 vue 中直接使用
Vue.use(VueLazyload)
**路由懶載入：**
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})