❶ 前端跨域通信的⼏幾種⽅方式
自定義事件組件間通信深入理解：
自定義事件：自己定義的事件：事件類型（自己定義）和回調函數（自己定義自己觸發）
系統定義的事件：事件類型（固定幾個）和回調函數（自己定義系統觸發）
做法：在父組件當中可以看到子組件對象，給子組件對象綁定自定義事件$on 回調函數在父組件中
在子組件當中，我們需要傳遞數據的地方，去觸發自己身上的事件$emit，調用回調函數中傳參給父
適用：子向父通信
原因：因為父組件內部可以看到子組件對象，可以給子組件對象綁定事件，回調函數在父組件定義
而子組件內部看不到父組件對象，沒法給父組件對象綁定事件，子組件沒法定義回調函數，但是可以看到自己，可以觸發
接受數據的組件必須能看到預綁定事件的組件對象，才能綁定
發送數據的組件必須能看到綁定了事件的組件對象，才能觸發事件
$on
$emit
$off //解綁事件
$once //綁定只能觸發一次的事件
vm和組件對象的關系
全局事件匯流排組件間通信
適用於任意組件間傳遞 必須理解必須搞定
利用了自定義事件
創建一個中間人，讓所有的組件都可以看到這個人，並且這個人可以使用$on和$emit （vm添加到Vue原型當中作為匯流排）
在想要接受數據的組件內 找中間人去綁定事件
在想要發送數據的組件內 觸發中間人綁定的事件
通信方式 props
父子之間傳遞
父向子傳遞屬性，通過屬性把數據交給子組件
子向父傳遞數據，子組件通過調用父組件的行為函數，把數據當參數交給父組件使用場合：
父子最好
父向非子後代傳遞，必須逐層去傳遞 麻煩
不是父子關系的組件，必須藉助相同的父組件去通信 麻煩
通信方式 vue自定義事件 子向父傳遞，只是適合這個場合
理解原生dom事件：
事件類型 ： 固定的有限的幾個
回調函數 ： 誰調用（瀏覽器） 調用時候的默認參數（事件對象event）
vue自定義事件
事件類型 : 無數個
回調函數 ： 誰調用 （自己調用） 調用時候默認的參數 （有可能有也可能沒有 如果調用時候傳了參數，默認參數就有
如果沒有傳，那就沒有（undefined））
父組件當中去給子組件對象綁定事件監聽
@直接在組件標簽對象當中去綁定，和綁定系統事件一致
$on，在mounted當中去綁定，但是需要獲取到子組件標簽對象（通過ref指定，然後獲取到）
$once()和$on（）類似，但是只能觸發一次
在子組件當中適當的位置去觸發事件並傳遞參數
$emit(),在子組件當中去觸發，子組件對象觸發
$off()可以在銷毀之前解綁事件
使用場合：子向父傳遞數據，其餘情況都不能用
通信方式 全局事件匯流排
適用場合： 任何場合
事件匯流排(對象)滿足的兩個條件：1、所有的組件對象都能找到它 2、可以調用$on和$emit
vm對象和組件對象的關系
vm的原型對象 === 組件對象的原型對象的原型對象
本身自定義事件可以完成子向父之間的傳遞，因為父組件中可以看到子組件，可以為子組件綁定事件，子組件中可以觸發事件
但是如果不是子向父，那麼其餘的就沒辦法了，因為兩個組件互相是看不到的，沒辦法再其中一個給另外一個綁定事件
此時我們可以藉助中間人，也就是他們都可以同時看到的一個人，就是全局事件匯流排（所有的組件對象都能看到）
在接收數據的組件中，獲取匯流排綁定事件
在發送數據的組件中，獲取匯流排觸發事件
全局事件匯流排說到底就是個對象，我們通常就是用vm對象作為全局事件匯流排使用
把vm對象添加到Vue原型對象 就形成全局事件匯流排（vm）
通信方式 消息訂閱和發布（類似於全局事件匯流排，vue當中幾乎不用）
github查閱 PubSubJS第三方庫
訂閱者是接收數據的組件
發布者是發送數據的組件
坑： 訂閱者的回調函數裡面形參第一個必須有，而且是為了接受發布者的消息類型的，實際意義沒有，但是必須寫上
通信方式 slot插槽
一個組件會多次使用，但是又有少部分結構數據會發生變化，（當然可以用不同的子組件）
那麼就得通過父組件告訴子組件變化的內容是什麼，此時就要用到這個插槽
子組件當中<slot></slot>其實就是佔位用的，讓父元素給它填充內容，可以帶標簽
具名插槽
默認插槽
作用域插槽
子組件的slot可以通過 屬性傳遞值給父組件，然後父組件可以根據不同需求改變這個slot內部的顯示結構
把子組件的值，傳給父組件固定的區域進行操作
❷ 大前端和前端在就業方向上有什麼差別
所謂的大前端其實就是前端+終端（android+ios）,大前端是這幾年才開始的叫法，以前前端是指web前端，終端就是android,ios等。
因為現在技術的進步，web的體驗也有很大的提升，基本可以媲美終端原生的體驗，所以很多公司開始考慮用一套代碼，在各個端上來跑，這樣就可以減少很多工作量，同時降低企業的研發成本。
所以，現在就出現了各種大前端開發框架，很多公司也積極參與其中，對自己原有的業務進行重構升級，所以，大前端的叫法就越來越普遍了。
前端是指傳統意義上的web端，而大前端是指前端+終端，這兩個是不一樣的。
❸ 老鐵們，用java做前端開發實涉及到的tpl為後綴名的文件有什麼好處，相比html格式的有什麼不同
java 前端開發基本上就3種技術 jsp，freemarker ，Velocity 分別以 jsp vm ftl 結尾
區別： jsp（可以寫java代碼，支持一抹多東西，不是嚴格的MVC，每次都要編譯配置tomcat什麼的） vm（不能編寫java代碼，可以實現嚴格的mvc分離，不是官方標准，標簽支持不好）
ftl（不能編寫java代碼，可以實現嚴格的mvc分離，搞摸版很好，用戶群體和支持不如jsp）
所謂的tpl就是html,
只不過裡面作為模板文件(tpl)的html中添加了smarty的變數或邏輯判斷.這些變數的在程序運行時由smarty替換成真正的數據.
❹ 整理涵蓋很全很廣的前端知識點
HTML、CSS相關
html5新特性、語義化
瀏覽器渲染機制、重繪、重排
網頁生成過程：
重排(也稱迴流): 當 DOM 的變化影響了元素的幾何信息( DOM 對象的位置和尺寸大小)，瀏覽器需要重新計算元素的幾何屬性，將其安放在界面中的正確位置，這個過程叫做重排。 觸發：
重繪： 當一個元素的外觀發生改變，但沒有改變布局,重新把元素外觀繪制出來的過程，叫做重繪。 觸發：
重排優化建議：
transform 不重繪，不迴流 是因為 transform 屬於合成屬性，對合成屬性進行 transition/animate 動畫時，將會創建一個合成層。這使得動畫元素在一個獨立的層中進行渲染。當元素的內容沒有發生改變，就沒有必要進行重繪。瀏覽器會通過重新復合來創建動畫幀。
css盒子模型
所有 HTML 元素可以看作盒子，在CSS中， "box model" 這一術語是用來設計和布局時使用。 CSS 盒模型本質上是一個盒子，封裝周圍的 HTML 元素，它包括：邊距，邊框，填充，和實際內容。 盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
css樣式優先順序
!important>style>id>class
什麼是BFC？BFC的布局規則是什麼？如何創建BFC？BFC應用？
BFC 是 Block Formatting Context 的縮寫，即塊格式化上下文。 BFC 是CSS布局的一個概念，是一個環境，裡面的元素不會影響外面的元素。 布局規則：Box是CSS布局的對象和基本單位，頁面是由若干個Box組成的。元素的類型和display屬性，決定了這個Box的類型。不同類型的Box會參與不同的 Formatting Context 。 創建：浮動元素 display：inline-block position:absolute 應用: 1.分屬於不同的 BFC 時,可以防止 margin 重疊 2.清除內部浮動 3.自適應多欄布局
DOM、BOM對象
BOM（Browser Object Model） 是指瀏覽器對象模型，可以對瀏覽器窗口進行訪問和操作。使用 BOM，開發者可以移動窗口、改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。 使 JavaScript 有能力與瀏覽器"對話"。 DOM （Document Object Model） 是指文檔對象模型，通過它，可以訪問 HTML 文檔的所有元素。 DOM 是 W3C （萬維網聯盟）的標准。 DOM 定義了訪問 HTML 和 XML 文檔的標准： "W3C 文檔對象模型（DOM）是中立於平台和語言的介面，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。" W3C DOM 標准被分為 3 個不同的部分：
什麼是 XML DOM ？ XML DOM 定義了所有 XML 元素的對象和屬性，以及訪問它們的方法。 什麼是 HTML DOM？ HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。
JS相關
js數據類型、typeof、instanceof、類型轉換
閉包(高頻)
閉包是指有權訪問另一個函數作用域中的變數的函數 ——《JavaScript高級程序設計》
當函數可以記住並訪問所在的詞法作用域時，就產生了閉包，
即使函數是在當前詞法作用域之外執行 ——《你不知道的JavaScript》
原型、原型鏈(高頻)
原型: 對象中固有的 __proto__ 屬性，該屬性指向對象的 prototype 原型屬性。
原型鏈: 當我們訪問一個對象的屬性時，如果這個對象內部不存在這個屬性，那麼它就會去它的原型對象里找這個屬性，這個原型對象又會有自己的原型，於是就這樣一直找下去，也就是原型鏈的概念。原型鏈的盡頭一般來說都是 Object.prototype 所以這就是我們新建的對象為什麼能夠使用 toString() 等方法的原因。
特點: JavaScript 對象是通過引用來傳遞的，我們創建的每個新對象實體中並沒有一份屬於自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變。
this指向、new關鍵字
this 對象是是執行上下文中的一個屬性，它指向最後一次調用這個方法的對象，在全局函數中， this 等於 window ，而當函數被作為某個對象調用時，this等於那個對象。 在實際開發中， this 的指向可以通過四種調用模式來判斷。
new
作用域、作用域鏈、變數提升
繼承(含es6)、多種繼承方式
（1）第一種是以 原型鏈的方式來實現繼承 ，但是這種實現方式存在的缺點是，在包含有引用類型的數據時，會被所有的實例對象所共享，容易造成修改的混亂。還有就是在創建子類型的時候不能向超類型傳遞參數。
（2）第二種方式是使用 借用構造函數 的方式，這種方式是通過在子類型的函數中調用超類型的構造函數來實現的，這一種方法解決了不能向超類型傳遞參數的缺點，但是它存在的一個問題就是無法實現函數方法的復用，並且超類型原型定義的方法子類型也沒有辦法訪問到。
（3）第三種方式是 組合繼承 ，組合繼承是將原型鏈和借用構造函數組合起來使用的一種方式。通過借用構造函數的方式來實現類型的屬性的繼承，通過將子類型的原型設置為超類型的實例來實現方法的繼承。這種方式解決了上面的兩種模式單獨使用時的問題，但是由於我們是以超類型的實例來作為子類型的原型，所以調用了兩次超類的構造函數，造成了子類型的原型中多了很多不必要的屬性。
（4）第四種方式是 原型式繼承 ，原型式繼承的主要思路就是基於已有的對象來創建新的對象，實現的原理是，向函數中傳入一個對象，然後返回一個以這個對象為原型的對象。這種繼承的思路主要不是為了實現創造一種新的類型，只是對某個對象實現一種簡單繼承，ES5 中定義的 Object.create() 方法就是原型式繼承的實現。缺點與原型鏈方式相同。
（5）第五種方式是 寄生式繼承 ，寄生式繼承的思路是創建一個用於封裝繼承過程的函數，通過傳入一個對象，然後復制一個對象的副本，然後對象進行擴展，最後返回這個對象。這個擴展的過程就可以理解是一種繼承。這種繼承的優點就是對一個簡單對象實現繼承，如果這個對象不是我們的自定義類型時。缺點是沒有辦法實現函數的復用。
（6）第六種方式是 寄生式組合繼承 ，組合繼承的缺點就是使用超類型的實例做為子類型的原型，導致添加了不必要的原型屬性。寄生式組合繼承的方式是使用超類型的原型的副本來作為子類型的原型，這樣就避免了創建不必要的屬性。
EventLoop
JS 是單線程的，為了防止一個函數執行時間過長阻塞後面的代碼，所以會先將同步代碼壓入執行棧中，依次執行，將非同步代碼推入非同步隊列，非同步隊列又分為宏任務隊列和微任務隊列，因為宏任務隊列的執行時間較長，所以微任務隊列要優先於宏任務隊列。微任務隊列的代表就是， Promise.then ， MutationObserver ，宏任務的話就是 setImmediate setTimeout setInterval
原生ajax
ajax 是一種非同步通信的方法,從服務端獲取數據,達到局部刷新頁面的效果。 過程：
事件冒泡、捕獲(委託)
event.stopPropagation() 或者 ie下的方法 event.cancelBubble = true; //阻止事件冒泡
ES6
Vue
簡述MVVM
MVVM 是 Model-View-ViewModel 縮寫，也就是把 MVC 中的 Controller 演變成 ViewModel。Model 層代表數據模型， View 代表UI組件， ViewModel 是 View 和 Model 層的橋梁，數據會綁定到 viewModel 層並自動將數據渲染到頁面中，視圖變化的時候會通知 viewModel 層更新數據。
談談對vue生命周期的理解？
每個 Vue 實例在創建時都會經過一系列的初始化過程， vue 的生命周期鉤子，就是說在達到某一階段或條件時去觸發的函數，目的就是為了完成一些動作或者事件
computed與watch
watch 屬性監聽 是一個對象，鍵是需要觀察的屬性，值是對應回調函數，主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操作,監聽屬性的變化，需要在數據變化時執行非同步或開銷較大的操作時使用
computed 計算屬性 屬性的結果會被緩存，當 computed 中的函數所依賴的屬性沒有發生改變的時候，那麼調用當前函數的時候結果會從緩存中讀取。除非依賴的響應式屬性變化時才會重新計算，主要當做屬性來使用 computed 中的函數必須用 return 返回最終的結果 computed 更高效，優先使用
使用場景 computed ：當一個屬性受多個屬性影響的時候使用，例：購物車商品結算功能 watch ：當一條數據影響多條數據的時候使用，例：搜索數據
v-for中key的作用
vue組件的通信方式
父子組件通信
父->子 props ，子->父 $on、$emit` 獲取父子組件實例 parent、 parent 、children Ref 獲取實例的方式調用組件的屬性或者方法 Provide、inject` 官方不推薦使用，但是寫組件庫時很常用
兄弟組件通信
Event Bus 實現跨組件通信 Vue.prototype.$bus = new Vue() Vuex
跨級組件通信
$attrs、$listeners Provide、inject
常用指令
雙向綁定實現原理
當一個 Vue 實例創建時，Vue會遍歷data選項的屬性，用 Object.defineProperty 將它們轉為 getter/setter並且在內部追蹤相關依賴，在屬性被訪問和修改時通知變化。每個組件實例都有相應的 watcher 程序實例，它會在組件渲染的過程中把屬性記錄為依賴，之後當依賴項的 setter 被調用時，會通知 watcher重新計算，從而致使它關聯的組件得以更新。
v-model的實現以及它的實現原理嗎？
nextTick的實現
vnode的理解，compiler和patch的過程
new Vue後整個的流程
思考：為什麼先注入再提供呢？？
答：1、首先來自祖輩的數據要和當前實例的data,等判重，相結合，所以注入數據的initInjections一定要在 InitState 的上面。2. 從上面注入進來的東西在當前組件中轉了一下又提供給後代了，所以注入數據也一定要在上面。
vm.[Math Processing Error]mount(vm.mount(vm.options.el) ：掛載實例。
keep-alive的實現
作用：實現組件緩存
鉤子函數：
原理： Vue.js 內部將 DOM 節點抽象成了一個個的 VNode 節點， keep-alive 組件的緩存也是基於 VNode 節點的而不是直接存儲 DOM 結構。它將滿足條件 （pruneCache與pruneCache） 的組件在 cache 對象中緩存起來，在需要重新渲染的時候再將 vnode 節點從 cache 對象中取出並渲染。
配置屬性：
include 字元串或正則表達式。只有名稱匹配的組件會被緩存
exclude 字元串或正則表達式。任何名稱匹配的組件都不會被緩存
max 數字、最多可以緩存多少組件實例
vuex、vue-router實現原理
vuex 是一個專門為vue.js應用程序開發的狀態管理庫。 核心概念：
你怎麼理解Vue中的diff演算法?
在js中,渲染真實 DOM 的開銷是非常大的, 比如我們修改了某個數據,如果直接渲染到真實 DOM , 會引起整個 dom 樹的重繪和重排。那麼有沒有可能實現只更新我們修改的那一小塊dom而不要更新整個 dom 呢？此時我們就需要先根據真實 dom 生成虛擬 dom ， 當虛擬 dom 某個節點的數據改變後會生成有一個新的 Vnode , 然後新的 Vnode 和舊的 Vnode 作比較，發現有不一樣的地方就直接修改在真實DOM上，然後使舊的 Vnode 的值為新的 Vnode 。
diff 的過程就是調用 patch 函數，比較新舊節點，一邊比較一邊給真實的 DOM 打補丁。在採取 diff 演算法比較新舊節點的時候，比較只會在同層級進行。 在 patch 方法中，首先進行樹級別的比較 new Vnode 不存在就刪除 old Vnode old Vnode 不存在就增加新的 Vnode 都存在就執行diff更新 當確定需要執行diff演算法時，比較兩個 Vnode ，包括三種類型操作：屬性更新，文本更新，子節點更新 新老節點均有子節點，則對子節點進行 diff 操作，調用 updatechidren 如果老節點沒有子節點而新節點有子節點，先清空老節點的文本內容，然後為其新增子節點 如果新節點沒有子節點，而老節點有子節點的時候，則移除該節點的所有子節點 老新老節點都沒有子節點的時候，進行文本的替換
updateChildren 將 Vnode 的子節點Vch和oldVnode的子節點oldCh提取出來。 oldCh和vCh 各有兩個頭尾的變數 StartIdx和EndIdx ，它們的2個變數相互比較，一共有4種比較方式。如果4種比較都沒匹配，如果設置了 key ，就會用 key 進行比較，在比較的過程中，變數會往中間靠，一旦 StartIdx>EndIdx 表明 oldCh和vCh 至少有一個已經遍歷完了，就會結束比較。
你都做過哪些Vue的性能優化？
你知道Vue3有哪些新特性嗎？它們會帶來什麼影響？
更小巧、更快速 支持自定義渲染器 支持搖樹優化：一種在打包時去除無用代碼的優化手段 支持Fragments和跨組件渲染
模板語法99%保持不變 原生支持基於class的組件，並且無需藉助任何編譯及各種stage階段的特性 在設計時也考慮TypeScript的類型推斷特性 重寫虛擬DOM 可以期待更多的編譯時提示來減少運行時的開銷 優化插槽生成 可以單獨渲染父組件和子組件 靜態樹提升 降低渲染成本 基於Proxy的觀察者機制 節省內存開銷
檢測機制 更加全面、精準、高效,更具可調試式的響應跟蹤
實現雙向綁定 Proxy 與 Object.defineProperty 相比優劣如何?
React
1、react中key的作用，有key沒key有什麼區別，比較同一層級節點什麼意思？
2、你對虛擬dom和diff演算法的理解，實現render函數
虛擬DOM 本質上是 JavaScript 對象,是對 真實DOM 的抽象表現。 狀態變更時，記錄新樹和舊樹的差異 最後把差異更新到真正的 dom 中 render函數:
3、React組件之間通信方式？
Context 提供了一個無需為每層組件手動添加 props ，就能在組件樹間進行數據傳遞的方法.如果你只是想避免層層傳遞一些屬性，組件組合（ component composition ）有時候是一個比 context 更好的解決方案。 5. 組件組合缺點：會使高層組件變得復雜
4、如何解析jsx
5、生命周期都有哪幾種，分別是在什麼階段做哪些事情？為什麼要廢棄一些生命周期？
componentWillMount、componentWillReceiveProps、componentWillUpdate在16版本被廢棄，在17版本將被刪除，需要使用UNSAVE_前綴使用，目的是向下兼容。
6、關於react的優化方法
使用return null而不是CSS的display:none來控制節點的顯示隱藏。保證同一時間頁面的DOM節點盡可能的少。
不要使用數組下標作為key 利用 shouldComponentUpdate 和 PureComponent 避免過多 render function ; render 裡面盡量減少新建變數和bind函數，傳遞參數是盡量減少傳遞參數的數量。 盡量將 props 和 state 扁平化，只傳遞 component 需要的 props （傳得太多，或者層次傳得太深，都會加重 shouldComponentUpdate 裡面的數據比較負擔），慎將 component 當作 props 傳入
使用 babel-plugin-import 優化業務組件的引入，實現按需載入 使用 SplitChunksPlugin 拆分公共代碼 使用動態 import ，懶載入 React 組件
7、綁定this的幾種方式
8、對fiber的理解
9、setState是同步還是非同步的
10、Rex、React-Rex
Rex的實現流程
用戶頁面行為觸發一個 Action ，然後 Store 調用 Recer ，並且傳入兩個參數：當前 State 和收到的 Action 。 Recer 會返回新的 State 。每當 state 更新之後， view 會根據 state 觸發重新渲染。
React-Rex:
Provider ：從最外部封裝了整個應用，並向 connect 模塊傳遞 store 。 Connect ：
11、對高階組件的理解
高階組件是參數為組件，返回值為新組件的函數。 HOC 是純函數，沒有副作用。 HOC 在 React 的第三方庫中很常見，例如 Rex 的 connect 組件。
高階組件的作用：
12、可以用哪些方式創建 React 組件？
React.createClass()、ES6 class 和無狀態函數
13、 React 元素與組件的區別？
組件是由元素構成的。元素數據結構是普通對象，而組件數據結構是類或純函數。
Vue與React對比？
數據流：
react 主張函數式編程，所以推崇純組件，數據不可變，單向數據流，
vue 的思想是響應式的，也就是基於是數據可變的，通過對每一個屬性建立Watcher來監聽，當屬性變化的時候，響應式的更新對應的虛擬dom。
監聽數據變化實現原理 ：
組件通信的區別：jsx和.vue模板。
性能優化
vuex 和 rex 之間的區別？
從實現原理上來說，最大的區別是兩點：
Rex 使用的是不可變數據，而 Vuex 的數據是可變的。 Rex 每次都是用新的 state 替換舊的 state ，而 Vuex 是直接修改
Rex 在檢測數據變化的時候，是通過 diff 的方式比較差異的，而 Vuex 其實和Vue的原理一樣，是通過 getter/setter 來比較的(如果看 Vuex 源碼會知道，其實他內部直接創建一個 Vue 實例用來跟蹤數據變化)
瀏覽器從輸入url到渲染頁面，發生了什麼？
網路安全、HTTP協議
TCP UDP 區別
Http和Https區別（高頻）
GET和POST區別（高頻）
理解xss，csrf，ddos攻擊原理以及避免方式
XSS ( Cross-Site Scripting ， 跨站腳本攻擊 )是一種代碼注入攻擊。攻擊者在目標網站上注入惡意代碼，當被攻擊者登陸網站時就會執行這些惡意代碼，這些腳本可以讀取 cookie，session tokens ，或者其它敏感的網站信息，對用戶進行釣魚欺詐，甚至發起蠕蟲攻擊等。
CSRF （ Cross-site request forgery ） 跨站請求偽造 ：攻擊者誘導受害者進入第三方網站，在第三方網站中，向被攻擊網站發送跨站請求。利用受害者在被攻擊網站已經獲取的注冊憑證，繞過後台的用戶驗證，達到冒充用戶對被攻擊的網站執行某項操作的目的。
XSS避免方式：
CSRF 避免方式：
DDoS 又叫分布式拒絕服務，全稱 Distributed Denial of Service ，其原理就是利用大量的請求造成資源過載，導致服務不可用。
❺ mvc和mvvm是前端還是後端
你這個說法其實不嚴密，MVC這種三層結構本身與前後端無關，僅僅前端自己，也可以用MVVM三層來實現，像React、Vue都是這樣的。
如果你是從整個服務角度宏觀來看的話，MVC裡面的M和C在後端，V在前端；MVVM中的M和VM在後端，V在前端（也有人認為VM不一定在後端，我傾向於VM和M的關系更緊密，實現也一般都在後端）
❻ 什麼是基於數據驅動的前端框架
首先，「數據驅動」 是一種編程範式(Programming Paradigm)，相似的有很多，詳情可以參考這里：https://en.wikipedia.org/wiki...
如果只談前端，那麼問題就會簡化很多，一般來說，會比較 「數據驅動」 與 「事件驅動」。數據驅動思想的出現一定程度上彌補了事件驅動的不足。
先說事件驅動，一個很典型的例子就是 jQuery。用 jQuery 開發的頁面執行初期就像這樣：
通過特定的選擇器查找到需要操作的節點 -> 給節點添加相應的事件監聽
響應用戶操作，效果是這樣：
用戶執行某事件（點擊，輸入，後退等等） -> 調用 JavaScript 來修改節點
這種模式，對於業務需求簡單的頁面來說沒什麼問題。只是現在前端越來越復雜，光用這樣的模式已經滿足不了很多大型項目的需求。另一方面，找節點和修改節點這件事兒，效率本身就很低。因此出現了數據驅動模式，我們就拿其中的一種，MVVM 來舉例子，執行初期就像這樣：
讀取模板，同時獲得數據，並建立 VM(view-model) 的抽象層 -> 在頁面進行填充
要注意的是，MVVM 對應了三個層，M - Model，可以簡單的理解為數據層；V - View，可以理解為視圖，或者網頁界面；VM - ViewModel，一個抽象層，簡單來說可以認為是 V 層中抽象出的數據對象，並且可以與 V 和 M 雙向互動（一般實現是基於雙向綁定，雙向綁定的處理方式在不同框架中不盡相同）。
針對用戶的操作，大致是這樣：
用戶執行某個操作 -> 反饋到 VM 處理（可以導致 Model 變動） -> VM 層改變，通過綁定關系直接更新頁面對應位置的數據
總結一下，可以簡單的這么去理解：數據驅動不是操作節點的，而是通過虛擬的抽象數據層來直接更新頁面。我覺得，主要就是因為這一點，數據驅動框架才得以有較快的運行速度（因為不需要去折騰節點），並且可以應用到大型項目。
❼ MVVM是前端還是後端范疇
如果你是從整個服務角度宏觀來看的話，MVVM中的M和VM在後端，V在前端（也有人認為VM不一定在後端，我傾向於VM和M的關系更緊密，實現也一般都在後端）。
❽ 你遇到的前端面試題都有什麼
大家好，我是王我。
隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人17號才上班。為什麼？因為長得帥的都上班比較晚。 當然，每到新年結束，又迎來了一批招聘者與面試者，我來說說作為一年工作經驗應該知道的面試題。
HTML篇
1.doctype是什麼？有哪些類型？
2.input有哪些新類型？簡要說明其8用法。
3.HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？
4.bootstrap響應式的原理是什麼？
5.多移動終端頁面適配是如何實現的？
CSS篇
1.如何實現兩列布局，左邊自適應，右邊固定寬度？
2.用CSS畫一個三角形
3.CSS實現字體大寫
4.display有哪些常用的屬性值？分別是什麼意思？
5.position為absolute，relative，fixed的定點位置
6.用三種方法清除浮動
7.請介紹一下margin塌陷問題
js篇
1.什麼是事件冒泡和捕獲？如何阻止事件冒泡？(分別用原生和jquery實現)
2.js創建對象，至少使用三種方法
3.簡述一下事件穿透以及解決辦法
4.用三種方式判斷變數類型是否是數組
5.如何實現對象的拷貝？
6.什麼是閉包？閉包的優缺點。
7.簡述一下ajax請求的過程。
8.簡述一下new一個人構造函數的人過程。
9.為什麼會有跨域？是怎麼解決跨域問題的？簡述一下原理。
10.js原始數據類型有哪些？
11.學一個函數，判斷一個變數是否是字元串
12.typeof有哪些結果？
13.剪頭函數和普通函數有什麼區別？
14.請用三種方法實現數組去重
15.href和src有什麼區別？
jquery篇
1.attr()和prop()有什麼區別？
2.on和bind有什麼區別？js動態添加的dom元素是通過on還是bind？
3.touch和click有什麼區別？
4.window.onload和jquery的ready有什麼區別？
vue篇
1.簡述一下vue的生命周期及其特點
2.vue雙向綁定的原理是什麼？
3.vue的特點有哪些？和jquery有什麼區別？
4.父子組件之間傳遞數據的方法
5.子組件如何共享數據？
6.一般有什麼工具進行數據交互？
7.webpack的原理是什麼？
8.簡述一下$nextTick的用法
瀏覽器篇
1.cookie、sessionStorage、localStorage的區別是什麼？
2.有用過瀏覽器緩存嗎？簡述一下基本的緩存機制
網路篇
1.http和https之間的區別
2.從伺服器的安全考慮，是使用get請求還是post請求？
3.URL請求的過程有哪些？
項目經驗篇
1.項目中遇到的最大挑戰以及解決辦法
2.常見的網頁優化有哪些？
作為一個面試一年以內工作經驗的前端程序員來說，以上的問題能夠倒答如流月薪6k應該不成問題啦。這些面試題也是我在很多面試中感覺經常被問到的題目。
希望大家年後找工作能夠順順利利， 千萬不要跟我一樣哦，只有帥氣就一無所有了。
大家好，我是王我，中國最帥的前端程序員。
前幾次都是各種培訓公司，各種忽悠就不提了，說說後面4次面試的經歷。
第一次是面一個小公司，不過他們好像沒有厲害的前端，來面我的是個後端，一來沒有問我關於js的知識，直接問我以前做過什麼，有沒有經驗，我本人不會吹牛，簡歷也沒怎麼包裝，就是自己把自學的知識和做的幾個小demo弄在上面，也用github掛在頁面上了，不過他根本不點開看，也不問，問我會不會vue，我當時對框架還不了解，他就說他們需要能直接上手開始寫的，所以我第一個就直接掛了。
第二次面試是一個國企，這個問了很多問題，都很基礎，js數據類型，數組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然後因為他們主要用jq，所以問了很多jq的操作，關於節點的，動畫的，我看鋒利的jq大概看了3遍，也練過多次，所以我答的很熟。然後問了些布局方面的，bootstrap我了解過，又看過css3，所以這方面也沒啥問題，最後在現場做了個題目，主要就是布局然後通過ajax呈現數據。後面聽介紹我面試的說面試官比較滿意，說我jq很熟，一面就過了。可惜後面電話面試不知怎麼回事可能表現的不夠自信，雖然沒問技術，但是我沒啥自信，把沒項目經驗什麼的也不知怎麼就一五一十交代了，估計因為這個掛掉了。
第三次沒問問題，直接就是一套題開做，我在那做了一個多小時。題目就是按照要求一步一步做一個頁面出來，我也搞忘了我當時卡在哪個地方了，坐在那得時候就是做不出來，沒有設計圖，要根據他的描述自己找個設計圖然後做，我第一次遇到這個有點懵，雖然當時沒做出來，不過回來我自己花了幾個小時把它做了。所以這個也是涼了。
第四個問的比較多，數據類型，數組操作，跨域，ajax，閉包，原型鏈，繼承，深拷貝，淺拷貝，模塊amd cmd，基本都是問的js。然後問了html5的新特性 css3 的新特性，遇到過什麼瀏覽器的兼容性問題，怎麼解決的，以後想往什麼方面發展。這個時候我已經會點vue了，照著做了個小demo，不過後來知道公司用的angularjs，面試官也沒看我做的，問也沒問。。以前聽網上說要帶上自己的項目去面試感覺沒起多大效果。
最後總結下如果面的比較初級的崗位，應該主要問js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然後js的基礎知識，對了還有apply和call也問了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一點的，暫時還沒面過，等以後面過在來回答
1. cookie session 的用途和區別，以及有效期
1、cookie數據存放在客戶的瀏覽器上，session數據放在伺服器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙
考慮到安全應當使用session。
3、session會在一定時間內保存在伺服器上。當訪問增多，會比較佔用你伺服器的性能
考慮到減輕伺服器性能方面，應當使用COOKIE。
4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。
2. vue的數據綁定原理，mvvm與mvc的區別
MVVM：
m:model數據模型層 v:view視圖層 vm:ViewModel
vue中採用的是mvvm模式，這是從mvc衍生過來的
MVVM讓視圖與viewmodel直接的關系特別的緊密，就是為了解決mvc反饋不及時的問題
圖片說明一下：
說到MVVM就要說一下雙向綁定和數據劫持的原理，
MVC：
m:model數據模型層 v:view視圖層 c:controller控制器
原理： c層需要控制model層的數據在view層進行顯示
MVC兩種方式，圖片說明：
總結：
mvvm與mvc最大的區別：
MVVM實現了view與model的自動同步，也就是model屬性改變的時候， 我們不需要再自己手動操作dom元素去改變view的顯示，而是改變屬性後該屬性對應的view層會自動改變。
不懂得可以復制鏈接查看：
https://www.pianshen.com/article/3716256399/
3. storage 的區別 sessionStorage localStorage
localStorage 的生命周期是永久性的。假若使用localStorage存儲數據，即使關閉瀏覽器，也不會讓數據消失，除非主動的去刪除數據，使用的方法如上所示。localStorage有length屬性
sessionStorage 的生命周期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其數據一直都是存在的。sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的
有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性
傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然後獲取其value屬性
但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值
所以在後面的按鈕中獲取name值 直接獲取vue實例對象data裡面的myname屬性即可
【數據為尊 ----數據映射到瀏覽器 如果數據v-model後修改（肯定input）然後到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】
緩存路由組件
使用的是vue的一個組件，參考vue的官方文檔
使用這個東西可以保證我們在切換組件的時候，原來顯示的組件不被銷毀
-----【保障組件的數據不會被切換路由而銷毀數據】
Home是對應的組件對象的名字，不是路由的名字
6.多維數組拍平
數組拍平也稱數組扁平化，就是將數組裡面的數組打開，最後合並為一個數組
一紅六種方法吧……
了解的請看： https://www.cnblogs.com/guan-shan/p/10165737.html
7.跨域的原因 解決方案
跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。
這樣就可以說同源策略----協議---埠---域名
原生的src和href可以解決跨域
代理可以解決
請求頭也可以攜帶瀏覽器提示的也可以解決
一般都是後端解決跨域問題
【別的需要了解看下方鏈接】
https://blog.csdn.net/qq_41604383/article/details/100770100
8.uniApp兼容問題§ 如果你使用cli創建項目（即項目根目錄是package.json），不管用什麼ide，即便是用HBuilderX，切記cli項目的編譯器是在項目下的，HBuilderX不管怎麼升級都不會影響編譯器版本。你需要手動npm update來升級編譯器。以及如果你想要安裝less、scss等預編譯器，也需要自己npm安裝在項目下，而不是在HBuilderX的插件管理里安裝。
§ 如果你使用離線打包，請注意HBuilderX升級後，真機運行基座和雲打包對應引擎跟隨HBuilderX升級，而你的sdk需要手動升級。sdk的版本升級一般滯後HBuilderX正式版升級一兩天。
§ 如果你使用自定義基座，之前製作的自定義基座是不會跟隨HBuilderX升級的，升級HBuilderX後你應該重新製作新版自定義基座。
§ 如果你使用wgt升級，新版HBuilderX編譯的wgt，運行到之前的runtime上，一定要先測試好，看有沒有兼容性問題。如果有問題，就不要wgt升級，整包升級。
§ 考慮到向下兼容，uni-app編譯器在升級為新的自定義組件模式後，同時保留了對老編譯模式的向下兼容。
在HBuilderX alpha版中，App端一定會使用新編譯器，不理會manifest配置。
在HBuilderX 正式版中，新創建的項目會使用新編譯器，老項目不會強制使用，而是開發者自己在manifest里配置開啟。
§ 如果你使用其他ide開發uni-app，會經常因為拼錯單詞而運行失敗，因為經過webpack編譯一道，很多錯誤反應的不夠直觀，排錯時間很長，不如從開始就依賴有良好提示的HBuilderX，避免敲錯單詞。
§ 雲打包的引擎版本說明
HBuilderX Alpha，只有1套雲打包機，不管你的HBuilderX alpha版本多少，對應的打包機一定是最新的alpha版的客戶端引擎。
HBuilderX正式版，有2套打包機，一個是最新正式版，一個是次新正式版。
中間的緊急更新版本沒有獨立打包機。
舉個例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。
那麼當前可用的打包機有1.9.1和1.8.2這2台。（即每個大版本的最後一個版本）
除了這2個HBuilderX版本外，其他版本的雲打包都指向最新的1.9.1版對應的打包機。（即只保留2個大版本的雲打包機）
【詳情請看】
https://ask.dcloud.net.cn/article/35845
一、HTML
HTML書寫規范
H5新增標簽
HTML渲染過程
二、CSS
css盒子模型概念
css彈性布局概念
三、JavaScript
事件模型
DOM2級事件模型
閉包
原型鏈
四、移動Web開發
常見的布局方案
移動端前端常見的觸摸相關事件touch、tap、swipe等整理
移動端前端手勢事件
移動端頁面渲染優化
GPU渲染
GPU核心渲染過程
五、調試
常用的調試工具
Chrome控制台調試js使用
移動端測試
六、HTTP網路知識
常見的HTTP狀態碼
不同請求類型的區別
WEB緩存方案
——————————
牛客網（www.nowcoder.com）
- 專業IT筆試面試備考平台
- 最全C++JAVA前端等互聯網技術求職題庫
- 全面提升IT編程能力
- 程序員交友聖地
分享了一些Web前端的面試題，限時一小時，你看看自己能夠答出多少道！
放心，這些面試題都是一些非常基礎的知識，只要你在平時認真聽課、學習了，那麼這些面試題肯定不會難道你。
建議：雖然沒有人監督你，但還是希望你不要去尋找答案，脫離網路，拿起紙筆，你試一下自己究竟能夠答出個什麼水平！有沒有真本領？答案盡在這些面試題里！那麼，你准備好了嗎？OK！計時開始！
一、HTML常見題目01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義？
02、HTML5為什麼只需要寫？
03、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
04、頁面導入樣式時，使用link和@import有什麼區別？
05、介紹一下你對瀏覽器內核的理解？
06、常見的瀏覽器內核有哪些？
07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
08、如何區分HTML和HTML5？
09、簡述一下你對HTML語義化的理解？
10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
二、CSS類的題目01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
02、CSS選擇符有哪些？哪些屬性可以繼承？
03、CSS優先順序演算法如何計算？
04、CSS3新增偽類有那些？
05、如何居中p？如何居中一個浮動元素？如何讓絕對定位的p居中？
06、display有哪些值？說明他們的作用。
07、position的值relative和absolute定位原點是？
08、CSS3有哪些新特性？
09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
三、Java類的題目
01、介紹Java的基本數據類型。
02、說說寫Java的基本規范？
03、Java原型，原型鏈？有什麼特點？
04、Java有幾種類型的值？(堆：原始數據類型和棧：引用數據類型)，你能畫一下他們的內存圖嗎？
05、Java如何實現繼承？
06、Java創建對象的幾種方式？
07、Java作用鏈域？
08、談談This對象的理解。
09、eval是做什麼的？
10、什麼是window對象？什麼是document對象？
OK，一小時到了，這個時間可不算短了，那麼這些面試題你答出了幾道呢？你寫的答案正確了嗎？現在你可以去翻看答案了。
如果你答出了絕大多數的或者是全部的題，並且答案也正確了，那麼恭喜你……
你這時心裡是不是有點小竊喜，認為自己有能力拿高薪了？雖然我也很想這么告訴你，但事實上這只能表明你的基礎扎實，畢竟這只是一些非常基礎的面試題。騷年~繼續努力吧！
如果你只答出了小部分或者答出了大部分題但答案不正確，那麼我只想說：「騷年，你的水平還差的遠呢。」連這么基礎的題你都打不出來，還想拿高薪？回去再練一段時間吧！
扎實的基礎是你拿高薪的重要武器，如果你連基礎都不扎實，那麼想要攻克「高薪」這個厚實的堡壘，那隻是痴人說夢罷了。
1.前端框架類問題，問你會不會用vue react啊
2.語言類，問你一些JavaScript語言的問題
3.項目經驗，讓你講講做過的項目，遇到的問題和解決之道