原创 Object.defineProperty和Proxy實現數據劫持
1. Object.definePropery let obj = { name: 'zyp', likes: ['sleep', 'read'] }; function observe(obj) { Ob
2020-06-22 06:42:17
原创 EventHub簡單實現
以下是EventHub的簡單實現，遵循發佈-訂閱設計模式。 class EventHub { constructor() { this.events = {} } on(eventName, fn)
2020-06-22 06:42:17
原创 字符串搜索匹配之 test&search&indexOf&match&&exec&includes
這裏要討論的是字符串搜索匹配時常用到的API： test search indexOf match exec includes str.search(reg/str) 該方法返回的是第一次匹配得到的結果，如果匹配到，返回第一
2020-05-30 21:19:44
原创 NodeList和HTMLCollection
首先NodeList和HTMLCollection都是DOM節點的集合。 NodeList中包含的節點類型可能是Element/Text/Comment/Document/DocumentFragment等，我們知道nodeTy
2020-05-30 21:19:33
原创 clientY、screenY、pageY、offsetY和offsetTop分別指的是什麼
clientY、screenY、pageY、offsetY這四者是事件對象event上的屬性，offsetTop是目標元素的屬性。、 clientY: 事件距離瀏覽器可視視口頂部的距離（工具欄往下，不包含滾動條的距離）； scre
2020-05-11 14:07:37
原创 實現元素的水平和垂直居中方法總結
非絕對定位元素 方法一 利用flex佈局，IE瀏覽器兼容性不好。 //HTML <div class="father"> <div class="son"> 哈哈 </div> </div> //css .fathe
2020-03-26 17:20:38
原创 函數防抖和函數節流
函數防抖(debounce) 一般情況下，事件多次觸發，導致回調函數被多次執行。將回調函數包入debounce函數中後，回調函數將在事件最後一次觸發經過interval時間後執行一次。 debounce函數 //匿名回調被多
2020-02-20 19:10:15
原创 XSS和CSRF
XSS: Cross-site scripting,跨站點腳本攻擊。爲了和 CSS 區分，這裏把攻擊的第一個字母改成了 X，於是叫做 XSS。 XSS 的原理是：HTML注入惡意代碼後服務端未經過驗證，返回到前端頁面。惡意代碼未經
2019-09-02 22:41:00
原创 async和await
首先要說明的是async和await的用法都是promise的語法糖，更確切的說：async 函數就是 Generator 函數的語法糖。await必須在async函數中使用，但是async函數的調用不一定需要await關鍵字
2019-08-28 14:31:26
原创 如何實現絕對定位元素的水平和垂直居中
方法一 以下方法支持IE9+(包含IE9，親測有效) //HTML <div class="father"> <div class="son"> 哈哈 </div> </div> //CSS .father {
2019-08-22 21:56:39
原创 BFC
MDN 對 BFC 的描述 塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其他元素交互的區域。 下列方式會創建塊格式
2019-07-09 14:30:30
原创 js繼承的幾種寫法
Object.getPrototypeOf() + Object.create() var a = {name: 'zyp'} var ap = Object.getPrototypeOf(a) var b = Object.
2019-06-10 15:05:18
1
原创 JavaScript設計模式之觀察者模式
適用場景：一個地方發生了更改，其他好幾個地方進行相應的更改。 實際應用： MVVM中的MV過程，Vue的事件總線，事件隊列。 ES5實現方式 var Subject = function () { this.obs
2019-04-28 15:36:00
原创 JavaScript設計模式之橋接模式
適用場景： 不同的對象(A,B)有相同的行爲和特徵，將這部分行爲和特徵單獨出來，形成一個新的對象©，在構建對象(A,B)時傳入對象C，對象(A,B)的行爲函數中調用對象C對應的行爲函數。 實際應用場景： Toast、Message 兩
2019-04-09 22:48:45