博客 / 列表

浪遏飛舟 - Sass將Unicode編譯成文字字符導致icon亂碼問題

發現問題 最近在使用公司組件庫中的穿梭框組件時發現icon圖標全都亂碼了 分析問題 經排查發現,組件樣式文件(scss)引入的iconfont矢量圖標字體,構建時,\e601這類Unicode字符在經過sass編譯後就變成了文字字符(雙字節字符),導致出現亂碼 .icon-ok:before { content: "\e601"; } Sass編譯後 .icon-ok:before {

iconfont , sass , loader , plugin , unicode

浪遏飛舟 - Cocos Creator 最佳實踐:JavaScript兼容性問題規避

本文從Cocos Creator 開發的角度出發,仔細探討了關注 JavaScript API 兼容性的必要性,以及如何藉助工具和 Polyfill 來規避 Cocos Creator 項目的兼容性問題。 一、引言:JavaScript虛擬機的差異性 不同的瀏覽器和移動設備所使用的 JavaScript 虛擬機(VM)千差萬別,所支持的 API 也大相徑庭。 我們來了解一下 Cocos Creat

兼容性 , Javascript

浪遏飛舟 - 前後端未分離項目檢視ES6和Web API兼容性方案

背景 近半年,已產生幾起FreeMarker項目(後面統一簡稱FM項目)在IE瀏覽器或者360瀏覽器兼容模式環境下下因使用 ES6+ 高級語法特性而運行出錯的線上問題,導致業務流程無法執行下去。雖然一直在強調開發同學在做FM項目的需求時不要使用ES6,但是口頭上的的團隊公約約束性不強,加上開發同學早已習慣性使用ES6,使之問題層出不窮,另外,還有些Web Apis和樣式在IE上存在兼容性問題(比如

ecmascript-6 , 前後端分離 , 兼容性 , eslint , babel

浪遏飛舟 - 從AST原理到ESlint實踐

AST(抽象語法樹) 為什麼要談AST? 如果你查看目前任何主流的項目中的devDependencies,會發現前些年的不計其數的插件誕生。我們歸納一下有:ES6轉譯、代碼壓縮、css預處理器、eslint、prettier等。這些模塊很多都不會用到生產環境,但是它們在開發環境中起到很重要的作用,這些工具的誕生都是建立在了AST這個巨人的肩膀上。 什麼是AST? It is a hierarch

ast , 插件 , plugin , 註釋 , eslint

浪遏飛舟 - 開發一款前端本地調試命令行工具庫

背景 項目開發中,前端同學經常會本地聯調測試環境,聯調的方法有很多,在《前端項目本地調試方案》一文中我最後講述到在瀏覽器與前端項目本地服務之間加一層代理服務(正向代理),幫助自動登錄拿到令牌後轉發請求獲取靜態頁面、靜態資源以及受保護資源,從而實現聯調。 原理 流程描述: 首先本地啓動前端本地項目和代理服務,代理服務幫助實現自動登錄,拿到令牌 瀏覽器輸入訪問地址,請求首先會到代理服務,代理服

命令行 , 前端工具 , 前端調試 , 調試工具 , npm

浪遏飛舟 - create-react-app腳手架搭建chrome插件項目

背景 上篇文章《前端項目本地調試方案》中講到開發chrome拓展插件幫助完成Cookie複製,從而實現本地項目調試。但插件採用的是原生JS開發,本文來探討如何使用creact-react-app搭建chrome插件應用? 項目實踐 初始化目錄結構 首先,執行下面命令初始化項目 create-react-app chrome-extension --template typescript 創建的項目

react , 谷歌瀏覽器插件 , chrome-extension , 谷歌擴展 , create-react-app

浪遏飛舟 - 彙總mobx奇淫技巧

簡化action屬性更新 通常情況下,store中會有很多屬性,其中有些屬性更新會很頻繁,每一個屬性都需要寫一個action函數去更新,當這種需要變更的屬性越多時,會導致store中代碼量異常的龐大,可讀性也會降低。就如下面代碼一樣: class TestStore { @observable info = {} as IInfo; @observable list = [] as

技巧 , mobx

浪遏飛舟 - chrome-dev-tools中Form Data與Request Payload有什麼區別?

在前後端聯調過程中,常常會遇到前端同學説“明明向後端傳遞了數據,怎麼後端接收不到呢?”為了解決這個困擾,本文來分析下究竟是什麼導致了上述問題。 前後端聯調時常會F12打開調試器分析請求,在request body中通常會看到Form Data與Request Payload兩種形式。 場景 使用axios發送post請求,參數為對象,默認會設置Content-Type為applicatio

formdata

浪遏飛舟 - create-react-app腳手架搭建後如何使項目支持修飾器語法

create-react-app搭建react項目後,是不支持修飾器語法的。react-scripts庫已經提供了打包cli命令以及常規的構建配置,如果需要使用一些使用時特性,比如修飾器等,需要另外注入 正好,官網提供react-app-rewired庫,可能幫助我們注入自定義構建配置 首先,安裝react-app-rewired yarn add react-app-rewired -S 將re

修飾器 , create-react-app

浪遏飛舟 - 瀏覽器如何支持import與require

1、瀏覽器是否支持import和require? 1.1、對require支持情況 // add.js module.exports = { add: function(num1, num2) { return num1 + num2 } } // index.js const { add } = require('./add') document.getElementById

require , import

浪遏飛舟 - gulp構建react項目三:browserify處理jsx中模塊化問題

項目依賴模塊 目錄結構 gulp01 ├── src │ ├── components │ │ ├── Test │ │ | └── Test.jsx │ │ ├── Child │ │ | └── Child.jsx │ └── App.jsx ├── node_modules ├── index.js ├── gulpfile.js ├

gulp , browserify

浪遏飛舟 - 一文搞懂http緩存

1、http緩存 瀏覽器第一次向一個web服務器發起http請求後,服務器會返回請求的資源,並且在響應頭中添加一些有關緩存的字段如:Cache-Control、Expires、Last-Modified、ETag、Date等等。之後瀏覽器再向該服務器請求該資源就可以視情況使用強緩存和協商緩存。 強緩存:瀏覽器直接從本地緩存中獲取數據,不與服務器進行交互。 協商緩存:瀏覽器發送請求到服務器,服

tomcat , http緩存 , 瀏覽器緩存

浪遏飛舟 - 如何減小vendor.js文件的大小,加快打包速度

1、webpack3打包第三方模塊配置 // 打包第三方插件 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: '[name].js', // 可以是已經存在的chunk(一般指入口文件)對應的name,那麼就會把公共模塊代碼合併到這個chunk上;否則,會創建名字為n

webpack3

浪遏飛舟 - 詳解CommonsChunkPlugin的配置和用法

簡介 CommonsChunkPlugin主要是用來提取第三方庫和公共模塊,避免首屏加載的bundle文件或者按需加載的bundle文件體積過大,從而導致加載時間過長,着實是優化的一把利器。 先來説一下各種教程以及文檔中CommonsChunkPlugin提及到chunk有哪幾種,主要有以下三種: webpack當中配置的入口文件(entry)是chunk,可以理解為entry chunk

webpack3

浪遏飛舟 - import與require區別

命令 規範 調用 本質 特點 require CommonJS規範 運行時調用 賦值過程 非語言層面的標準。 社區方案,提供了服務器/瀏覽器的模塊加載方案。只能在運行時確定模塊的依賴關係及輸入/輸出的變量,無法進行靜態優化。 import es6+的語法標準 編譯時調用

require , import

浪遏飛舟 - 字符編碼-ASCII,Unicode 、 UTF-8、UTF-16、UTF-32

ASCII 碼 我們知道,計算機內部,所有信息最終都是一個二進制值。每一個二進制位(bit)有0和1兩種狀態,因此八個二進制位就可以組合出256種狀態,這被稱為一個字節(byte)。也就是説,一個字節一共可以用來表示256種不同的狀態,每一個狀態對應一個符號,就是256個符號,從00000000到11111111。 上個世紀60年代,美國製定了一套字符編碼,對英語字符與二進制位之間的關係,做了統一

ascii , utf-16 , utf-8 , 字符編碼 , unicode