原创 自己手動擼一個前端腳手架

手動新建項目實在有點low怎麼裝逼?當然是自己寫一個腳手架。 基本流程 寫腳手架基本都是這麼個流程,當然可能一些複雜的定製化項目小步驟比較多,那就按需再做額外考慮1.輸入基本信息2.下載基礎代碼3.對基礎代碼進行一定的修改4.額外的事 需要

原创 react本質:JSX如何轉化爲javascript

react中基本都使用JSX來開發,但JSX其實是javascript的一種語法糖。 什麼是語法糖? 語法糖就是提供了一種全新的方式書寫代碼,但是其實現原理與之前的寫法相同。語法糖可以說是廣泛存在於各種計算機代碼中,包括C語言中的a[i]

原创 簡單通過settimeout看javascript的運行機制

這篇文章主要給大家介紹了關於如何通過settimeout看javascript的運行機制的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用javascript具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧

原创 從settimeout看javascript的運行機制

前言 我們知道JS是一個單線程的語言,而且其運行機制比較特殊。下面我們通過settimeout的幾個示例來展現javascript的運行機制的特殊點 示例1 console.log(1); setTimeout(function(){

原创 ES6的class本質和react中需要使用bind(this)的原因

ES6的class 我們知道ES6新出一個規範是使用class關鍵字來定義一個類,這在以前是沒有的在以前,需要在javascript裏實現面向對象,就需要使用prototype 什麼是面向對象? 面向對象有如下幾個基本特徵,通常認爲,只要實

原创 簡述dom diff原理

前言: 關於react的虛擬dom以及每次渲染更新的dom diff,網上文章很多。但是我一直信奉一個原則,即:但凡複雜的知識,理解之後都只需要記憶簡單的東西,而想簡單、精確描述一個複雜知識,是極困難的事。 正文 dom diff是什麼?1

原创 解析帶emoji和鏈接的聊天系統消息

在寫聊天系統的時候,不可避免地要對聊天系統中的消息做一些解析常見的比如一句話中帶有emoji、link等信息的時候,要把emoji解析成圖片、把link轉成可以點擊的(項目中沒有做對圖片做行內處理,而是把圖片像微信一樣作爲單獨消息發送)我們

原创 對console.log的一種封裝

對於一個特別喜歡用console.log來調試代碼的人來說,console.log的一些坑和console.log的詳細用法確實是一件值得深究的事。 先記錄一下console.log的一些坑:1.對於引用對象,比如Array和Object,

原创 使用webpack + electron + reactJs開發windows桌面應用

electron是一兩年前挺火的一個框架本質上是一個瀏覽器,但是集成了很多windows系統的功能,讓前端開發也可以直接操作windows的窗體,做成一個實打實的桌面軟件(當然聽說mac上也可以用electron,不過沒試過)(沒錯我還在用

原创 使用webpack打包多頁jquery項目

雖然已經2019年了不過有一些項目還是需要用到jquery的不過考慮到使用jquery的一堆兼容性問題也爲了可以順利地使用ES6來擼代碼研究使用webpack+babel打包代碼來發布 幾個重點:1.爲了將模塊分割加載,不至於一個js文件過