原创 前端路由Hash與History模式

瞭解SPA 現代前端項目多爲單頁Web應用(SPA)，在單頁Web應用中路由是其中的重要環節。SPA 是 single page web application 的簡稱，譯爲單頁Web應用。 簡單的說 SPA 就是一個WEB項目只有一

2019-11-04 12:05:31 1

原创 JavaScript中發佈/訂閱模式（觀察者模式）

發佈/訂閱模式的前身-觀察者模式 觀察者模式定義了對象間的一種一對多的依賴關係，當一個對象的狀態發生改變時，所有依賴於它的對象都將得到通知，並自動更新。觀察者模式屬於行爲型模式，行爲型模式關注的是對象之間的通訊，觀察者模式就是觀察者和被觀察

2019-11-02 10:15:26 2

原创 函數緩存Memoization

純函數 函數式編程風格中有一個“純函數”的概念，純函數是一種無副作用的函數，除此之外純函數還有一個顯著的特點：對於同樣的輸入參數，總是返回同樣的結果。 性能提升 在平時的開發過程中，我們也應該儘量把無副作用的“純計算”提取出來實現成“純函數

2019-10-29 11:05:45 2

原创 初識React服務端渲染——SSR

服務端渲染 Server Slide Rendering服務端渲染,又簡寫爲SSR，他一般被用在我們的SPA（Single-Page Application），即單頁應用。 服務端渲染的模式下，當用戶第一次請求頁面時，由服務器把需要的組件或

2019-10-28 09:05:39

原创 console.log()眼見不爲實的原因

所有結果的運行環境都爲Chrome，不同的瀏覽器運行結果可能不同 眼見不爲實 第一行打出來是Obj，點開後發現居然有屬性a且值爲"賦值後"第二行打印出屬性a的值，卻是Undefined let test = {}

2019-10-22 09:05:28

原创 ReactHooks+ReactDnd實現拖動數據加載

拖動加載API字段 實現通過鼠標拖拽一個後臺API到Form實現自動加載API所以的字段成表單拖動組件採用react-dnd這個插件，數據交互和頁面更新等等使用Hooks實現Hooks官方文檔https://react.docschina.

2019-10-15 14:45:30

原创 結合React的Effect Hook分析組件副作用的清除

一個訂閱好友在線的組件 我們在DidMount的時候通過ID訂閱了好友的在線狀態並且爲了防止內存泄漏，我們需要在WillUnmount清除訂閱 但是當組件已經顯示在屏幕上時，friend prop 發生變化時會發生什麼？ 我們的組件將繼續展

2019-10-08 11:05:22 5

原创 JavaScript繼承總結

原型鏈 當讀取實例的屬性時，如果找不到，就會查找與對象關聯的原型中的屬性，如果還查不到，就去找原型的原型，一直找到最頂層爲止。如果讓原型對象指向另一個類型的實例.....有趣的事情便發生了.即: Person.prototype = ani

2019-09-28 11:25:42

原创 HTML冷門卻實用的標籤與API

冷門卻實用的標籤 pre 標籤 我們都知道在常見標籤裏面的文字的格式是不會顯示的，比如你打了多個空格，但卻不會顯示，而pre標籤會顯示。 <pre> 元素表示預定義格式文本。在該元素中的文本通常按照原文件中的編排，以等寬字體的形式展現出來，

2019-09-25 16:25:20

原创 Array.from()高效使用

語法規則 const someNumbers = { '0': 10, '1': 15, length: 2 }; Array.from(someNumbers, value => value * 2); // => [20, 30]

2019-09-22 17:25:32

原创 dockerfile與docker-compose配置

dockerfile構建鏡像 # 該image文件繼承官方的 node image FROM node:latest # 指定接下來的工作路徑爲/app WORKDIR /usr/src/app/ # 拷貝package.json進入i

2019-09-15 01:12:00

原创 docker常用指令詳解

指令詳解 從遠程倉庫拉取鏡像 //docker image pull library/hello-world默認從library拉取可以省略 docker image pull hello-world 查看鏡像列表 docker image

2019-09-07 12:35:05

原创 Component或PureComponent

Component或PureComponent PureComponent，前身是 PureRenderMixin ，和 Component 基本一樣，只不過會在 render 之前幫組件自動執行一次shallowEqual（淺比較），來決

2019-09-06 12:45:04 2

原创 JavaScript This函數調用模式理解

以前的理解：this 永遠指向最後調用它的那個對象 var name = "windowsName"; var a = { name: "Cherry", fn : function () {

2019-09-03 10:35:09 1

原创 JavaScript高級程序設計創建對象方法總結

工廠模式 function Person() { var o = new Object(); o.name = 'hanmeimei'; o.say = function() { alert(this.name);

2019-08-09 16:05:11 2