原创 canvas小畫板--（1）平滑曲線
功能需求 項目需求：需要實現一個可以自由書寫的小畫板 簡單實現 對於熟悉canvas的同學來說，這個需求很簡單，大致邏輯如下： 1）監聽事件pointerdown，pointermove，pointerup 2）標記是否拖拽畫線模式變量 i
2020-08-04 13:17:09
原创 JavaScript fetch接口
JavaScript fetch接口 fetch，說白了，就是XMLHttpRequest的一種替代方案。如果有人問你，除了Ajax獲取後臺數據之外，還有沒有其他的替代方案？ 這是你就可以回答，除了XMLHttpRequest對象來獲取後臺
2020-07-18 13:26:05
原创 Uncaught Error: Cannot find module 'strip-ansi'
我的項目是typescript開發語言，原本我只寫了".ts"，導致上面運行yarn dev編譯報錯，頁面報錯。加上".js"後成功 報錯原因：在webpack.config.js配置中 resolve字段下的extensi
2020-07-10 13:17:18
1
原创 vue 子組件data屬性爲啥必須是一個函數
其實就是一個原因,實例化出來的根組件只有一個,你可以將它寫成對象,或者是返回一個對象的函數。但是子組件不夠健壯,容易在內存的地址中互相影響,就像我們常用的深淺拷貝所能解決的那樣。所以爲了防止意外的發生,是不被允許在子組件中使用對象來寫dat
2020-06-23 15:07:45
原创 computed methods watch filters
computed(計算屬性) 計算屬性該屬性裏面的方法必須要有return返回值，這個返回值就是（value值）。 有幾個關鍵點 1) 計算後屬性不需要在data中重複定義 2) 計算後屬性必須渲染後，綁定的方法纔會生效這
2020-06-13 14:10:40
原创 區分http請求狀態碼來理解緩存（協商緩存和強制緩存）
什麼是http緩存呢，當我們使用chrome瀏覽器，按F12打開控制檯，在網絡請求中有時候看到狀態碼是200，有時候狀態碼是304，當我們去看這種請求的時候，我們會發現狀態碼爲304的狀態結果是：Status Code: 304 Not M
2020-06-10 15:29:52
原创 canvas繪製--圓角多邊形
如下圖，三角形ABC，我們繪製成圓角，頂點處是個圓弧。 知道多半形頂點座標，利用canvas的api方法 arcTo() 就可以實現了。一個簡單的實現： 1 <!DOCTYPE html> 2 <html lang="en"> 3
2020-04-25 13:43:41
原创 Git回滾代碼到某個commit
回退命令： $ git reset --hard HEAD^ 回退到上個版本$ git reset --hard HEAD~3 回退到前3次提交之前，以此類推，回退到n次提交之前$ git reset --hard commit_i
2020-03-18 14:24:00
原创 Object.assign()的使用
一、Object.assign()對象的拷貝 Object.assign() 方法用於將所有可枚舉屬性的值從一個或多個源對象複製到目標對象。它將返回目標對象。 Object.assign(target, ...sources) 【ta
2020-03-05 14:15:51
原创 ES6 延展操作符
延展操作符（Spread operator） 延展操作符 = ...可以在函數調用/數組構造時，將數組表達式或者string在語法層面展開，還可以在構造對象時，將對象表達式按key-value的方式展開。 1 函數調用 2 fun
2020-03-03 14:16:47
原创 ES6 解構賦值
解構賦值 解構賦值可以方便快速的從數組或者對象中提取賦值給定義的變量。 獲取數組中的值 從數組中獲取值並賦值到變量中，變量的順序與數組中對象順序對應。 1 var foo = [1,2,3,4,5] 2 3 var [one,tw
2020-03-02 14:17:52
原创 Service Worker
1. Service Worker的身份 Service的意思是服務，Worker的意思是工人，那麼Service Worker的意思就是服務員。這個員工是2014年6月HTML5新招的實習生，目前在試用中。在此之前，已經有一位
2019-12-20 13:41:49
原创 dom元素上添加斷點（使用dom breakpoint找到修改屬性的javascript代碼）
使用dom breakpoint能快速找到修改了某一個dom element的JavaScript code位於何處。在Chrome development tool裏，選中想要inspect的dom element，右鍵選擇Break o
2019-11-28 13:42:05
原创 svg foreignObject的作用（文本換行，生成圖片）
SVG內部利用foreignObject嵌入XHTML元素 <foreignObject>元素的作用是可以在其中使用具有其它XML命名空間的XML元素，換句話說藉助<foreignObject>標籤，我們可以直接在SVG內部嵌入XHTML元
2019-10-11 13:41:25
24
原创 計算貝塞爾曲線上點座標
貝塞爾曲線上控制點座標分別爲：P0(3,8)，P1(2,3)，P2(2,7)，想要返回 10 個在貝塞爾曲線上的點 javascript代碼如下：（從項目copy的代碼，僅僅針對二維座標dimersion = 2） 1 /**
2019-10-10 13:39:47