原创 利用JavaScript自定義事件完成組件間的數據通信

我們知道，在JavaScript中，原生DOM事件在開發中是很有用的(與用戶交互的重要方式)，但是操作原生DOM事件其實有兩大缺點：性能低、依賴於瀏覽器(NodeJs、小程序等不可用)。那麼這個時候，就需要我們進行自定義事件去處理某些特定的

2019-10-02 17:05:21

原创 從JS繼承實現一個VueJs的render函數

市面上的主流框架，相信作爲一個前端搬磚人員，或多或少都會有所接觸到。如ReactJs、VueJs、AngularJs。那麼對於每個框架的使用來說其實是比較簡單的，還記得上大學時候，老師曾經說過:"技術就是窗戶紙，捅一捅就破了"，也就是說，任

2019-09-20 00:35:25

原创 深入理解組件化思想及手動封裝實現一個React UI庫

對於市面上的一些優秀UI庫，如element-ui、Ant Design React、React Material-UI等，其中每個組件的核心實現由兩部分組件：屬性、行爲。而作爲一枚程序員，你是否想過自己去進行一個UI組件庫的實現呢？那麼本

2019-09-15 01:11:49 3

原创 Jenkins+Nginx+Github/Gitlab自動化構建部署前端項目

在日常開發中，往往可能同時多個項目並行進行開發，功能完成開發，進行代碼打包、發佈的時候，可能會出現一些問題。如一個基於vue框架的前端項目，部署的環境有測試環境、線上環境，手動打包發佈。由於操作失誤可能導致發佈到測試環境的代碼發佈到正式環境

2019-09-15 01:09:34 2

原创 React全家桶+WebSocket實現簡單聊天室

數據通信的方式有很多種，其中websocket就是一種用於IM的常用數據通信方式，如在線客服、QQ、微信等，或多或少都使用到了這一技術。所以瞭解以及掌握websocket是很有必要的 廢話不多說，先上圖： 認識WebSocket Web

2019-08-11 16:35:08 9

原创 前後端數據通信之FromData

所有向服務器提交的HTTP數據，其實都是一個表單 FromData是一種容器，用於模擬表單，向服務器提交數據，有兩種使用方法 創建空白FromData對象，然後向其中添加數據 將<from>標籤直接轉化爲一個FromData對象 使用F

2019-08-10 18:55:11

原创 ES6之fetch

js原生支持，比XHR強大，易用的數據交互對象。 fetch的兩個步驟 基本使用 fetch("url").then(res=>{},err=>{}); Response(res)對象成員 ok:是否成功 headers:響應頭對象

2019-08-07 23:05:02

原创 數據通信

在開發中，不可避免的需要進行數據之間的交互，而這些數據往往是通過與服務器端進行交互得到，並進行相應的處理等 傳統數據通信方式總結 原生XHR對象:用起來麻煩，而且功能受限 jsonp方式:jsonp可以跨越，但本質上是在繞過同源策略的限制

2019-08-06 22:45:06

原创 使用WebPack搭建React開發環境

第一步、基礎環境 初始化 項目初始化 npm init -y 安裝webpack npm i webpack 安裝react npm i react react-dom -s 項目基礎框架 入口文件(src/index.js) import

2019-08-05 22:15:08

原创 認識React

與VueJs的區別 Vue更注重視圖的自動同步，使用習慣偏向前端人員 React更注重組件及其狀態的管理，使用習慣偏向程序人員 React生態圈 jsx:擴展了js自身的語法，是React的基礎 Fulx:React的數據流組件 Re

2019-08-04 22:55:41

原创 Redux之深入理解Store、Action、Reducer

前面有一篇文章比較詳細的介紹了redux，那麼這篇文章主要是對redux中的幾個角色進行深入的理解。主要有以下幾個部分: store action reducer combineReducers bindActionCreators 理

2019-07-27 20:48:35 1

原创 Es6中Class私有和受保護的屬性及方法

熟悉面向對象編程的都知道，面向對象編程最重要的原則之一 - 從外部接口劃分內部接口。也就是說，針對某一類事物，我們其實並不是那麼在乎其內部究竟是怎樣去實現的，只關心怎樣使用而已。 爲了理解這點，讓我們先來看看現實生活中的列子。通常，我們使用

2019-07-18 14:45:05

原创 docker+daocloud實現前端項目(Vuejs)自動部署

項目的自動化部署在大公司或獨角獸中用得比較多，相比來進行手動部署項目來說會更加高效。那麼本文結合之前學習的docker知識點以及nginx來簡單實現VueJs項目的自動部署，當然針對其他項目也類似。 運行環境 首先需要在服務器上進行doc

2019-07-02 17:45:04

原创 Nginx之正向代理與反向代理的理解

nginx的一大用處是進行反向代理來完成完成負載均衡。那麼有反向代理，就有正向代理。來看看他們的區別 正向代理 圖解：用戶（客戶端）去飯店吃飯（發送一個請求），用戶要吃的是小龍蝦（請求），可是你不能自己做，那麼就需要讓大廚（服務端）給你做

2019-06-28 10:35:07 2

原创 初遇Nginx之簡介

nginx 是一個免費的，開源的，高性能的HTTP服務器和反向代理，以及IMAP / POP3代理服務器。 Nginx 以其高性能，穩定性，豐富的功能，簡單的配置和低資源消耗而聞名。很多高知名度的網站都使用 Nginx，如：Netflix，

2019-06-27 10:55:16