原创 1.實現jQuery構造函數和extend

實現jQuery構造函數 現在我們想實現$()這種形式的函數調用並返回一個對象. (function(global){ var $,jQuery; $ = jQuery = function(){ return

2020-06-28 21:12:42 1

原创 開發一款高複用的前端輪播圖插件

1.需求:      目前項目中很多頁面都用到了輪播圖,雖然輪播圖的展現形式不一樣,但是我們可以把輪播圖的共性給抽象出來,開發出一款插件,讓使用到輪播圖的頁面都引用這個插件.當前這款插件是使用jquery開發的,兼容IE8. 2.結果圖:

2020-06-28 21:12:42

原创 瀏覽器自定義事件監聽以及應用

自定義事件 如果我們想在window上面掛載一個自定義事件該如何實現呢?比如: window.addEventListener("testEvent",(e)=>{ console.log(e.data)

2020-06-28 21:12:42

原创 實現拼音首字母搜索姓名

    需求:在搜索框中根據拼音首字母來快速搜索出人名.例如曾琴琴(曾是多音字),可以通過輸入["z","c","zq","cq","zqq","cqq"]這六種情況顯示出匹配曾琴琴的結果.  效果圖:                  

2020-06-28 21:12:42

原创 js求最大公約數原理解析

  (function(){ function Count(a,b){ if(b == 0){ return a; }else{ var c = a

2020-06-28 21:12:42

原创 如何獲取js類中的所有屬性和方法

  在java,php等一些後端語言中,都有特定的方法獲取到類中的所有屬性和方法,但是在js中卻沒有這樣的API,隨着es的發展預計會在未來出現.但是目前我們也可以自己實現這樣的需求，題目如下: class One { cons

2020-06-28 21:12:42

原创 使用面向對象的思想編寫一款分頁插件

需求:     在前端開發網頁的過程中,很多頁面都會需要用到列表分頁,如果我們使用react,vue等框架,使用組件的方式能很好的將分頁的代碼封裝在一起,從而提高它的複用率.但有時開發一些門戶網站需要兼容低版本瀏覽器比如ie8,就不能使用

2020-06-28 21:12:42

原创 js實現異步任務調度器

需求:   實現一個異步調度器函數,能夠不斷的將異步執行的函數加入其中,但是它最多能控制同一時間只能執行3個異步函數,並將執行結果返回.   核心代碼: /** * 編寫一個異步任務調度器 */ class Scheduler {

2020-06-28 21:12:42

原创 vue3初嘗試

前言 目前vue3還處於beta版本,離正式版的發佈還有一段時間.在此之前我們可以對vue3新特性 composition api 做一個demo練習,加深對其具體應用場景的理解. 相關文檔API 完整項目地址   Demo需求    

2020-06-28 21:12:31

原创 dva + react hooks實戰Demo

前言 dva 是一款輕量級的應用框架,是阿里旗下的開源產品.dva是基於 redux 和 redux-saga 的數據流方案,然後爲了簡化開發體驗，dva 還額外內置了 react-router 和 fetch.寫過原生redux代碼的同

2020-06-28 21:12:31

原创 詳解js類數組對象

基本概念 類數組對象,顧名思義就是一個和數組很類似的對象.它不是一個數組,但具有數組的length屬性可以查看元素的個數,它承載元素的方式和數組一樣都是以連續的數字作爲索引.在實際中開發中比如經常使用的arguments還有documen

2020-06-28 21:12:30

原创 簡化redux模板代碼

在實際開發過程中,react通常會配合redux,react-router,redux-thunk等生態插件一起協同開發,尤其在使用redux的過程當中,會出現很多的模板代碼的編寫.比如你想修改頁面上的一個狀態的某個錯誤,你要去先找到ac

2020-06-28 21:12:30

原创 5.分析JQuery源碼的事件系統

事件系統 以jquery的版本v3.4.1爲例來進行分析.我們首先看下jquery事件綁定常用的方法如下: 綁定原生事件 $("#kkk").on("click",function(){}) //自定義事件 $("#kkk"

2020-06-08 14:12:49 1

原创 6.淺嘗JQuery源碼dom操作的設計架構

前言 本篇文章以[email protected]爲例對源碼進行了刪減抽離出了核心的代碼重新實現了.css,.text以及.addClass和.removeClass四個API,通過對這四個API的實現過程可以窺探到jquery底層實現dom操作

2020-06-08 14:12:49 1

原创 svg裏stroke相關屬性在css動畫中的應用

stroke-dasharray stroke-dasharray是做什麼用的?先看下面代碼 <svg> <rect x="20" y="20" width="100" height="100" fill="none" stro

2020-05-22 10:52:00