原创 italic和oblique的區別

在CSS中，font-style屬性用於指定文本的字體樣式，取值有如下4種： 值 描述 normal 默認值。標準的字體樣式 italic 斜體的字體樣式 oblique 傾斜的字體樣式 inherit 從父

2019-02-19 15:40:00 1

原创 createDocumentFragment()用法總結

createDocumentFragment()方法，是用來創建一個虛擬的節點對象，或者說，是用來創建文檔碎片節點。它可以包含各種類型的節點，在創建之初是空的。 DocumentFragment節點不屬於文檔樹，繼承的parentN

2019-02-19 06:36:42 50

原创 react-datepicker組件依賴date-fns實現國際化功能時遇到的問題以及解決方法

react時間選擇組件react-datepicker的功能非常強大，基本能達到你想要的效果。這裏記錄一下該時間選擇組件實現國際化（多語言）的功能中遇到的問題以及解決方法。先看一下官方給出的解決方法： 從上面的的文檔中我們可以知道r

2019-02-02 15:47:20 81

原创 React子組件間通過props進行通信

  在做基於React項目的時候，我們通常會將一個頁面分割成多個可重用的組件以提高系統的可維護性，這其中常常出現子組件之間有通信的情況。舉一個下訂單例子： 地址選擇框展開樣式如下：   這裏簡化處理：有一個訂單頁面（Order.t

2019-01-18 15:26:47

原创 CSS的一些小技巧

之前做的一個筆記，在一個github上翻譯而來，原文哪來的忘了。 CSS樣式重置： *, *::before, *::after { box-sizing: border-box; margin: 0; padding

2019-01-16 15:31:41

原创 如何在JavaScript中檢查字符串是否包含子字符串?

本文根據StackOverflow的問題How to check whether a string contains a substring in JavaScript?中的高票回答翻譯得來。 以下是當前可行的方法： ES6—inc

2018-12-25 15:43:32 1

原创 前端頁面對後端數據的換行顯示

有時我們會遇到這種情況，後端傳遞了一大段包含了回車符的文本內容，在React中，我們直接將這部分內容展示的話，並不會出現換行的效果。如下例子： /* content爲從後端獲取的數據，例如： content=`hello world

2018-12-23 15:34:48

原创 前端學習資料推薦（不斷更新）

react小書：從解決問題的角度講解，按照發現問題、思考問題、優化代碼的邏輯思維過程一步步帶領大家認識爲什麼這樣設計，幫助大家更深刻地理解知識。

2018-11-28 13:01:03

原创 頁面內的導航

經常有這樣的需求：有一個類似目錄的導航塊，點擊裏面的標題頁面會滾動到對應的內容處。 這裏提三種實現的方法： 通過scrollIntoView方法實現：這是自帶的方法，可以通過以下方式實現調用document.getElementBy

2018-11-14 01:13:51

原创 命令行刪除文件、文件夾，以及自動補全文件名的方法

當用命令行刪除的目標爲有內容的文件夾時，可以使用rm -rf命令：rm -rf 目錄名字 -r 就是向下遞歸（recursion），不管有多少級目錄，一併刪除。 -f 就是直接強行刪除（force），不作任何提示的意思。 1、刪除文件

2018-11-14 01:13:51

原创 DOM中的動態NodeList與靜態NodeList

DOM中的動態NodeList與靜態NodeList 副標題: 爲何getElementsByTagName()比querySelectorAll()快100倍 轉載自：https://github.com/cncounter/tr

2018-11-04 02:31:09

原创 React實現元素塊隨頁面滾動而固定在瀏覽器頂部的一種方式

  有一個需求：一個元素塊A本來在頁面中的正常位置，隨着滾動條向下滾動到該元素塊時變爲固定在瀏覽器頂端，當滾動條向上滾動到元素塊A時又恢復到原來的位置。   解決方法： 我們首先在react組件中添加一個boolean類型的狀態ne

2018-10-27 02:17:58 5

原创 HTML meta標籤總結,HTML5 head meta屬性整理

轉載自： http://caibaojian.com/mobile-meta.html 移動前端開發中添加一些webkit專屬的HTML5頭部標籤，幫助瀏覽器更好解析HTML代碼，更好地將移動web前端頁面表現出來。本文整理一些常用的

2018-10-10 02:10:44 1

原创 JS判斷輸入框是否什麼都沒輸入

isNoInput = (value) => { return String(value).replace(/(^\s*)|(\s*$)/g, '') === '' } 原理：使用正則去掉傳入的值中的所有空格，然後再判斷是否爲空，

2018-09-30 02:13:19 2

原创 安裝react-tagsinput遇到的坑

react-tagsinput是用於標籤輸入的一個簡單易用的高可定製React組件（npm地址：https://www.npmjs.com/package/react-tagsinput），由於對npm的原理還不是很熟，故鬧出了一些笑

2018-09-13 07:27:32