原创 使用CSS實現圖片幀動畫與曲線運動

本文首發於公衆號：符合預期的CoyPan 寫在前面 在前端開發中，提到動畫，我們可以： 直接利用DOM實現動畫。 利用canvas實現動畫。 利用svg實現動畫。 直接用一張gif動圖。 利用圖片實現幀動畫。 ... 所有動畫的基本原理

2019-09-22 20:55:57

原创 你可能不知道的LocalStorage用法

寫在前面 本文首發於公衆號：符合預期的CoyPan 上週在看關於react-redux的一個在線ppt時，偶然發現了一個現象： 如果我開兩個瀏覽器tab，同時訪問這個頁面，我在其中一個頁面切換ppt，另外一個頁面會跟着變化。鏈接在這裏： h

2019-08-13 19:05:08 1

原创 <link>標籤的幾個用法，幫助提高頁面性能

寫在前面 本文首發於公衆號：符合預期的CoyPan HTML 中<link>元素規定了外部資源與當前文檔的關係。最常見的用法，是用來鏈接一個外部的樣式表，比如： <link href="main.css" rel="stylesheet">

2019-06-03 20:55:06 2

原创 使用service worker做緩存來加快首屏速度，可行麼？

寫在前面 本文首發於公衆號：符合預期的CoyPan 不久之前，我簡單探索了service worker在一個活動運營頁面中的應用，可以參考我之前的這篇文章： service worker輕度探索 - 解決運營活動需求中的圖片加載問題? 那個

2019-05-21 10:05:06 9

原创 【JS基礎】從JavaScript中的for...of說起(下) - async和await

寫在前面 本文首發於公衆號：【符合預期的CoyPan】 在上一篇文章中，梳理了javascript中的兩個重要概念：iterator和generator，並且介紹了兩者在異步操作中的應用。 【JS基礎】從JavaScript中的for...

2019-04-16 10:15:04

原创 【JS基礎】從JavaScript中的for...of說起(上) - iterator 和 generator

寫在前面 本文首發於公衆號：符合預期的CoyPan 先來看一段很常見的代碼： const arr = [1, 2, 3]; for(const i of arr) { console.log(i); // 1，2，3 } 上面的代碼

2019-04-08 10:05:09

原创 記錄一次完整的react hooks實踐

這篇文章主要介紹了記錄一次完整的react hooks實踐，通過一個簡單示例，介紹了react hooks，具有一定的參考價值，感興趣的小夥伴們可以參考一下 寫在前面 React在16.8版本正式發佈了Hooks

2019-03-14 02:33:39 2

原创 canvas中的拖拽、縮放、旋轉 (下) —— 代碼實現

寫在前面 本文首發於公衆號：符合預期的CoyPan demo體驗地址及代碼在這裏：請用手機或瀏覽器模擬手機訪問 上一篇文章介紹了canvas中的拖拽、縮放、旋轉中涉及到的數學知識。可以點擊下面的鏈接查看。 canvas中的拖拽、縮放、旋轉

2019-02-15 13:24:52 10

原创 使用css時，可能會出錯的兩個地方

本文首發於公衆號：符合預期的CoyPan 寫在前面 css大家都很熟悉了，這裏就不多介紹了。本文主要介紹一下兩個在日常的工作中可能會出錯的地方。 margin-top 與 padding-top 這兩個屬性大家都很熟悉了，margin-to

2019-01-18 13:04:54

原创 Web事件總結

本文首發於公衆號：符合預期的CoyPan web中的事件 事件並不是JavaScript的核心部分，他們是在瀏覽器的Web Api中定義的。下面列舉的幾種情況，都屬於發生了事件。 用戶在某個元素上點擊鼠標或懸停光標。 用戶在鍵盤中按下某個

2019-01-14 21:02:37 1

原创 從一次重寫原生方法遇到的坑，總結一下Web中的事件系統

寫在前面 前段時間，我寫過一篇文章前端開發中的Error以及異常捕獲。 在文章中，我提到了這個問題： 經過不斷探索(不想再噴自己了)，我找到了原因。下面一一道來。本文主要講解自己找問題原因的思路，如果想看結論和總結，請直接跳到文末。 問題

2019-01-14 07:55:07 1

原创 前端開發中的Error以及異常捕獲

本文首發於公衆號：符合預期的CoyPan 寫在前面 在前端項目中，由於JavaScript本身是一個弱類型語言，加上瀏覽器環境的複雜性，網絡問題等等，很容易發生錯誤。做好網頁錯誤監控，不斷優化代碼，提高代碼健壯性是一項很重要的工作。本文將

2019-01-02 09:22:47 12

原创 package.json的所有配置項及其用法，你都熟悉麼

寫在前面 在前端開發中，npm已經是必不可少的工具了。使用npm，不可避免的就要和package.json打交道。平時package.json用得挺多，但是沒有認真看過官方文檔。本文結合npm官方文檔以及自己平時使用過程中的感悟，談一談pa

2018-12-25 01:05:06

原创 前端開發中，滑動展現日誌麻煩？這個組件來幫你

寫在前面 在這個數據無比重要的時代，用戶在網頁上面的一系列操作，都需要用數據記錄下來。在一個網頁中，某個元素的點擊數，展現數可以說是最基本的指標了。點擊數很簡單，用戶點擊的時候，上報一條點擊日誌即可。但是展現日誌，就稍微麻煩一點了。特別是

2018-12-20 09:24:37 3

原创 2018年阿里社招筆試題分享

以下是2018年年初，面阿里時候的筆試題。爲啥現在才分享出來，純粹是因爲之前懶。只分享題，沒有答案。 1.請通過代碼實現下面的效果 function add(num){ var total = 0; var curryAd

2018-12-17 10:35:06 1