原创 node框架express的研究0.前言1. 從入口開始1.1入口1.2 proto1.2.1 app.init方法1.2.2 app.handle方法1.2.3 每一個method的處理1.2.4

0.前言在node中,express可以說是node中的jQuery了,簡單粗暴,容易上手,用過即會,那麼我們來試一下怎麼實現。下面我們基於4.16.2版本進行研究1. 從入口開始1.1入口主入口是index.js,這個文件僅僅做了requ

原创 小白的diff算法試試水之旅0.前言1. 主角1:Element構造函數2. 主角2:render函數3. 大主角: diff函數4. 更新5. 完成

0.前言“孩子,你會唱diff算法嗎”“twinkle,twinkle,diff start”1. 主角1:Element構造函數先介紹一下虛擬dom的數據結構,我們都知道源碼裏面有createElement函數,通過他創建虛擬dom,然後

原创 不同頁面通信與跨域0. 前言1. localstorage2. 玩轉iframe3. 非同域的兩個tab頁面通信4.MessageChannel

0. 前言相信跨域有什麼手段,大家都背得滾瓜爛熟了。現在我們來做一些不在同一個tab頁面或者跨域的實踐。1. localstorage1.1 onstorage事件localstorage是瀏覽器同域標籤共用的存儲空間,所以可以用來實現多標

原创 Rxjs光速入門0. 前言1. Observable2. 產生數據源3. Hot & Cold Observable5. 操作符6. 彈珠圖7. Subject總結

0. 前言本文基於5.5.11版本!本文基於5.5.11版本!本文基於5.5.11版本!Rx指的是響應式編程的實踐工具擴展——reactive extension,編程風格是響應式編程+函數式編程。Rxjs則是這種模式的js的實現,處理異

原创 瀏覽器原理0. 前言1. 解析過程2. 渲染樹2.1 CSS樣式計算2.2 構建渲染樹3. 佈局(重要)4. 重繪與重排(重要)5. paint(繪製)6. composite(重要)7. 瀏覽器加載

本文來自於我的github0. 前言身爲前端,打交道最多的就是瀏覽器和node了,也是我們必須熟悉的。接下來我們講一下瀏覽器工作原理和工作過程。從url到頁面的過程,......,我們直接來到收到服務器返回內容部分開始。先上很多人都見過的一

原创 一點點css的基礎原理總結0.前言1.包含塊(CB)2.寬和高3.BFC4.行內元素5. 垂直方向的margin6.盒子模型

0.前言CSS屬性非常多,如果說死記的話,是不容易的,我們瞭解他的原理,其他不常見的屬性都是手到擒來1.包含塊(CB)首先說一下ICB(初始包含塊)。簡單來說,根元素的ICB就是首屏。 連續媒體:頁面內容範圍超出視窗大小,需要我們拉動滾動條

原创 從MDN上的canvas例子受到的啓發0.前言1.面向對象編程的實踐2.相互糾纏的現象3.解決方案4.模擬核裂變5.大魚吃小魚

0.前言在MDN上面有一個彈球的例子,我們的小球會在屏幕上彈跳,當它們碰到彼此時會變色。1.面向對象編程的實踐官網講得太長,而且有一些漏洞,我改進一下let canvas = document.querySelector('canvas')

原创 js的this、call、apply、bind、繼承、原型鏈0.前言1.this2.call、apply、bind3.從call到繼承

0.前言這些都是js基礎進階的必備了,有時候可能一下子想不起來是什麼,時不時就回頭看看基礎,增強硬實力。1.this1.1this指向誰最後調用,就指向誰 先簡單複習一次,this指向就那麼幾種:new 關鍵字 指向new 創建的對象fun

原创 pwa+webpack,初探與踩坑0.前言1.webpack2.pwa3.基於webpack的pwa

0.前言我們都知道pwa是一個新技術.,依靠緩存,離線了還能正常跑,而且秒開。我把以前原生寫的小遊戲遷移到react,再遷移到webpack+react,最後再升級到pwa。具體介紹不多說,我們開始擼吧。1.webpackwebpack攻略

原创 前端路由0.前言1.哈希路由2.history路由

0.前言後端有後端路由,根據路由返回特定的網頁,代表者是傳統的mvc模式,模板引擎+node。前端也有前端的路由,我們用三大框架做spa的時候,總是和路由離不開關係。主要有兩種方法:基於哈希路由、基於history1.哈希路由#後面的內容是

原创 js隨機數生成器的擴展0.前言1.擴展+分區2.二進制法3. 總結

0.前言給你一個能生成隨機整數1-7的函數,就叫他生成器get7吧,用它來生成一個1-11的隨機整數,不能使用random,而且要等概率。getx就是指一個能生成1到x的隨機數的函數主角:get7(你們所有人都沒有random這個技能,全都

原创 (VUE!jQuery!插件!)盤點前端羣的無腦回答0.前言總結

0.前言你是不是在前端羣見過很多這種前景:這個怎麼做?怎麼拿到這些數據?怎麼更新整個列表?回答:循環啊!遍歷啊!用一個數組保存,遍歷!jQuery!vue!然後有一些稍微高級的:我想快一點的解決方法。我想用性能好一點的方法。回答:遞歸啊!開

原创 模塊化的一些小研究0.前言1.script標籤引入2.AMD與CMD3.CommonJS與ES64.循環依賴5.webpack是如何處理模塊化的

本文來自我的github0.前言我們知道最常見的模塊化方案有CommonJS、AMD、CMD、ES6,AMD規範一般用於瀏覽器,異步的,因爲模塊加載是異步的,js解釋是同步的,所以有時候導致依賴還沒加載完畢,同步的代碼運行結束;Common

原创 js版本的(廣、深)度優先搜索0. 前言1.隊列、棧2.BFS1.1 矩陣形式的圖的遍歷1.2 樹的BFS舉例3.DFS

0. 前言廣度優先搜索(BFS)和深度優先搜索(DFS),大家可能在oj上見過,各種求路徑、最短路徑、最優方法、組合等等。於是,我們不妨動手試一下js版本怎麼玩。1.隊列、棧隊列是先進先出,後進後出,常用的操作是取第一個元素(shift)、

原创 玩轉JS的類型轉換黑科技0.前言1.奇葩例子2.從[]==![]開始3.從已有的得到想不到的4.關於(a==1 && a==2 && a==3)4.2 ===

原文來源於我的github0.前言js身爲一種弱類型的語言,不用像c語言那樣要定義int、float、double、string等等數據類型,因爲允許變量類型的隱式轉換和允許強制類型轉換。我們在定義一個變量的時候,就一個var、let、co