原创 自動化生成html文件之多頁面配置封裝
config.js // entry: 入口js // template: html打包參照模版 module.exports = { pages: { 'index': { src: './src/index.
2020-06-09 05:38:41
原创 webpack 之 publicPath
（一）項目開發完上線，path路徑都會換成cdn的域名前綴，這個時候就要使用publicPath了 在output輸出的時候配置：以域名 static.test.cn 爲例：在多頁面的基礎上修改 module.exports = {
2020-06-09 05:38:41
原创 處理項目中的資源文件--loader
使用babel-loader轉換ES6代碼： （一）安裝loader需要npm install 來安裝 （二）在webpack.config.js中新加一個module, rules 是要引入的loader, 它是一個數組，test是正則
2020-06-09 05:38:41
原创 自動化生成項目中的html頁面
背景：打包好一次js、css都會生成一個不同的帶有版本號的打包文件，把打包好的文件引入html中，每次手動改版本號太麻煩也不現實，如果自動生成html頁面就會方便很多了 實現：借用webpack解決該問題 （html-webpack-pl
2020-06-09 05:38:41
原创 iPhonex系列手機底部適配
iPhoneX、iPhone11、iphoneXR 等全屏手機，由於下方有一個小長條，到底吸底按鈕等元素被下方小長條遮住，需向上移動一點，將小長條留出距離， 適配方法如下： js: let deviceHeight = windo
2020-06-09 05:38:41
原创 移動端適配代碼
(function flexible(window,document) { var docEl = document.documentElement; function setRemUnit(){
2020-06-09 05:38:41
原创 找出數組中每個元素出現的次數
var findLucky = function(arr) { var obj = {} for (var i=0;i<arr.length;i++) { if (obj[arr[i]]) {
2020-06-09 05:38:41
原创 啥是骨架屏
（一）什麼是骨架屏 骨架屏可以理解爲是當數據還未加載進來前，頁面的一個空白版本。在頁面完全渲染完成之前，用戶會看到一個樣式簡單，描繪了當前頁面的大致框架的頁面，然後骨架屏中各個佔位部分被實際資源完全替換，這個過程中用戶會覺得內容正在逐漸加
2020-05-24 00:15:46
原创 async/await：使用同步的方式去寫異步代碼
（一）async/await 使用了 Generator 和 Promise 兩種技術 1. Generator 生成器函數 生成器函數是一個帶星號函數，而且是可以暫停執行和恢復執行的函數。 （1）在生成器函數內部執行一段代碼，如果遇到
2020-05-24 00:15:46
原创 WEB性能分析
（一）什麼是web性能？ Web 性能描述了 Web 應用在瀏覽器上的加載和顯示的速度。 （二）web性能查看工具 Chrome 爲我們提供了非常完善的性能檢測工具：Performance 和 Audits，它們能夠準確統計頁面在加載階段
2020-05-24 00:15:46
原创 Chrome開發者工具：利用網絡面板做性能分析
（一）瀏覽器開發者工具面板功能 1. 網絡面板 網絡面板由控制器、過濾器、抓圖信息、時間線、詳細列表和下載信息概要這 6 個區域構成（如下圖所示）。 （1）控制器 其中，控制器有 4 個比較重要的功能 1. 紅色圓點的按鈕，表示“開
2020-05-24 00:15:46
原创 HTML、CSS和JavaScript，是如何變成頁面的？
按照渲染的時間順序，流水線可分爲如下幾個子階段：構建 DOM 樹、樣式計算、佈局階段、分層、繪製、分塊、光柵化和合成。 在介紹每個階段的過程中，應該重點關注以下三點內容：（輸入、處理、輸出） 1. 開始每個子階段都有其輸入的內容 2. 每
2020-05-24 00:15:46
4
原创 啥是蹦牀函數
（一）蹦牀函數解決的問題 使用es6的蹦牀函數解決遞歸造成的堆棧溢出 （二）舉個例子 <script> function test () { test() } test() </script> 函
2020-05-24 00:15:46
原创 同步回調、異步回調
1. js爲什麼是單線程? 其實，JavaScript的單線程，與它的用途是有很大關係，JavaScript作爲瀏覽器的腳本語言，主要用來實現與用戶的交互，利用JavaScript，可以實現對DOM的各種各樣的操作，如果Ja
2020-05-21 06:26:18
原创 微信開發者工具、whistle 配合抓包
1. 啓動whistle w2 start -p 8899 2. 配置微信開發者工具 最上邊一欄 ---- 設置 ---- 代理設置 ---- 設置本機ip 加 端口號 8899 完成~ 這樣微信開發者的頁面和接口調用就都可以在w
2020-05-21 06:26:18