原创 Bootstrap實戰 - 註冊和登錄

一、介紹 註冊和登錄在社交和商業網站中是必不可少的一個部分。 二、知識點 2.1 標籤頁 2.1.1 基礎標籤頁 標籤頁的使用與導航欄類似,同時都依賴於基礎樣式 nav,不同的是附加樣式變成了 nav-tabs 和 nav-pills(膠囊

原创 Bootstrap實戰 - 響應式佈局

一、介紹 響應式佈局就是一個網站能夠兼容多個終端,而不是爲每個終端做一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。 導航欄與輪播在大部分網站的頭部佔很高的比重,特別是導航欄,扮演着網站地圖的角色。 在響應式佈局中,要求導航欄能夠根

原创 前端性能和加載體驗優化實踐(附:PWA、離線包、內存優化、預渲染)

一、背景:頁面爲何會卡? 1.1 等待時間長(性能) 項目本身包/第三方腳本比較大。 JavaScript 執行阻塞頁面加載。 圖片體積大且多。 特別是對於首屏資源加載中的白屏時間,用戶等待的時間就越長,用戶感知到頁面的速度就越慢。麻

原创 Bootstrap實戰 - 瀑布流佈局

講 Bootstrap 基礎的教程網上已經很多了,實際上 Bootstrap 中文網(bootcss.com)裏的文檔已經寫的很詳細了,但實戰的案例卻不多。這裏用一些當前流行的網頁佈局爲導向,使用 Bootstrap 中的樣式來完成它。每次

原创 Promise + Async&Await + Array.reduce + 函數遞歸 解決網絡/接口請求的依次/排隊不間斷間隔訪問

背景 試想在一個需要頻繁更新數據的場景(例如:監控、圖表類),常規方法是設置一個間隔 N 秒的定時器 setInterval;但是這種方式存在一個問題,當前一個請求時間過長時(超過了間隔時間),後一個請求的接口響應會先於前一個請求,也就是說

原创 使用 GitLab CI/CD 和阿里雲 CLI 自動部署前端項目

一、什麼是 CI/CD? CI(持續交付)是功能迭代後自動構建、打包、校驗代碼格式、跑單測、單測覆蓋率,常見的就是 Webpack、Rollup、ESLint等。 CD(持續部署)是經過 CI 後,代碼自動部署到服務器。 在 GitLab

原创 Postman 使用小技巧/指南

一、什麼是 Postman(前世今生) Postman 誕生於 2013 年,一開始只是 Abhinav Asthana 着手於解決 API 測試的工具,隨着這個工具的使用者和需求迅速激增,Abhinav Asthana 找了他的兩個前同事

原创 前端常用庫 CDN

jQuery 鏈接:https://mazey.cn/cdn/jquery-2.1.1.min.js 代碼: <script language="javascript" type="text/javascript" src="https:/

原创 使用 rollup 打包可按需加載的 NPM 包

安裝 rollup npm install rollup --save-dev 配置文件 rollup.config.js export default { input: 'src/index.js', output: {

原创 Git 刪除 .gitignore 生成之前上傳的文件

清除緩存 git rm -r --cached . git add . 提交記錄 git commit -m "chore: 清除緩存。" git push

原创 webpack 4 快速搭建

安裝 npm install --save-dev [email protected] [email protected] 更新 package.json 腳本 "scripts": { "build": "webpack --conf

原创 講講 Promise

一、什麼是 Promise 1.1 Promise 的前世今生 Promise 最早出現在 1988 年,由 Barbara Liskov、Liuba Shrira 首創(論文:Promises: Linguistic Support fo

原创 Linux 搭建Git服務器

安裝Git yum install -y git git --version 創建 Git 用戶 sudo adduser git // 設置密碼 passwd git 導入公鑰 find / -name authorized_keys

原创 H5應用程序緩存 - Cache manifest

一、作用 離線瀏覽 - 根據文件規則把資源緩存在本地,脫機依然能夠訪問資源,聯網會直接使用緩存在本地的文件。優化加載速度,節約服務器資源。 二、適用場景 正如 manifest 英譯的名字:離線應用程序緩存,這項功能是設計給會有離線場景的應

原创 使用 postMessage + iframe 實現跨域通信

一、postMessage window.postMessage() 方法可以安全地實現跨源通信。通常,對於兩個不同頁面的腳本,只有當執行它們的頁面位於具有相同的協議(通常爲https),端口號(443爲https的默認值),以及主機(兩