web前端綜合

我的整理，若有不當，請指正。不斷修訂和補充中。。。。

1、綜合

1.前端路由的原理

什麼是路由？簡單的說，路由是根據不一樣的 url 地址展現不一樣的內容或頁面

使用場景？前端路由更多用在單頁應用上, 也就是SPA, 由於單頁應用, 基本上都是先後端分離的, 後端天然也就不會給前端提供路由。

前端的路由和後端的路由在實現技術上不同，可是原理都是同樣的。在 HTML5 的 history API 出現以前，前端的路由都是經過 hash 來實現的，hash 能兼容低版本的瀏覽器。

兩種實現前端路由的方式
HTML5 History兩個新增的API：history.pushState 和 history.replaceState，兩個 API 都會操做瀏覽器的歷史記錄，而不會引發頁面的刷新。

Hash就是url 中看到 # ,咱們須要一個根據監聽哈希變化觸發的事件( hashchange) 事件。咱們用 window.location 處理哈希的改變時不會從新渲染頁面，而是看成新頁面加到歷史記錄中，這樣咱們跳轉頁面就能夠在 hashchange 事件中註冊 ajax 從而改變頁面內容。

優勢
1.從性能和用戶體驗的層面來比較的話，後端路由每次訪問一個新頁面的時候都要向服務器發送請求，而後服務器再響應請求，這個過程確定會有延遲。而前端路由在訪問一個新頁面的時候僅僅是變換了一下路徑而已，沒有了網絡延遲，對於用戶體驗來講會有至關大的提高。
2.在某些場合中，用ajax請求，可讓頁面無刷新，頁面變了但Url沒有變化，用戶就不能複製到想要的地址，用前端路由作單頁面網頁就很好的解決了這個問題
缺點：
使用瀏覽器的前進，後退鍵的時候會從新發送請求，沒有合理地利用緩存，

2.對組件化、模塊化的理解？

幾個原則

**概念**
**單一職責**：意味着一個模塊、一個組件只作一件事，毫不多作。
**正交性**：意思是不重複，一個模塊/組件跟另外一個模塊的職責是正交的，沒有重疊。
**單向依賴**：模塊之間最可能是單向的依賴，若是出現A依賴B，B也依賴A，那麼要麼是A、B應該屬於一個模塊，要麼就是總體的拆分有問題。
           一個完整的軟件系統的模塊依賴應該是一張有向無環圖。
**緊湊性**：模塊、組件對外暴露的接口、屬性應該儘量的少，接口的參數個數也要少。
**面向接口**：模塊、組件對外提供服務時最好是面向接口的，以便後期能夠靈活的變動。

總結：
1.模塊最重要的屬性：儘量的獨立和自包含----模塊提供的功能必須是完整的，以便它的調用者們能夠各取所需。
2.模塊化是爲了：減小循環依賴，減小耦合，提升設計和開發的效率。
良好的設計規則，會把耦合密集的設計參數進行歸類做爲一個模塊，並以此劃分工做任務。而模塊之間彼此經過一個固定的接口進行交互，除此以外的內部實現則由模塊的開發團隊進行自由發揮。
3.最後：方法命名的規範性很重要，註釋很重要，若是沒有註釋只有開發者心中很清楚，因此必要的註釋會給後期的代碼維護工做帶來便利的同時也提升效率。每一個界面的主要是用於作什麼的，能夠在頭文件中適當進行說明

組件化和模塊化的區別：
以vue 爲例：
一個.vue文件能夠叫作一個組件，是有template style script組成；多個組件能組成一個頁面；
模塊通常指js模塊；如一個vue組件中的js 能夠由各個模塊組成；目前經過import引入進來。
例如時間顯示組件會調用格式化時間模塊。

ard.png](/img/bV9XzS)

深刻了解，請點擊 前端工程--基礎篇https://github.com/fouber/blo...

到底什麼是前端工程化、模塊化、組件化

2、nodeJS

1. node核心理解

3、框架

1.對Vue angular react的理解

1.vue和react的對比：https://blog.csdn.net/CystalV...

2.vue生命週期的理解

生命週期的理解 見個人vue生命週期的理解 https://segmentfault.com/a/11...

3.對vue虛擬dom的理解

Vue原理解析之Virtual Dom
https://segmentfault.com/a/11...
或者見個人收藏
4.對bootstrap、 Element UI的理解?

5.vue雙向數據綁定的理解

剖析Vue原理&實現雙向綁定MVVMhttps://segmentfault.com/a/11...
或者見個人收藏

6.對MVC框架 MVVM框架；以及他們的優缺點和使用場景

概念：主要是c 和vm 的區別；
mvc
是單向的。
controller層,完成業務邏輯，而後改變model狀態，而後model將數據發送給view,用戶獲得反饋。
主要是經過事件等來控制。
View中不會對Model做任何操做，Model不會輸出任何用於表現的東西，如HTML代碼或者某種效果等，它就是點數據。而Contorller用於決定使用哪些Model，對Model執行什麼操做，爲視圖準備哪些數據，是MVC中溝通的橋樑。
瀏覽器發送請求--->Contorller和Model交互獲取數據--->Contorller調用View--->View渲染數據返回
v-->c-->m-->c—v

mvvm
是雙向驅動。
View 和 Model 之間並無直接的聯繫，而是經過ViewModel進行交互。
vm 是View的抽象，負責View與Model之間信息轉換。將View的Command傳送到Model；
即view層的變更，自動顯示在viewModel上；反之亦然。
是一種基於前端開發的架構模式
m<---> vm <---> v

