原创 你可能還不知道的 CSS 特性

1. :is() 和 :where() :is(.header, .main) p { color: red; } :where(.header, .main) p { color: red; } 其實這兩個選擇器等同於： .h

2021-06-19 17:51:56

原创 學習之道-基礎知識學習技巧 歐陽修三上之功 費曼學習法 互聯網學習法 類比法 推演法 構建知識樹

歐陽修三上之功 歐陽修《歸田錄》 馬上，枕上，廁上 費曼學習法 最有效的學習法 概念、交給別人、評價（回顧）、簡化 互聯網學習法 非常雞賊的學習方法 比如說你想買一個耳機， 不知道買哪一款，於是就在網絡上提問，200塊錢能買什

2021-05-23 01:44:46

原创 學習之道-如何記筆記 不記筆記會怎麼樣 康奈爾筆記法 東京大學筆記法 吐糟筆記法

不記筆記會怎麼樣 看書不記筆記 白看了 看 Vue / React 不記筆記 白看了 記筆記的意義 在自己的大腦中設立一個地標 你實際上在構建自己的記憶宮殿 康奈爾筆記法 Cornell Notes 鏈接 《如何在大學學習》一書提到的

2021-05-19 12:22:11

原创 安裝與調試

配置 npm 淘寶源 npm config set registry https://registry.npm.taobao.org/ 如果後悔了，想撤銷淘寶源就運行 npm config delete registry 安裝 npm

2021-05-16 03:00:49

原创 手寫eventhub

function EventHub () { this.events = {} } EventHub.prototype.$on = function(name, fn) { (this.events[name] || (this

2021-05-14 08:05:11

原创 學習之道-學習技巧 學習技巧

學習技巧 遺忘曲線 幫助你認識自己。 1.不要因爲忘了而責怪自己。 2.如果想不忘，過幾天再翻看一遍（記筆記）。 成就感 你學不過越學越快樂的那些人 也就是正反饋--你學一個東西的時候（學習 => 爽 => 快樂 => 學習 => .

2021-05-12 11:46:53

原创 async await 全解

前端似乎對 Promise 不滿 優點 Async/Await替代Promise的6個理由 但是，除了更簡潔意外，其他理由似乎都不是很有說服力。 爲什麼需要 async ？ 看起來非常多餘，await 所在的函數就是 async ，不是嗎

2021-05-10 12:06:13

原创 webpack plugn 插件原理

從上文提煉出 webpack 的一些主要流程 init => run(前兩個一般不用) => compile(編譯開始的時候) => compilation(準備編譯的整個過程) => make(開始編譯) => afterCompile

2021-05-08 05:02:42 3

原创 閱讀 webpack 源碼 第一個問題 第二個問題 新的第二個問題 流程圖待補充 第三個問題 第四個問題 第五個問題 第六個問題 第七個問題 第八個問題 第九個問題 第十個問題

[email protected] [email protected] 閱讀源碼小技巧：摺疊所有代碼，先不看所有的變量聲明和 require，要是之後用到再看，直接看主要邏輯。 第一個問題 webpack-cli 是如何調用 webpack

2021-04-23 11:41:17

原创 封裝一個打開 dialog 的函數

import Dialog from './Dialog.vue' import { createApp. h } from 'vue' export const openDialog = options => { const {ti

2021-04-14 00:43:55

原创 css-loader 源碼閱讀

全部摺疊代碼以後，我們發現前兩步也是獲取 options，驗證 options 直接看最後一行，是一個 callback，因爲 css-loader 是異步的， 我們主要看 moduleCode，點擊進入 基本架構和之前差不多

2021-04-02 00:31:34

原创 兩個 loader 源碼總結

raw-loader webpack 提供 loader-utils 和 schema-utils 作爲輔助工具 webpack 通過 this 來傳遞上下文 getOptions(this) 可以獲取 options validat

2021-04-02 00:31:34

原创 AST、Babel、依賴 babel 與 AST 把 let 變成 var 將代碼轉爲 ES5 分析 index.js 的依賴 遞歸地分析嵌套依賴 在複雜一點：循環依賴

babel 與 AST 先從Babel 說起 babel 的原理 1、parse：把代碼 code 變成 AST 2、traverse：遍歷 AST 進行修改 3、generate：把 AST 變成代碼 code2 即：code --

2021-03-26 14:57:18

原创 Webpack 核心原理 webpack 要解決的兩個問題 編譯 import 和 export 關鍵字 把多個文件打包成一個

webpack 要解決的兩個問題 現有代碼（接上文） 很遺憾，這三個文件不能運行 因爲瀏覽器不支持直接運行帶有 import 和 export 關鍵字的代碼 怎麼樣才能運行 import / export 不同瀏覽器功能不同 現代

2021-03-26 14:57:18 3

原创 代碼優化基本原則

代碼優化基本原則 易讀性優先 如果不是性能瓶頸，就不要爲了性能而改寫代碼 複雜性守恆原則：無論你怎麼寫代碼，複雜性都是不會消失的 推論：如果邏輯很複雜，那麼代碼看起來就應該是複雜的。如果邏輯很簡單，代碼看起來就應該是簡單的。 命名 程序

2021-03-26 14:57:18