<input id="0qass"><u id="0qass"></u></input>
  • <input id="0qass"><u id="0qass"></u></input>
  • <menu id="0qass"><u id="0qass"></u></menu>

    自定義博客皮膚VIP專享

    *博客頭圖:

    格式為PNG、JPG,寬度*高度大于1920*100像素,不超過2MB,主視覺建議放在右側,請參照線上博客頭圖

    請上傳大于1920*100像素的圖片!

    博客底圖:

    圖片格式為PNG、JPG,不超過1MB,可上下左右平鋪至整個背景

    欄目圖:

    圖片格式為PNG、JPG,圖片寬度*高度為300*38像素,不超過0.5MB

    主標題顏色:

    RGB顏色,例如:#AFAFAF

    Hover:

    RGB顏色,例如:#AFAFAF

    副標題顏色:

    RGB顏色,例如:#AFAFAF

    自定義博客皮膚

    -+

    碼飛_CC的博客

    知其然,還要知其所以然,分享是件令人愉悅的事~

    • 博客(120)
    • 資源 (8)
    • 收藏
    • 關注

    原創 JavaScript中的new操作符的原理解析

    文章目錄new關鍵字進行的操作自己實現new操作符JavaScript中new操作符用于創建一個給定構造函數的對象實例。如下例子:function Person(name, age){ this.name = name; this.age = age;}const person1 = new Person('Tom', 20)console.log(person1) // Pers...

    2019-11-19 21:20:32 6866 5

    原創 前端開發都應該懂的事件循環(event loop)以及異步執行順序(setTimeout、promise和async/await)

    文章目錄1. JS是單線程的2. 事件循環(event loop)JS中的事件循環原理以及異步執行過程這些知識點對新手來說可能有點難,但是是必須邁過的坎,逃避是解決不了問題的,本篇文章旨在幫你徹底搞懂它們。說明:本篇文章主要是考慮瀏覽器環境,Node環境我沒有研究過暫時不討論。文章的內容也是博采眾長以及結合自己的理解完成的,相關參考文獻文章末尾也會給出,若有侵權請告知整改。不廢話,讓我們從簡...

    2019-07-26 15:01:38 2462 15

    原創 幫你徹底搞懂JS中的prototype、__proto__與constructor(圖解)

    ??作為一名前端工程師,必須搞懂JS中的prototype、__proto__與constructor屬性,相信很多初學者對這些屬性存在許多困惑,容易把它們混淆,本文旨在幫助大家理清它們之間的關系并徹底搞懂它們。這里說明一點,__proto__屬性的兩邊是各由兩個下劃線構成(這里為了方便大家看清,在兩下劃線之間加入了一個空格:_ _proto_ _)。 ??現在正式開始!讓我們從如下一個簡單的例...

    2018-07-25 22:50:47 100123 173

    原創 React中JSX背后的故事

    本篇文章主要講解JSX的來龍去脈,不講解JSX的語法(不了解的可參考:JSX 簡介)。如果你對以下三個問題能夠清晰解答,本篇文章就可以不用看了。JSX 的本質是什么,它和 JS 之間到底是什么關系?為什么要用 JSX?不用會有什么后果?JSX 背后的功能模塊是什么,這個功能模塊都做了哪些事情?如果不能清晰地回答,那希望看完本篇文章你能有所收獲。先舉個小例子讓你回憶一下JSX,以下代碼中函數組件App中返回的部分即為JSX(<div className="App">Hello Wo

    2021-01-04 15:44:59 77 4

    原創 Could not freeze ....., Cannot read property ‘hash‘ of undefined 的解決辦法

    項目中單獨對Antd(或其他包)進行升級時,項目可以正常啟動,但是編譯過程中會輸出一大片的這種紅色的錯誤,如下:看錯誤日志可知,可能是hardsource出現問題,解決方法:刪除 ./node_modules/.cache 后,再npm start重啟項目。以上操作完如果還存在問題,可以重新執行一下npm install,再重啟一下項目,問題應該就解決了。...

    2020-12-07 16:56:36 130

    原創 antd使用:在一個Modal中使用同個form表單實現編輯和新增功能

    項目開發中,我們時常會遇到使用Modal彈窗和Form組件搭配實現編輯已有條目和新增條目的功能(如下圖),這兩個功能所使用到的表單是一樣的,唯一的不同點是:編輯條目是要將已有的信息填入表單,而新增條目是表單所有字段為空。既然表單是一樣的,我們當然不想重復代碼。剛開始的想法是往Form組件傳入默認值的方式來實現編輯時的填充功能。該方法編輯的時候表單確實是有傳入值填充,但是關閉Modal再點擊新增時,發現Form表單還是有值填充,這不符合我們的要求,查看文檔發現了一條信息:<Modal />

    2020-11-18 21:11:29 210

    原創 使用”發布-訂閱“模式驅動組件間的數據傳輸

    本文主要講解通過發布-訂閱模式驅動數據流,來實現React中組件間的通信。React是單向數據流的,也就是將數據以props屬性的方式流向組件樹中比自己層級更低的組件。組件間通信的方式常見的主要有以下幾種:父-子組件間通信:這個最常見也很容易,父組件直接把數據以props的方式傳遞給子組件即可。子-父組件間通信:因為數據只能單向流動的,所以子組件并不能直接將數據傳遞給父組件。但是props的形式是可以多種多樣,所以我們可以通過將父元素中綁定了自身上下文的函數以props的形式傳遞給子組件,然后子組件

    2020-11-06 15:47:05 131

    原創 JS基礎很扎實?來挑戰看能否一次性全做對!

    1. 來試試看,以下12道題是否能一次性全答對:parseInt("")Number("")isNaN("")parseInt(null)Number(null)isNaN(null)parseInt("12px")Number("12px")isNaN("12px")parseFloat("1.6px") + parseInt("1.2px") + typeof parseInt(null)isNaN(Number(!!Number(parseInt("0.8"))))t

    2020-10-14 21:18:03 313 4

    原創 記錄使用Git過程中遇到的問題及解決方法

    文章目錄1. 將某個分支的commit提交到另一個分支上補充:Git命令速查表我們經常使用Git來管理項目開發的版本,這里記錄一些我遇到的問題及解決方法。1. 將某個分支的commit提交到另一個分支上在項目開發過程中,有時會穿插進一些小需求、小改動,我們可能就直接在當前功能分支上改了提交了,反正到時要一起發布,沒啥影響。但是,可能由于各種不可控因素導致當前版本不能如期發布,而那些小需求、小改動需要提前發布,這時就坑爹了,難道還要再傻乎乎的拉分支寫一遍??當然不是!我們可以使用git cherry-

    2020-09-04 14:47:31 260

    原創 如何將頁腳(footer)保持在頁面底部

    文章目錄1. 問題描述2. 解決方案2.1 使用position屬性實現(兼容較老的瀏覽器)2.2 使用Flex實現2.3 使用Grid實現1. 問題描述將footer保持在視覺窗口的底部是常見的需求。當頁面的內容主體高度較大(超出屏幕可視區域的高度)時,footer元素直接跟在內容后面即可。但是,當一個 HTML 頁面包含少量的內容時,footer元素就會坐落在頁面的中間,在下面留下空白,這看起來很糟糕,尤其是在大屏幕上。如下圖:2. 解決方案我們先給出基礎的頁面代碼:<!DOCTYP

    2020-08-24 19:16:24 644

    原創 React Warning: A component is changing an uncontrolled input of type text to be controlled

    這里記錄一下React開發過程中遇到的一個Waring及解決方法。一個Input輸入框,當你在輸入框中輸入時,控制臺顯示Waring,Console 輸出如下:Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide

    2020-08-21 19:27:31 771

    原創 CSS3中的calc()函數以及在less中的使用

    1. calc()函數在css3中我們可以通過calc()函數來動態計算長度值,如:#div { width: calc(100% - 100px);}它的語法是calc(expression)expression參數是必須的,它是一個數學表達式,結果將采用運算后的返回值。使用calc() 函數時需要注意的點:運算符前后都需要保留一個空格,例如:width: calc(100% - 10px);任何長度值都可以使用calc()函數進行計算calc()函數支持"+", "-"

    2020-08-07 21:39:19 580

    原創 頁面滾動到頂部

    function scrollToTop() { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 8); }}

    2020-07-16 14:50:14 441

    原創 VS Code保存文件時自動刪除行尾空格

    操作如下:同時按下Ctrl鍵、 ,鍵(或者:菜單欄的文件=>首選項=>設置)彈出設置頁面,在輸入框中輸入files.trimTrailingWhitespace,打勾選中,即可使VS Code在保存文件時自動刪除行尾空格強迫癥的福音。...

    2020-07-03 10:00:53 2026

    轉載 你不知道的 Blob

    你不知道的 Blob一、Blob 是什么二、Blob API 簡介2.1 構造函數2.2 屬性2.3 方法三、Blob 使用場景3.1 分片上傳3.2 從互聯網下載數據3.3 Blob 用作 URL3.4 Blob 轉換為 Base643.5 圖片壓縮3.6 生成 PDF 文檔四、Blob 與 ArrayBuffer 的區別4.1 Blob vs ArrayBuffer五、參考資源如果你允許用戶從你的網站上下載某些文件,那你可能會遇到 Blob 類型。為了實現上述的功能,你可以很容易從網上找到相關的示例,

    2020-06-27 11:26:31 977

    原創 浮動元素的位置,只參考前一個元素的位置即可

    如下圖,1、2、3三個元素左浮動,虛線為父容器,此時再添加一個左浮動的元素4,總寬度超出了父元素寬度,那么4號元素的位置應該是這樣的?它的位置不是A也不是B:浮動元素的位置,其實只參考前一個元素的位置即可。所以元素4的位置只需考慮元素3的位置即可,如下:我們換一下位置,同理可以得到如下結果(只需考慮元素1的位置):float屬性會導致父元素的高度塌陷,解決方法可查看:CSS float浮動規則以及父元素高度塌陷的解決方法...

    2020-05-31 12:51:14 1272

    原創 前端很容易遇到的一個大坑

    前端開發時,我們經常會通過.操作符來獲取屬性值,這里有一個很容易。比如,后端接口定義中data字段類型為數組,

    2020-05-25 19:51:15 7450 6

    轉載 JSON.stringify() 的 5 個秘密特性

    JSON.stringify() 方法能將一個 JavaScript 對象或值轉換成一個 JSON 字符串作為一名 JavaScript 開發人員,JSON.stringify()是用于調試的最常見函數。但是它的作用是什么呢,難道我們不能使用 console.log()來做同樣的事情嗎?讓我們試一試。//初始化一個 user 對象const user = { "name" : "Prat...

    2020-04-01 20:47:12 2057

    原創 JS實現判斷棧的壓入、彈出序列

    作為前端,接觸算法的機會可能比較少,但是我們腦子可不能銹了~一道題目:輸入兩個整數序列,第一個序列表示棧的壓入順序,判斷第二個序列是否為該棧的彈出順序。假設壓入棧的所有數字均不相等。例如:1,2,3,4,5是某個棧的壓入順序,序列4,5,3,2,1是該棧對應的一個彈出序列,但4,3,5,1,2就不可能是該壓棧序列的彈出序列。這里,我用JS來實現這道題,其中用數組來模擬棧的操作。主要思路就是:...

    2020-03-29 21:52:53 1903

    原創 微信小程序獲取自定義元素的寬高、使用”事件穿透”來達到狀態同步的效果

    微信小程序獲取元素寬高的方式:// 自定義組件需要用:this.createSelectorQuery()const query = wx.createSelectorQuery()query.select('.my-class').boundingClientRect(res => { this.setData({ itemHeight: res.height, itemW...

    2020-03-28 20:04:54 2449

    原創 React請求數據的一種優化思路

    文章目錄1. 前期:分散開發時的階段2.中期:統一的階段3. 后期:單次訪問只發起1次請求大家在網購或者寄快遞時,應該都有碰到地址選擇欄,也就是選擇省市區。我在開發一個國外快遞官網的時候也遇到了這個需求,在這個項目中,由于國外業務剛展開,并不是所有區域都可選的,需要人工維護這份數據(時常會改動),所以地址信息是由后端維護的,當前端頁面遇到需輸入地址的地方,就向后端發起地址數據的請求。在這,我記...

    2020-03-17 21:27:12 1866

    原創 純CSS實現氣泡框

    文章目錄用CSS畫三角形氣泡框正三角形的氣泡框斜三角形的氣泡框總結在工作中,我們可能會遇到氣泡框相關的需求,如下圖:這個氣泡框我們可以使用純CSS代碼來實現。接下來跟我一起一步步實現吧!用CSS畫三角形用CSS畫個三角形,相信大家都很熟悉了吧。主要思路:將元素的的寬高設置為0;然后設置相應的邊框即可實現。詳細來講就是給某一方向的邊框添加寬度以及顏色,然后將其旁邊兩個方向(或一個)的...

    2020-03-16 20:33:52 1794

    轉載 HTTP的前世今生

    文章目錄HTTP 0.9 / 1.0HTTP/1.1HTTP/2HTTP/3本文轉載自:HTTP的前世今生HTTP (Hypertext transfer protocol) 翻譯成中文是超文本傳輸協議,是互聯網上重要的一個協議,由歐洲核子研究委員會CERN的英國工程師 Tim Berners-Lee發明的,同時,他也是WWW的發明人,最初的主要是用于傳遞通過HTML封裝過的數據。在1991年...

    2020-02-29 19:25:01 991

    原創 獲取項目(文件夾)的樹形結構

    在寫項目文檔的時候,有時我們想要對項目的結構進行說明,當然我們是不可能手動來寫文件結構的,在windows系統下,有一個tree命令可以幫我們生成對應的樹結構。使用方式如下:我們只要在命令提示符(CMD)中進去到你想要生成的樹結構的文件夾,然后直接輸入tree回車即可:這里只顯示文件夾的路徑,如果還想要顯示文件夾中的文件,則輸入tree /f即可:當然,如果我們想要將結果保存到一個文件中...

    2020-02-04 20:43:16 1902 1

    原創 display: none、visibility: hidden與opacity: 0的區別

    文章目錄1. display: none、visibility: hidden與opacity: 0的區別2. 補充:其他隱藏元素的方法1. display: none、visibility: hidden與opacity: 0的區別display: none、visibility: hidden與opacity: 0都可以讓元素隱藏,它們之間的區別見下表:特性(行為)displa...

    2020-01-21 14:31:39 1583

    原創 Node讀寫Excel文件(txt文件)

    文章目錄讀取txt文件的內容寫入txt文件讀取Excel文件前端有時要處理一些數據(比如多語言文件內容的替換),我們不要傻乎乎地干這種重復枯燥又浪費時間的ctrl C+ ctrl V的工作,這種事情交給計算機做再合適不過了。這篇文章只是簡單地介紹前端如何通過Node來讀取Excel或txt文件中的數據,然后寫入到txt文件中的方法。首先給出文件的內容:test.txt文件只有一句話(我是txt...

    2020-01-14 22:46:30 2099

    翻譯 避免在移動端頁面中使用100vh

    100vh帶來的問題在CSS中,視口單位(Viewport units)聽起來不錯。如果要設置一個元素的樣式使它占據整個屏幕的高度,那么你可以設置height: 100vh,這樣你就擁有一個完美的全屏元素,該元素會隨著視口的變化而調整大小!可惜的是,事實并非如此。100vh在移動瀏覽器中以一種微妙但基本的方式被破壞,使其幾乎無用。最好避免使用100vh,而應該通過javascript設置高度的方...

    2019-12-06 18:29:35 2632 6

    原創 ERROR in app.bundle.js from UglifyJs Unexpected token: name ?element?, expected: punc ?;? 的錯誤處理

    遇到問題webpack打包時使用UglifyJs(github地址)來壓縮美化JS代碼,在npm run build時報錯了:// webpack.prod.js 內容const merge = require('webpack-merge')const UglifyJSPlugin = require('uglifyjs-webpack-plugin')const common = r...

    2019-11-26 14:25:33 6769

    原創 TypeError: CleanWebpackPlugin is not a constructor 的錯誤處理

    遇到問題按照webpack官網的教程進行學習時,安裝clean-webpack-plugin插件后(版本為:"^3.0.0"),再build時,發現報錯了,配置如下:const CleanWebpackPlugin = require('clean-webpack-plugin')module.exports = { ... plugins: [ new C...

    2019-11-25 15:54:36 2247 2

    原創 引入ttf類型的字體不起作用的解決方法

    前端引入一種后綴名為.ttf的字體,并在css文件中設置該字體,但是頁面中并沒有顯示新引入的字體:@font-face { font-family: 'myFont'; src: url('./my-font.ttf') format('ttf'); font-weight: 600; font-style: normal;}.my-font { f...

    2019-11-25 14:17:35 4048

    原創 React input輸入框異步校驗的處理方式

    文章目錄前言處理方式1:防抖處理方式2:采用標記前言在日常工作中,我們經常接觸到表單驗證相關的功能。有些簡單的校驗(比如輸入要求為手機號、郵箱、密碼的字符組合等)可以直接由前端進行判斷,但是有些復雜多變的判斷(比如校驗用戶名是否存在、特殊行政區提示等)就必須發起請求由后端來驗證,然后前端根據后端返回的結果進行提示等處理(這里稱該校驗的方式為異步校驗)。處理方式1:防抖異步校驗(選擇框)存在...

    2019-11-08 23:24:44 2441

    原創 鼠標事件&使用小Tip

    文章目錄1. 鼠標事件類型1.1 簡單事件1.2 復雜事件2. 鼠標事件的觸發順序3. 小Tips3.1 平時使用小技巧3.2 開發時的小技巧鼠標是我們日常生活中經常使用的,這里我們來簡單了解下JS中的鼠標事件以及使用的一些小技巧。1. 鼠標事件類型我們將鼠標事件分為兩類:簡單事件和復雜事件1.1 簡單事件mousedown/mouseup: 鼠標按鈕在一個元素上點擊/釋放時觸發。m...

    2019-10-01 21:54:18 1140

    原創 小練手——Finish line自動打開低于一定折扣的商品

    Finish line是美國的一個運動品牌網站,我平時比較喜歡海淘鞋子,時不時可能想看看有沒有什么好貨,但是呢,每次都要自己點擊然后再一個個查看比較麻煩,故自己想弄一些自動化地篩選,自動選出性價比高的東西。廢話不多說,上源碼(chrome瀏覽器,篩選鞋子可行):let timer = setInterval(()=>{ // 第一步:找到“下一頁”的按鈕,并觸發點擊事件 docu...

    2019-09-27 22:00:51 896

    原創 JS中的NaN

    JavaScript中,NaN是一個特殊的數字值(typeof NaN的結果為number),是not a number的縮寫,表示不是一個合法的數字。1. NaN的產生:一個不能被解析的數字Number('abc') // NaNNumber(undefined) // NaN失敗的操作Math.log(-1) // NaNMath.sqrt(-1) // NaNMat...

    2019-09-23 21:13:31 21549 10

    翻譯 JavaScript解構(Destructuring)的5個有趣用法

    文章目錄1. 交換變量(Swap variables)2. 訪問數組項(Access array item)3. 不變的操作(Immutable operations)4. 解構可迭代對象(Destructuring iterables)5. 解構動態屬性(Destructuring dynamic properties)6. 總結1. 交換變量(Swap variables)交換2個變量的的...

    2019-09-11 15:40:26 1161 1

    原創 CSS實現自適應布局:子元素項目整體居中,內部項目左對齊

    日常工作時,我們可能遇到這樣一個布局:一個父元素框框(隨著瀏覽器大小自適應寬度)里面有許多按鈕,然后這些按鈕(寬度固定)的整體需要在父元素內居中對齊,而按鈕整體的內容又是從左往右排列。這里提供一個解決方法,示例如下:有如下代碼:<div class="wrap"> <button class="btn">1</button> <butt...

    2019-08-28 10:38:29 2463 2

    原創 正則表達式小記

    文章目錄1. 使用正則很酷1.1 不使用正則1.2 使用正則2. JS中正則表達式的創建方式3. 術語與操作符3.1 精確匹配3.2 匹配一類字符3.3 轉義3.4 匹配開始與匹配結束3.4 重復出現3.5 預定義字符類3.6 分組3.7 或操作符(OR)3.8 反向引用在開發的過程中,我們不使用正則表達式也可以正常工作,但是,如果有了正則表達式(Regular Expression)的話,那么...

    2019-08-07 21:18:21 2173

    原創 幫你徹底搞懂防抖和節流(附帶在React使用的一個例子)

    文章目錄前言防抖(debounce)節流(throttle)兩個比喻來幫助區分防抖和節流前言開門見山,使用防抖和節流技術的意義:節約資源,提升用戶體驗。瀏覽器中有許多事件會在很小時間間隔內頻繁觸發,比如:監聽用戶的輸入(keyup、keydown)、瀏覽器窗口調整大小和滾動行為(resize、scroll)、鼠標的移動行為(mousemove)等。如果這些事件一觸發我們就執行相應的事件處理函...

    2019-07-17 16:55:02 3854

    原創 重新鞏固JS(四)——JavaScript函數

    文章目錄1. 函數概述2. 函數定義3. 函數調用4. 函數參數4.1 默認值4.2 剩余參數5. 函數內部屬性5.1 arguments對象5.2 this對象6. 函數是特殊對象6.1 函數的屬性:length 和 name6.1.1 length屬性6.1.2 name屬性6.2 函數的方法: call、apply、bind6.2.1 call方法6.2.2 apply方法6.2.3 bin...

    2019-07-10 21:44:38 851

    原創 解決localhost改為本機IP后網頁無法訪問的方法

    在web開發時,有時我們遇到問題需要同事幫忙看看,或者是開發的一些移動端的頁面需要在真機上測試,這時我們就需要通過IP的方式來訪問網頁。當然,對方想要通過你的IP來訪問網頁,你們需要在同一個局域網內才行。解決方法將應用的監聽改為0.0.0.0,基于webpack的項目把dev的config文件中的host改為'0.0.0.0'即可。如果別人要通過你的IP來訪問的話,需要把防火墻給關閉,如果是自...

    2019-06-17 22:33:48 11529 2

    超大文件打開工具,秒開

    超大文件打開工具,秒開

    2016-12-14

    All-In-One Code Framework Coding Standards.docx

    本文檔描述了微軟一站式代碼示例庫項目組所采納的關于本地 C++ 和 .NET (C# 和VB.NET)代碼的編程風格指導規范。

    2020-05-26

    ArchSummit 北京 2016 PPT 下載合集3

    ArchSummit 北京 2016 PPT 下載合集第三部分,一共20幾份PPT

    2016-12-06

    ArchSummit 北京 2016 PPT 下載合集2

    ArchSummit 北京 2016 PPT 下載合集第二每部分,一共20幾份PPT

    2016-12-06

    ArchSummit 北京 2016 PPT 下載合集

    ArchSummit 北京 2016 PPT 下載合集第一部分,20幾份PPT

    2016-12-06

    RecSys2016論文合集

    RecSys2016論文合集

    2016-11-21

    mahout0.9 源碼

    解壓直接從eclipse創建maven項目即可運行

    2016-05-20

    推薦系統代碼

    推薦系統代碼

    2016-05-05

    空空如也

    空空如也

    TA創建的收藏夾 TA關注的收藏夾

    TA關注的人 TA的粉絲

    提示
    確定要刪除當前文章?
    取消 刪除
    多乐彩