原创 vue-cli 自定義交互式命令環境及多配置打包
用vue-cli跑項目的命令： npm run serve 是不壓縮文件，直接加載源碼，並且此時的process.env.NODE_ENV是 development npm run build 命令會打包代碼，並且此時的proces
2020-07-02 11:14:23
原创 瀏覽器中的頁面循環系統
瀏覽器中的頁面循環系統 目錄 瀏覽器中的消息隊列 瀏覽器中的延遲隊列 V8 引擎中的微任務隊列 總結 瀏覽器中的消息隊列 我們先從最簡單的場景來分析，然後一步步瞭解瀏覽器頁面主線程是如何運作的，從中體會瀏覽器爲什麼
2020-06-21 17:38:59
原创 從靜態頁面到服務端渲染 -- 淺析SPA和SSR的不同
我們剛開始接觸到的就是一個靜態頁面，比如我們寫了一個html文件，放在服務器上用戶就能訪問了，而後面網站需要展示更多的信息，或者提供用戶操作數據，因此就要接入了數據庫，數據庫負責數據的處理，於是就有了一些html模板引擎，用於動態的把數
2020-06-21 17:38:58
4
原创 gulp進階插件 -- gulp-babel、gulp-postcss
gulp是一個流式構建系統（把源代碼生成用戶可以使用的目標的自動化工具），是基於Node.js實現構建，開發者可以使用它在網站開發過程中自動執行常見任務，比如編譯預處理CSS，壓縮JavaScript，轉化es6語法等。 gulp本身雖
2020-02-28 09:26:26
原创 IntersectionObserver 實現圖片懶加載
圖片懶加載原理： 先將img標籤的src設置爲同一張圖片，減少http的請求數量，給img標籤自定義屬性，把真正的路徑放在自定義屬性中（比如data-src），當監聽到img出現在可視窗口時候，將src替換成真正的路徑。 圖片懶加載能解決
2020-02-24 20:58:05
原创 webpack 傻瓜式安裝教程
在一個全英文目錄下新建一個全英文的文件夾 以命名爲webpack爲例，進入該文件夾裏面 shift+鼠標右鍵，點擊在此處打開命令行 安裝webpack： npm install --save-dev webpack 如果你使用的webp
2019-08-23 07:19:31
原创 JavaScript的內存機制
JavaScript內存空間並不是一個經常被提及的概念，很容易被大家忽視。包括我自己，可是我發現由於對它們的模糊認知，導致了很多東西理解得並不明白。比如最基本的引用數據類型爲什麼會叫引用數據類型？淺複製與深複製有什麼不同？還有閉包，原型等
2019-08-23 07:19:30
原创 JS 對數組進行升序排序（冒泡法）
冒泡排序算法的原理： 每一趟比較從第一位元素開始，結束爲最後一個沒冒泡的元素（已經冒泡的元素不需再比較） 比較相鄰的元素。如果第一個比第二個大，就交換他們兩個。 每一趟把當前所有比較的最大的值冒泡 有多少個元素就比較多少趟 -1 代碼
2018-08-31 09:15:00
原创 Vue-demo（一）實現商品列表的展示
Vue實現商品列表的展示是一個比較簡單的入門demo，下面是具體的實現： 簡單CSS樣式： <style> #box ul{ display: flex; flex-wrap: wrap; } #box li{ pad
2018-08-31 09:14:18
原创 CSS實現寬度自適應寬高16:9的矩形
前面我們講了怎麼做一個自適應寬高1:1的正方形 https://blog.csdn.net/weixin_39357177/article/details/81183743 現在我們來講講做自適應16:9的矩形要怎麼做 第一步先計算高度，
2018-08-31 09:14:18
1
原创 實現多行文本垂直居中
方法一： 1. 對父元素設置display:table屬性 2. 對文本設置display:table-cell和vertical-align:middle屬性 <style> .box{ width: 500px;
2018-08-31 09:14:14
1
原创 web前端面試題：用css實現幻燈片效果
題目：請寫一個簡單的幻燈效果頁面（如果不使用JS來完成，可以加分） 幻燈片效果其實就是實現圖片的點擊切換，一般情況下我們都會想到用js來做，但是用css方法要怎麼實現呢 可以利用CSS3的單選按鈕radio和label標籤的for屬性來實
2018-08-31 09:14:14
2
原创 Vue的安裝步驟
在一個英文目錄下，新建一個文件夾(以myvue爲例，不能命名爲vue) 在myvue文件夾下，shift+鼠標右鍵打開命令行 1.安裝webpack npm init -y npm install webpack --save-dev n
2018-08-31 09:14:14
原创 babel的安裝和配置
Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉爲ES5代碼，從而解決部分瀏覽器對es6 代碼不兼容的問題。 這意味着，你可以用 ES6 編寫程序，而不用擔心現有環境是否支持，因爲babel可以將ES6代碼轉換成ES5代碼。 下面是b
2018-08-31 09:14:14
1
原创 CSS 實現一個自適應的正方形
傳統方法正方形用固定的形式寫 直接長＝寬寫固定的值如下 .box{ width: 200px; height: 200px; background: pink; color: #666; } 但是很多情況下，在移動端
2018-08-31 09:14:14