原创 koa-session2使用
使用場景 在web應用中，我們常常使用session來管理會話，用一個sessionId來表明用戶已登錄。session結合cookie管理會話在web應用中是很常見的。 安裝 在koa項目中 npm install koa-se
2020-06-02 15:36:26
3
原创 JS相等操作符（== 和===）
”“ 和“=”運算符用於比較兩個值是否相等，當然它們對相等的定義不盡相同。兩個運算符允許比較任意類型的操作數，如果操作數相等則返回true，否則返回false. 下面表格展示不同類型的值用相等操作符比較後的結果。 類型（x）
2020-06-02 15:36:26
原创 html2canvas與jspdf實現下載圖片以及打印PDF
本文分享使用html2canvas實現繪製頁面成圖片。使用jspdf實現將圖片打印成pdf 代碼如下： <template> <div class="s-receipt"> <Modal v-model="
2019-09-03 01:54:18
原创 Hybrid App混合開發通信
混合app即外殼爲原生開發，安卓或者ios。業務爲H5的APP。這樣的APP可以減少開發成本。也可以熱更新，用戶不用更新app即能使用新功能。 其中混合開發涉及一個通信的問題。即業務系統需要使用一個app功能時，需要H5調用nat
2019-09-03 01:54:18
1
原创 react項目打包優化
本文分享react項目的打包優化， 項目使用create-react-app創建。不做任何優化時打包體積過大，首頁渲染十分緩慢。 使用webpack-bundle-analyzer查看打包chunck的內容，使用方式如下： yar
2019-08-06 01:29:47
6
原创 vue組件開發
本文介紹開發一個彈框組件 //組件代碼 <template> <div class="yui-wrapper"> <transition name="fade"> <div class="mask" v-s
2019-07-31 03:25:20
原创 vue聯繫人組件
本文分享一個基於bscroll封裝一個類似於聯繫人得組件 //組件代碼 <template> <div class="ylw-indexList-wrapper"> <div class="ywl-index-lis
2019-07-31 03:25:20
原创 vue中使用指令限制input輸入
在項目中限制輸入框的輸入字符是一個很常見的場景。 常見做法如下： 1.監聽@input事件在方法中處理 2.封裝input組件在組件中處理 如下是監聽@input事件的方法 <input type=“text” placehold
2019-07-07 02:13:03
3
原创 keep-Alive遇到的一個坑
在vue中，有時候我們需要緩存一個頁面，這個時候會用到keep-Alive。 觸發場景： 在引用同一個子組件得兩個頁面，且該子組件會使用到dom元素得時候。 例如子組件 <template> <div class="yd-di
2019-06-12 13:34:17
原创 H5開發IOS兼容性問題
本文分享在做H5開發的時候在IOS設備上的一些兼容性問題的解決方法 1、設置overflow-y時滾動區域不流暢問題 -webkit-overflow-scrolling: touch; 2、鍵盤彈起收縮後區域留白問題 window
2019-05-10 09:55:11
原创 性能優化gzip壓縮
gzip壓縮可以提升資源加載40%以上得性能。gzip壓縮需要資源爲.gz得文件。同時服務器需要設置開啓gzip壓縮。本文介紹webpack構建得項目中開啓gzip壓縮，以及nginx配置gzip。 如下是開啓gzip壓縮前後得網頁加
2019-04-27 10:26:35
原创 圖片懶加載
圖片懶加載在一定程度上可以大大優化性能，增強用戶體驗。主要就是當圖片在可視區域時再加載真實的圖片，不在時用一張圖片代替。 具體代碼如下： //節流函數用於滾動時避免多次執行加載圖片函數 var throttle = function(
2019-04-11 02:06:08
1
原创 ES6變量的解構賦值
ES6允許按照一定模式從數組和對象中提取值，然後對變量進行賦值，這被稱爲解構賦值。 1.數組的解構賦值 如下： let [a,b,c,d] = [1,2,3,4] a // 1 b //2 c //3 d //4 let [
2019-04-06 05:25:01
原创 var ,let,const的區別
var 是ES5申明變量的方式，ES6新增了let,const來申明變量。 1.1let基本用法 { let a = 10; var b = 1; } a //ReferenceError: a is not defined b
2019-03-30 02:12:15
原创 webpack入門
webpack介紹 本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph
2019-03-17 02:09:26