原创 使用Object.defineProperties()模擬實現Vue的綁定原理
Vue的綁定原理 Vue的綁定原理可以概括爲：保護Data屬性+觀察這模式+新Dom樹(虛擬) Vue的綁定原理可以參看Vue的綁定原理 我們以下面的代碼爲例 <!DOCTYPE html> <html lang="en">
2020-05-19 08:49:32
原创 vue的綁定原理
MVVM設計模型 (1).界面(View) HTML+CSS,這裏的HTML是增強版的。 比如在MVVM中的HTML支持變量：{{n}}，在MVVM中的HTML可以寫分支和循環。 (2).數據模型(Model) 是專門保存頁
2020-05-17 13:01:02
原创 易懂-js的閉包
什麼是閉包 從作用上說：既能重用一個變量，又能保護變量不會被全局污染的一種編程方式 閉包的本質/原理 外層函數的作用域對象，被內層函數引用着無法釋放，就形成閉包對象 要理解上面這兩句話首先我們來看一個小例子 <script
2020-05-15 10:07:43
原创 Dom的事件模型、事件冒泡、阻止冒泡和事件委託
什麼是事件模型 Dom標準的事件模型：當事件發生時，其實會經歷三個階段！ 由外向內的捕獲階段：從Dom樹根節點開始，到當前點擊的元素位置，遍歷並記錄當前元素各級父元素上綁定的事件處理函數，這個階段只是記錄並不觸發。 目標觸發階段
2020-05-15 10:07:43
原创 實現橫向進度條（可拖拽）
橫向進度條的實現(可拖拽) 橫向進度條是使用挺廣的，比如音樂播放器的進度條、上傳下載、加載的時候也會用到橫向進度條， 下面是播放器的效果圖 我就以上面的進度條爲例來實現橫向的進度條。首先，需要介紹一下H5的新標籤progress
2020-05-13 22:42:16
原创 掌握js的Dom樹
一、Dom樹 什麼是Dom樹 其實網頁中所有HTML內容在內存中都是保存在一棵樹形結構上的，內存中這棵保存一個網頁中所有內容的樹形結構，就稱爲DOM樹。 當瀏覽器掃描到一個.html文件，在將.html內容顯示到瀏覽器窗口中給
2020-05-07 20:16:48
原创 易懂js的淺克隆和深克隆原理
什麼是克隆 其實js裏的克隆跟生活裏說的克隆是一樣的。有一個本體，克隆出跟本體一摸一樣的副體，當本體“受傷”時副體是不會“受傷”的，js的克隆也是如此。 來看下面代碼 <script> var benti = {
2020-05-03 03:55:27
原创 簡單方法實現千分符
什麼是千分符 通常在數字每隔三位,加一個“,”,即千位分隔符,便於讀數。 在購物時候，查看餘額的時候都會用到千分符，實現千分符有很多方法，下面來說一種比較簡單的做法。 利用零寬斷言實現千分符 <script> //
2020-05-01 11:24:02
原创 ES5嚴格模式下的保護對象
爲什麼要保護對象 在舊的js中的對象毫無自保能力，對象的結構和屬性值可以被任意修改。 比如下面的例子 var eric = { eid: 1, ename: "xiaoming", money: "10",
2020-05-01 11:24:02
原创 關於ES6箭頭函數的this問題
什麼是箭頭函數： 主要因爲舊js總是寫function，太繁瑣！ES6推出專門簡化所有function的新的定義函數的語法 箭頭函數要怎麼使用 去掉function,在()和{}之間加上=> //普通函數 function
2020-05-01 11:24:02
原创 ES6解構之數組解構、對象解構、參數解構
解構 什麼是解構 從一個大的對象或數組中提取出個別屬性或方法單獨使用，解構分爲數組解構、對象解構、參數解構。 什麼時候需要要用到解構 只想使用一個大的對象或數組中的個別成員時，就應該考慮用解構，因爲解構會比較簡化。 一、數
2020-05-01 11:24:02