原创 使用VS code 插件debugger for chrome 調試react源碼

中秋節快樂！不知道你們公司有沒有把程序員當人尼—·- 代碼調試，是我們前端日常工作中不可或缺的能力了吧！在面向dom開發的時代，我們開發時直接在chrome裏打斷點是很方便的。但是，當我們面向組件開發時(react),瀏覽器拿到的是我們編譯

2019-09-15 01:08:18 1

原创 CSS Grid：頁面網格佈局從未如此簡單

頁面佈局從來就不是一件讓人省心的事！ 如果pc端的兩列布局、表格佈局、聖盃佈局等已經讓你心力交瘁！那麼移動端更加五花八門的佈局肯定也是讓你吃盡苦頭！table不知道你用過沒？bootstrap用過沒？antd用過沒？ 這些看似花裏胡哨的佈局

2019-09-05 21:24:58 3

原创 React Hook使用

紫棋的一句想要我幫你唱hook嗎？讓hook紅了一把！做爲一個開發，尤其是前端開發，在電視上聽到這個詞還是有點小興奮的（雖然彼hook非此hook）。玩夠這個梗，是不是也要了解一下自己的react hook？ 一、why hook 使用re

2019-09-04 17:45:02 1

原创 flex佈局入門

一、 why flex 都知道html正常的文檔流是自上而下排列的，塊級元素會像下左圖一樣排列。但是項目中尤其是移動端項目會有很多需求的排版方式是要求由左到右排列。雖然可以通過dispaly：inline-block、float、posit

2019-08-29 21:05:07 1

原创 React入門：從項目搭建(webpack)到引入路由(react-router)和狀態管理(react-redux)

一、什麼是React React是什麼？React的官網是這樣介紹的：React-用於構建用戶界面的 JavaScript 庫。看起來十分簡潔，React僅僅是想提供一個構建用戶界面的工具，也就是隻關心UI層面，不關心數據層面，數據層面的東

2019-08-27 20:34:59

原创 HTTP緩存和瀏覽器的本地存儲

一、HTTP緩存 http請求做爲影響前端性能極爲重要的一環，因爲請求受網絡影響很大，如果網絡很慢的情況下,頁面很可能會空白很久。對於首次進入網站的用戶可能要通過優化接口性能和接口數量來解決。但是，對於重複進入頁面的用戶，除了瀏覽器緩存，h

2019-08-15 21:14:59 1

原创 js函數this理解？手寫apply、call、bind就夠了

一、this是什麼？ 函數的內部屬性，this引用的是函數據以執行的環境對象。也就是說函數的this會指向調用函數的執行環境。 function a(){ return this } console.log( a() === wi

2019-08-08 20:55:01 4

原创 Number( )、parseInt( )、parseFloat( )的用法及區別

js中轉數字的方法有哪些？我經常會用字符串*1，但是如果碰到一些特殊的情況，使用這種方式會帶來不必要的麻煩。下面看一下js提供的3種常見的轉數字的方法。 一、 Number（） 1.數字正常轉換，可處理十進制，二進制，八進制和十六進制。 N

2019-08-08 14:55:00 2

原创 js函數閉包瞭解一下！看看這兩道題？測一下水平！

介紹你下你理解的閉包？不管怎樣！我最近聽到很多次！感覺是不好好總結一下沒法面對那些犀利的追問！如果覺得閉包理解的很透徹，就直接跳到最後看題目！ 1.閉包概念 小紅書的解釋閉包是有權訪問另一個函數作用域中的變量的函數。明白了嗎？就是一個函數，

2019-08-07 20:55:02 4

原创 js的基本數據類型和引用數據類型

熟悉js的同學都知道，它的數據類型一般分爲基本數據類型和引用數據類型（複雜數據類型）。那麼他們之間到底有什麼不同？從下面這個例子入手： var a = 1; var b = a; a = 2

2019-08-06 18:15:04

原创 聊聊webpack

隨着前端的迅速發展，web項目複雜度也是越來越高。爲了便捷開發和利於優化，將一個複雜項目拆分成一個個小的模塊，於是模塊化開發出現了。但是由於缺乏規範化管理，出現了很多種模塊化規範，從針對nodejs的commonjs規範，到針對瀏覽器端的C

2019-07-27 20:47:51

原创 淺談js中的觀察者模式、發佈/訂閱模式

觀察者模式是軟件設計模式的一種。在此種模式中，一個目標物件在它本身的狀態改變時主動發出通知，觀察者收到通知從而使他們的狀態自動發生變化。 觀察者模式 目標和觀察者是基類，目標提供維護觀察者的一系列方法，觀察者提供更新接口。具體觀察者和具體目

2019-07-19 15:55:02

原创 淺談前端MVC、MVVM設計模式

MV模式的目的是實現動態的程序設計，簡化程序後續的修改和擴展過程，並且使模塊能夠被重複利用。此模式通過簡化程序使之變得更爲直觀。MV不是一種技術 ，而是一種設計理念。MV*模式主要採用分層的思想來降低耦合度，從而使系統更加靈活，擴展性更強。

2019-07-18 18:45:01

原创 用js的方法實現一個new

new 運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象的實例。new 關鍵字會進行如下的操作： 1.創建一個空的簡單JavaScript對象（即{}）；2.鏈接該對象（即設置該對象的構造函數）到另一個對象 ；3.將步驟1新創

2019-07-16 19:05:05

原创 通過this深入理解javascript函數的bind、call、apply

我們都知道函數這個高級公民在js中的地位很高。用處很大，可是卻很難搞！函數內部有一個很厲害的內部屬性this關鍵字。而bind、call、apply是函數的3個非繼承方法(但是在原型鏈中找到了這些方法！Fuction.prototype中找

2019-07-16 16:25:00