優缺點：
前端應用的複雜程度已不一樣往日，今非昔比。這時前端開發就暴露出了三個痛點問題：
開發者在代碼中大量調用相同的DOM API, 處理繁瑣，操做冗餘，使得代碼難以維護。
大量的DOM 操做使頁面渲染性能下降，加載速度變慢，影響用戶體驗。
當 Model 頻繁發生變化，開發者須要主動更新到View ；當用戶的操做致使Model發生變化，開發者一樣須要將變化的數據同步到Model中， 這樣的工做不只繁瑣，並且很難維護複雜多變的數據狀態。

mvc的優缺點：
jquery解決了第一個問題，
開發者在代碼中大量調用相同的DOM API, 處理繁瑣，操做冗餘，使得代碼難以維護。

mvvm:
ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來，而View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做DOM, 不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理。

使用場景：
mvvm 的框架有vue react angular;mvc框架是bootstrap
mvc框架是 jquery

mvc mvvm詳情

7.談一下對jquery的理解

它是一個跨瀏覽器的DOM和AJAX框架。

1. vue組件的理解

---

9.backbone.js
Backbone是一個輕量級的前端MVC框架，用於結構化管理頁面中的大量JS，創建與服務器、視圖間的無縫鏈接，爲構建複雜的應用提供基礎框架。
http://www.css88.com/doc/back...

4、安全

1.什麼是web注入攻擊 講下原理，談下最多見的2種攻擊（xss csrf）

xss:跨站腳本攻擊
它容許用戶將惡意代碼植入到提供給其餘用戶使用的頁面中，能夠簡單的理解爲一種javascript代碼注入。

XSS的防護措施：
1.過濾轉義輸入輸出
2.避免使用eval、new Function等執行字符串的方法，除非肯定字符串和用戶輸入無關
3.使用cookie的httpOnly屬性，加上了這個屬性的cookie字段，js是沒法進行讀寫的
4.使用innerHTML、document.write的時候，若是數據是用戶輸入的，那麼須要對象關鍵字符進行過濾與轉義

2.如何防止注入攻擊

1.jsx能防止：
    由於在渲染以前, React DOM 會格式化(escapes) JSX中的全部值.
    從而保證用戶沒法注入任何應用以外的代碼.
    在被渲染以前，全部的數據都被轉義成爲了字符串處理。

CSRF：跨站請求僞造

其實就是網站中的一些提交行爲，被黑客利用，在你訪問黑客的網站的時候進行操做，會被操做到其餘網站上

CSRF防護措施：
1.檢測http referer是不是同域名
2.避免登陸的session長時間存儲在客戶端中
3.關鍵請求使用驗證碼或者token機制

其餘的一些攻擊方法還有HTTP劫持、界面操做劫持

5、工具

工程類工具

WebPack 是一個模塊打包工具，你可使用WebPack管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它可以很好地管理、打包Web開發中所用到的HTML、JavaScript、CSS以及各類靜態文件（圖片、字體等），讓開發過程更加高效。對於不一樣類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後 生成了優化且合併後的靜態資源。

webpack的兩大特點：

1.code splitting，能夠自動完成

2.loader 能夠處理各類類型的靜態文件，而且支持串聯操做
webpack 是以commonJS的形式來書寫腳本滴，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移。

webpack具備requireJs和browserify的功能，但仍有不少本身的新特性：
webpack實現性能優化

3.webpack 中plungies和lodash的區別

4.Gulp webpack的區別？

4.js庫、js工具？

lodash
underscore.js:

Underscore是一個用於提升開發效率的基礎函數庫，它封裝了對集合、數組、對象、函數的經常使用操做，就像jQuery封裝DOM對象同樣，你能經過Underscore輕易地訪問和操做JavaScript內部對象。

　　Underscore還提供了一些很是實用的函數方法，如：函數節流、模板解析等。
　它們都是用於函數節流，控制函數不被頻繁地調用，節省客戶端及服務器資源。

debounce()方法關注函數執行的間隔，即函數兩次的調用時間不能小於指定時間。
throttle()方法更關注函數的執行頻率，即在指定頻率內函數只會被調用一次。

5.項目管理工具

svn git

6.調試工具

7.開發工具

sublime
webstorm
vsCode
常見好用的插件
下載插件方法, 點擊左側最下面一個圖標( 擴展 ),輸入想要搜索的插件,下載,按提示安裝重啓VS 便可.

6、http

1.理解http
https://segmentfault.com/a/11...

2.說說TCP傳輸的三次握手四次揮手策略

TCP的三次握手(創建鏈接）和四次揮手(關閉鏈接）http://www.cnblogs.com/Jessy/...

7、性能優化

https://segmentfault.com/a/11...

8、我的發展篇

1. 自我介紹

1.你爲何選擇前端？你是經過什麼方式學習前端的？最近在學什麼？
除了基本我的信息之外，面試官更想聽的是你不同凡響的地方和你的優點。

2.你有什麼須要補充的嗎？你最擅長的是什麼？3.三年 五年規劃？4.如何看待前端技術的更新？前端如今流行什麼？5.印象最深的項目是什麼？具體什麼問題？什麼技術難題？怎麼解決？6.最高水平的項目 作的時間最久的項目7.如何管理前端團隊 成功帶人的案例 5.代碼優化使用過嗎？ 代碼規範熟悉嗎？