闪银奇异面试
2、事件環機制: 函數執行前入棧,執行后出棧。如若遇到了一些異步操作像回調函數以及ajax、setTimeout等,會先將他們交給瀏覽器的其他模塊去執行,執行完后,會把回調函數放入到taskqueue中。當所有的call stack執行完后再開始執行task queue中的函數。?
3、事件隊列: macro-task 包括:script(整體代碼), setTimeout, setInterval, setImmediate, I/O, UI rendering。?
????????????????????micro-task 包括:process.nextTick,? Promises , Object.observe, MutationObserver?
????????????????????執行順序:函數調用棧清空只剩全局執行上下文,然后開始執行所有的micro-task。當所有可執行的micro-task執行完畢之后。循環再次執行macro-task中的一個任務隊列,執行完之后再執行所有的micro-task,就這樣一直循環。
例子:
(function test() {setTimeout(function() {console.log(4)}, 0);new Promise(function executor(resolve) {console.log(1);for( var i=0 ; i<10000 ; i++ ) {i == 9999 && resolve();}console.log(2);}).then(function() {console.log(5);});console.log(3); })()1. 遇到setTimeout,交給其他模塊執行,執行完后回調放入macro-task中?
2. 遇到Promise,立即執行里面的function,輸出1。?
3. 循環開始,遇到resolve(),修改Promise狀態為fulfill。繼續執行,輸出2。?
4. 遇到then,將回調放入micro-task中。?
5. 繼續執行,輸出3。?
6. call stack執行完畢了。開始執行micro-task中的回調函數,輸出5。?
7. micro-task執行完畢,開始執行macro-task中的回調函數,輸出4。?
8. 結束。
4、slot 插槽: 讓組件拓展性更強
1.匿名slot使用
//定義組件my-component <div class="myComponent"><slot></slot> </div> //使用方法 <my-component><p>我就是slot的替代內容,這里可以放任何標簽元素,即使是一長串ul>li列表</p> </my-component>2.具名slot使用
//定義組件my-component <div class="myComponent"><slot name="mySlot"></slot> </div> //使用方法 <my-component><p slot="mySlot">我就是這個叫mySlot的slot替代內容,這里可以放任何標簽元素,即使是一長串ul>li列表,但是我是一個有名字的寶寶,所以你必須給我加上slot="mySlot",不然我就報錯給你看!</p> </my-component>如果不在有slot的組件里加入任何標簽,slot什么都不會顯示的。
????????????params有兩種方法:https://blog.csdn.net/k491022087/article/details/70232965
????????????1、顯示在url中
????????????main.js?params傳值是通過 :[參數值] 如path: "/home/game/:num"??????
????????????home.vue 在home中具體的值就跟在路徑后面,如 “/home/game/123”,也就是說傳遞給子路由的值就是 123
????????????game.vue 在子路由中,通過 this.$route.params.參數名來接受傳遞過來的值
????????????2、不顯示在url中
?????????????只需將上面的main.js中的定義路由改為如下樣子,在子路由中通過name來給路徑其一個game1的別名。
????????????home.vue 中router-link修改為:to="{ name:'game1', params: {num: 123} }" params中是要傳遞的參數,這樣傳遞的參數就不會顯示在url中。???????
??????6、vue生命周期:https://segmentfault.com/a/1190000010336178
| beforeCreate | 在實例初始化之后,數據觀測(data observer) 和 event/watcher 事件配置之前被調用。 |
| created | 實例已經創建完成之后被調用。在這一步,實例已完成以下的配置:數據觀測(data observer),屬性和方法的運算, watch/event 事件回調。然而,掛載階段還沒開始,$el 屬性目前不可見。 |
| beforeMount | 在掛載開始之前被調用:相關的 render 函數首次被調用。 |
| mounted | el 被新創建的 vm.$el 替換,并掛載到實例上去之后調用該鉤子。如果 root 實例掛載了一個文檔內元素,當 mounted 被調用時 vm.$el 也在文檔內。 |
| beforeUpdate | 數據更新時調用,發生在虛擬 DOM 重新渲染和打補丁之前。你可以在這個鉤子中進一步地更改狀態,這不會觸發附加的重渲染過程。 |
| updated | 由于數據更改導致的虛擬 DOM 重新渲染和打補丁,在這之后會調用該鉤子。當這個鉤子被調用時,組件 DOM 已經更新,所以你現在可以執行依賴于 DOM 的操作。 |
| activated | keep-alive 組件激活時調用。 |
| deactivated | keep-alive 組件停用時調用。 |
| beforeDestroy | 實例銷毀之前調用。在這一步,實例仍然完全可用。 |
| destroyed | Vue 實例銷毀后調用。調用后,Vue 實例指示的所有東西都會解綁定,所有的事件監聽器會被移除,所有的子實例也會被銷毀。 |
- created和mounted區別:掛載
7、Vuex中mutations和actions的區別
mutaions 同步 ;actions 異步
????區分 actions 和 mutations 并不是為了解決競態問題,而是為了能用 devtools 追蹤狀態變化。
????事實上在 vuex 里面 actions 只是一個架構性的概念,并不是必須的,說到底只是一個函數,你在里面想干嘛都可以,只要最后觸發 mutation 就? ?行。異步競態怎么處理那是用戶自己的事情。
vuex 真正限制你的只有 mutation 必須是同步的這一點(在 redux 里面就好像 reducer 必須同步返回下一個狀態一樣)。同步的意義在于這樣每一個 mutation 執行完成后都可以對應到一個新的狀態(和 reducer 一樣),這樣 devtools 就可以打個 snapshot 存下來,然后就可以隨便 time-travel 了。如果你開著 devtool 調用一個異步的 action,你可以清楚地看到它所調用的 mutation 是何時被記錄下來的,并且可以立刻查看它們對應的狀態。
親測:?如果在mutation中做了異步操作,在dev-tools中會立即打印一個snapshot,而此時異步操作還沒有執行完,此時的snapshot的信息是錯誤的。
而在action中做異步操作dev-tools會等等異步操作執行完才去打印mutation的一個snapshot,這樣便于我們回查time-travel,查看在某個mutation里的變化。
8、jQuery和vue的區別 ?????? ? jq是一個工具庫,操作dom,對其進行賦值、取值、事件綁定等操作,其實和原生的HTML的區別只在于,可以更方便的選取和操作DOM對象,而數據和界面是在一起的。?????????vue是超輕量級框架,操作數據,對數據進行操作不再需要引用相應的DOM對象,可以說數據和View是分離的,他們通過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。
9、對vue組件化的理解 ????vue中的組件是一個自定義標簽, Vue.js的編譯器為它添加了特殊功能。 vue也可以擴展原生的html元素, 封裝可重用的代碼
組件的基本組成:樣式結構、行為邏輯、數據
組件化開發的好處:提高開發效率、方便重復使用、簡化調試步驟、提升整個項目的可維護性、便于協同開發
10、怎么防止跨域攻擊(CSRF)https://blog.csdn.net/xuaman/article/details/54340290
CSRF攻擊是源于WEB的隱式身份驗證機制!WEB的身份驗證機制雖然可以保證一個請求是來自于某個用戶的瀏覽器,但卻無法保證該請求是用戶批準發送的
CSRF的防御可以從服務端和客戶端兩方面著手,防御效果是從服務端著手效果比較好,現在一般的CSRF防御也都在服務端進行。
???? (1).Cookie Hashing(所有表單都包含同一個偽隨機值):在表單里增加Hash值,以認證這確實是用戶發送的請求。 然后在服務器端進行Hash值驗證
????????????(2).驗證碼
????????????(3).One-Time Tokens(不同的表單包含一個不同的偽隨機值)
11、web前端攻擊及防御措施? ?https://blog.csdn.net/vivian_jay/article/details/58667283
一、XSS
1、Reflected XSS? ?2、Stored XSS? ?3、DOM-based XSS
防御措施:
二、 CSRF
防御措施
三、SQL注入
防御措施
采用sql語句預編譯和綁定變量,是防御sql注入的最佳方法。采用JDBC的預編譯語句集,它內置了處理SQL注入的能力,只要使用它的setXXX方法傳值即可。
使用正則表達式來過濾一些sql關鍵字,如or、where等。
四、cookie竊取和session劫持
五、釣魚攻擊【重定向攻擊】
防御措施?
對所有的重定向操作進行審核,以避免重定向到一個危險的地方.
六、Http Heads攻擊
防御措施?過濾所有的response headers,除去header中出現的非法字符,尤其是CRLF。
七、拒絕服務攻擊【DoS】
防御措施?對于SYN flood:啟用SYN Cookie、設置SYN最大隊列長度以及設置SYN+ACK最大重試次數。
八、文件上傳攻擊
分類
防御措施
12、28種設計模式
1.?? 簡單工廠模式:定義:用一個單獨的類完成創建對象的過程,即工廠類。理解:生產對象的工廠,由參數生成相應的對象,容易擴展,擴展的同時不需要也不影響現有功能。
2.?? 策略模式:定義:它定義了算法家族,分別封裝起來,讓它們直接可以互相替換,此模式讓算法的比啊好,不會影響到使用算法的客戶。理解:可以理解為“受保護的簡單工廠模式”,把簡單工廠模式封裝起來,通過協調類調用工廠,對客戶端完全屏蔽工廠。
3.?? 單一職責原則:定義:就一個類而言,應該僅有一個引起它變化的原因。理解:類的職責單一化,減少類的負擔。
4.?? 開放-封閉原則:定義:軟件實體(類、模塊、函數等等)應該可以擴展,但是不可更改。理解:對修改封閉,對擴展開放。解決方法是抽象,用抽象是隔離變化。
5.?? 依賴倒轉原則:定義:高層模塊不應該依賴于底層模塊,兩個都應該依賴于抽象。抽象不應該依賴細節,細節應該依賴抽象。理解:依賴倒轉原則是“封閉-開放”原則實現的方針、指導思想。
6.?? 里氏代換原則:定義:子類型必須能夠替換掉他們的父類型。理解:以抽象類或接口為父類,在使用時,以父類類型的“對象變量”作為參數,這樣就可以接受任何一個繼承抽象類或者實現接口的類的子類(的實例),相當于子類代換了父類,利用多態,可以完美實現“修改封閉,擴展開放”。
7.?? 裝飾模式:定義:動態的給一個對象添加一些額外的職責,就增加功能來說,裝飾模式比生成子類更為靈活。理解:把人和服飾分離,即高層模塊不應該依賴底層模塊,通過服飾抽象類(接口),很好的進行了分離,人使用接口,擴展時實現接口,體現了依賴于抽象的原則。
8.?? 代理模式:定義:為其他對象提供一種代理以控制對這個對象的訪問。理解:無,非常簡單。
9.?? 工廠方法模式:定義:定義一個用于創建對象的接口,讓子類決定實例化哪一個類。工廠方法使一個類的實例化延遲到其子類。理解:把工廠看成一個接口,讓工廠的每個創建對象的功能去實現這個接口,去創建不同的對象,通過抽象,分解了工廠,從而封閉了修改,添加工廠新成員只需添加實現接口的類即可。但是這樣無形的把判斷創建哪個對象的壓力(職責)放在了客戶端,使客戶端變得復雜,不是很好的辦法。
10.?? 原型模式:定義:用原型實例指定創建對象的種類,并且通過拷貝這些原型創建新的對象。理解:原型模式就是實現ICloneable接口,實現這個接口唯一的Clone方法克隆自己。需要重點理解MenberwiseClone方法。理解后可知:淺復制就是克隆本身,完全遵從MenberwiseClone方法的規則(克隆新對象,字段復制,引用只復制引用),即外層對象克隆,內層對象引用。而深復制是增加了處理手段,讓內層類實現ICloneable接口,在外層類創建對象(new)時,內層類克隆自己,實現內層類的分離。
11.?? 模版方法模式:定義:定義一個操作中的算法骨架,而將一些步驟延遲到子類中。模版方法使得子類可以不改變一個算法的結構即可重定義該算法的某些特定步驟。理解:當子類中重復與不重復的代碼混雜時,把重復的代碼搬到父類,不重復的(特有的)用虛方法或抽象方法延遲到子類中實現。在父類中定義一個整體的骨架方法,通過這個方法把父類的實現和子類的實現整合在一起完成功能。
12.?? 迪米特法則:定義:如果兩個類不必彼此直接通信,那么這兩個類就不應當發生直接的相互作用,如果其中一個類需要調用另一個類的某一個方法的話,可以通過第三者轉發這個調用。理解:減少無關類直接的耦合,方便修改。
13.?? 外觀模式:定義:為子系統中的一組接口提供一個一致的界面,此模式定義了一個高層接口,這個接口使得這一子系統更加容易使用。理解:把一系列具有一定聯系的子系統功能整合到外觀類的一個方法中,復雜的交互都由外觀類完成,客戶端只需要調用外觀類的方法即可。外觀類就像一個形象良好的接口,供客戶端簡潔的調用。
14.?? 建造者模式:定義:將一個復雜對象的構建與它的表示分離,使得同樣的構建過程可以創建不同的表示。理解:把一系列穩定的、普遍的、復雜的裝配過程放在指揮類中完成,定義抽象父類,用多態去創建不同的子類(產品),用戶只需要調用指揮類并指定產品即可。把復雜的裝配隔離到指揮類。
15.?? 觀察者模式:定義:定義了一種一對多的依賴關系,讓多個觀察者對象同時監聽某一個主題對象(通知者)。這個主題對象在狀態發生變化時,會通知所有觀察者對象,使他們能夠自動更新自己。理解:當一個對象變動時要通知其他不定個數的對象。變動的類相當于通知者,被通知的類相當于觀察者??梢杂眉蠈崿F,雙方都依賴于抽象(通知者有抽象通知者,觀察者有抽象觀察者,這樣會很容易擴展)。也可以用委托,大大減少耦合(觀察者必須指定通知者,也就是讓誰通知)。
16.?? 抽象工廠模式:定義:提供一個創建一系列相關或者相互依賴對象的接口,而無需指定他們具體的類。理解:簡單工廠模式----工廠方法模式(抽象工廠來分離工廠功能)----抽象工廠模式(細化抽象,把每一個分開的小工廠繼續細化,再分成不同的方法(接口方法),創建該工廠的又一個分支,實現當前工廠下的多功能。)。反射理解:反射就是可以動態的創建不同類的實例,把創建實例從編譯時改成運行時??梢栽诠S模式中替換switch、if等分支語句。反射要求以字符串的形式傳入要實例化的類,所以可以用變量代替,大大的增加了靈活性。
17.?? 狀態模式:定義:當一個對象的內在狀態改變時允許改變其行為,這個對象看起來像是改變了其類。理解:當程序運行時需要不斷地判斷某一條件(狀態),然后根據條件去執行不同的動作,就可以考慮用狀態模式。狀態模式可以消除龐大的分支判斷,把不同狀態的轉移邏輯和每個狀態的動作轉移到抽象狀態類的子類。讓每個子類決定下一個狀態(每個子類都進行判斷,滿足則執行自己功能,不滿足則轉向下一個類,直到得到處理或者鏈結束。每個子類只需要知道下一個類是哪個即可,無需知道整個鏈式結構)。
18.?? 適配器模式:定義:將一個類的接口轉換成客戶希望的另外一個接口。此模式使得原本由于接口不兼容而不能一起工作的那些類可以一起工作。理解:通過一個翻譯類(適配器類)把一個類的接口轉化為另一種形式,通過調用這個翻譯類的期望接口來間接調用另一個類。
19.?? 備忘錄模式:定義:在不破壞封裝性的前提下,捕獲一個對象的內部狀態,并在該對象之外保存這個狀態。這樣以后就可將該對象恢復到原先保存的狀態。理解:備忘錄模式把數據保存在箱子類中(體現了數據保存在對象外),然后通過備忘錄管理類去訪問箱子。在主類保存時,新建一個箱子類實例,保存數據,并把該箱子的實例交給管理類托管,恢復時調用管理類托管的箱子即可。
20.?? 組合模式:定義:將對象組合成樹形結構以表示“部分-整體”的層次結構。組合模式使得用戶對單個對象和組合對象的使用具有一致性。理解:核心思想就是樹枝類和樹葉類。樹枝可以分支(遍歷),而樹葉不可以??梢园褬淙~理解為“功能終端”,具體功能實現者,而樹枝就是可以遍歷其包含枝、葉的分支者。樹枝或樹葉隸屬于哪個樹枝就加入那個樹枝的集合,通過遞歸即可達到效果。
21.?? 迭代器模式:定義:提供一種方法順序訪問一個聚合對象中的各個元素,而又不暴露該對象的內部表示。理解:無,較簡單。
22.?? 單例模式:定義:保證一個類僅有一個實例,并提供一個訪問它的全局訪問點。理解:保證一個類只有一個實例,這個責任要放到這個類,而不應該讓別的類決定。方法是把類的構造方法改成私有,確保外界無法通過new實例化,然后提供一個公有的靜態的方法去創建實例。把保護實例的責任放在這個方法中(雖然構造方法私有,但是類內部還是可以訪問的。創建成功后用這個公共靜態方法返回,供調用者使用。這樣做的好處是客戶端只需要使用該類即可,至于是否實例化、如何實例化由類自己負責,減輕了客戶端的壓力,減少耦合。)。
23.?? 橋接模式:定義:將抽象部分與它的實現部分分離,使他們都可以獨立的變化。理解:把混雜在一起的抽象分離出來,讓它們單獨實現。然后通過合成/聚合重新整合在一起。這樣可以減少類之間的耦合,使結構松散,避免龐大的繼承體系,增強復用性。體現在代碼中就是把復雜的繼承關系化為“方法-參數”,“部分”對象作為“整體”的方法的參數,通過參數聚合在一起(剛才講到的是聚合,個人認為合成應該不是靠參數,應該是一種“你中有我,我中有你”的強耦合結構)。
24.?? 命令模式:定義:將一個請求封裝為一個對象,從而使你可用不同的請問對客戶進行參數化;對請求排隊或者記錄請求日志,以及支持可撤銷的操作。理解:通過服務員類對請求者和執行者進行解耦合。
25.?? 職責鏈模式:定義:使多個對象都有機會處理請求,從而避免請求的發送者和接受者之間的耦合關系。將這個對象連成一條鏈,并沿著這條鏈傳遞該請求,直到有一個對象處理它為止。理解:把具有一定職責(處理能力)的類抽象成一個抽象父類,父類中包括了設置上級的方法和抽象處理方法。在客戶端設計好上級關系,然后調用最低以及的對象處理事務,當該類無法處理時,會自動調用它的上一級的處理方法,直到可以處理為止。好處是通過設置上級把職責對象串在一起,每個部分知道上級是誰即可,無需了解整個鏈的結構,而且請求者只需調用最底層的職責對象即可,最終被哪個對象處理請求者不知道也無需知道。一切都是自動進行的。
26.?? 中介者模式:定義:用一個中介對象來封裝一系列的對象交互。中介者使各對象不需要顯式地相互引用,從而使其耦合松散,而且可以獨立地改變它們之間的交互。理解:中介者承擔了一切復雜通信,在關注對象中要指定中介類,在中介類中要包含所有的關注對象。通過關注對象的方法去調用中介者的協調方法,客戶端不直接與中介類交互。
27.?? 享元模式:定義:運用共享技術有效地支持大量細粒度的對象。理解:通過usingsystem.Collections 引用Hashtable類來管理對象。給每個類一個標識(key),通過key來判斷對象是否存在,存在直接按key返回,不存在則創建,然后通過Add方法加入Hasthtable類對象中,注意必須指定key。
28.?? 解釋器模式:定義:給定一個語言,定義它的文法的一種表示,并定義一個解釋器,這個解釋器使用該表示來解釋語言中的句子。理解:解釋器模式就是用“迷你語言”來表現程序要解決的問題,以迷你語言寫成“迷你程序”來表現具體的問題。
29.?? 訪問者模式:定義:表示一個作用于某對象結構中的各元素的操作。它使你可以在不改變各元素的類的前提下定義作用于這些元素的新操作。理解:能力有限,暫未理解該模式。
總結
- 上一篇: Linux内核态内存泄露检测工具——Km
- 下一篇: 人间的四月天