<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

292021-9

Vue的防抖和節流（接口頻繁調用如何處理）

首先描述一下我所使用的業務場景：系統有一個批量審批的功能，每個審批的流程需要根據提交的用戶實時的反饋回去進去用戶頁面的刷新，如果一個用戶同時有多個流程被審批通過，前端會向服務端頻繁的多次調用同一個接口，造成服務器壓力過大和頁面卡頓，非常影響用戶體驗。
目標：需要短時間內向服務端頻繁調用接口時只去調用最后一次的接口。（防抖）

防抖和節流的區別：主要體現在執行次數上的區別，比如我們寫一個200ms的延遲時間，節流就是每200ms執行一次，而抖動是只有在最后一次事件的200ms內調用一次回調函數。
防抖和節流都可以用于 mousemove、scroll、resize、input、click等事件，他們的區別在于防抖只會在連續的事件周期結束時執行一次，而節流會在事件周期內按間隔時間有規律的執行多次。

防抖 debounce

當事件被頻繁觸發時，在一定的時間內再去執行回調函數，如果在等待期間再次被觸發，則重新計時，直至整個等待期間沒有新的事件被觸發，執行回調函數。

舉個例子：一個點擊事件，為了防止用戶重復發起請求，如果用戶在三秒內多次發生點擊事件，點擊事件將只執行一次，第一次和第二次點擊的間隔只要在三秒鐘內就會重置這個等待時間，第二次和第三次之間的最大等待時間也是三秒，如果第二次點擊事件發生后的三秒內沒有新的點擊事件產生，第二次點擊后的三秒就會調用回調函數。

可以直接引用loadsh的debounce方法來實現函數防抖，也可以自己寫一個防抖函數（利用定時器）

引用loadsh

這里先給一個中文文檔的地址：https://www.lodashjs.com/docs/lodash.debounce
在vue3.x中也推薦了這種方式：https://v3.vuejs.org/guide/data-methods.html#methods
有多種引用方式，這里我直接采用npm的方式

npm i --save lodash 


    
        1

使用loadsh的debounce方法

<el-button id="myBtn" type="goon" icon="el-icon-search" @click="test">點擊事件</el-button> 


    
        1

let _ = require('lodash'); _.debounce(fun,ms,options) fun: 回調函數
ms:等待時間,毫秒
options:選項對象 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

注意：這里點擊事件要寫成test： 的形式，test()這樣是不生效的

import debounce from 'lodash/debounce' methods:{ test:debounce(()=>{ console.log("防抖函數執行",) },3000) } //或者下面這種寫法 document.getElementById("myBtn").addEventListener('click', debounce(function (event) { console.log("防抖函數執行",) }, 3000)) 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14

自定義防抖函數

<el-button type="goon" icon="el-icon-search" @click="test">點擊事件</el-button> 


    
        1

data:{ timer:null }, methods:{ //在最后一次點擊三秒后才會觸發一次點擊事件 test(){ clearTimeout(this.timer) //自定義個定時器三秒后執行，一旦有新的事件發生會將這個定時器清除重新創建一個，只有三秒內不出現事件這個定時器才不會被銷毀重構 this.timer = setTimeout(()=>{ console.log("防抖執行,這里就是你需要執行的操作") },3000) } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15

節流 throttle

在規定的時間內只觸發一次回調函數，在規定時間內多次觸發函數，只會執行一次

舉個例子：一個點擊事件，你設定了節流的延遲時間為一秒鐘，那么在你一直點擊的情況下，每隔一秒會觸發一次這個事件，直到你的點擊停止，這個不會累積，比如一秒鐘內點擊了五次，然后不再點擊時，事件也只會觸發一次而不會累積到觸發五次，這種累積的可以采用定時器實現。

節流一般多用于監聽輸入框和滾動條，同樣的在我們的loadsh中也有寫好的節流的函數throttle,使用方法和上面防抖類似，這里就不詳細寫了，主要寫一下自定義的節流函數。

throttle(fun, ms,options) fun:需要節流的回調函數
ms:等待時間
options：額外配置項 


    
        1
    

    
        2
    

    
        3
    

    
        4

自定義節流函數：
原理就是用時間戳判斷是否到了回調的執行時間，記錄上次執行的時間戳，然后每次觸發事件執行回調，回調里邊判斷當前時間戳距離上一次執行時間戳的間隔是否已經到達規定的時間，如果是就執行，并且會更新上次執行的時間戳。
下面是我寫的一個簡單的例子，可以根據自己需求進行修改

data:{ //這里我直接頁面創建時定義了一個初始的變量，保存上一次函數執行的時間 lastTime:new Date() }, methods:{ //fun 代表要執行的函數，需要被節流的函數 throttle(fun){ //函數執行時的時間 let now = new Date() console.log("now",now) console.log("lastTime",this.lastTime) //兩次調用的時間差 if (now - this.lastTime > 1000){ fun() //調用成功，上一次調用時間值修改 this.lastTime = now } }, test(){ this.throttle(function (){ //1000ms內無論點擊多少下，只會調用一次 console.log("節流函數調用，時間1000ms") }) }, } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27

如果項目多次用到可以將以上的方法封裝成一個工具類。

參考文章：https://www.jb51.net/article/161713.htm

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(4020)

292021-9

ES6——數組擴展 ... Array.from() Array.of() flat() reduce()

文章目錄

1.擴展運算符...
2.Array.from()
- 類數組
3.Array.of()
4.find() 和 findIndex()
5.fill() 填充數組
6.數組實例的 entries()，keys() 和 values()
7.includes()
8.flat()
9.reduce()

1.擴展運算符…

ES6——擴展運算符…

2.Array.from()

將兩類對象轉為真正的數組：類數組（querrySelectAll）和可遍歷（iterable）的對象（包括 ES6 新增的數據結構 Set 和 Map）

類數組

1.賦給length屬性的對象

 //將類數組轉化為真正的數組 let k={ 0:'a', 1:'b', length:2 //沒有length屬性就不行 } console.log(Array.from(k)); //['a', 'b'] 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7

2.字符串也有length屬性，它也是類數組

 let str='hello'; console.log(Array.from(str)); // ['h', 'e', 'l', 'l', 'o'] 


    
        1
    

    
        2

3.參數如果是真正的數組則返回一個全新數組

 let s1=[1,2,3]; let s2=Array.from(s1); console.log(s2==s1); //false 


    
        1
    

    
        2
    

    
        3

3.Array.of()

將一組值，轉換為數組

Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1 


    
        1
    

    
        2
    

    
        3

這個方法的主要目的，是彌補數組構造函數Array()的不足。因為參數個數的不同，會導致Array()的行為有差異。

只有當參數個數不少于 2 個時，Array()才會返回由參數組成的新數組

Array() // [] Array(3) // [, , ,] Array(3, 11, 8) // [3, 11, 8] 


    
        1
    

    
        2
    

    
        3

4.find() 和 findIndex()

find方法，用于找出第一個符合條件的數組成員

 var result1=[1,2,3,4].find(function (item) { return item%2==0; }) console.log(result1); //2 


    
        1
    

    
        2
    

    
        3
    

    
        4

findIndex方法，返回第一個符合條件的數組成員的位置。
如果所有成員都不符合條件，則返回-1

 var result1=[1,2,3,4].findIndex(function (item) { return item%2==0; }) console.log(result1); //1 


    
        1
    

    
        2
    

    
        3
    

    
        4

5.fill() 填充數組

使用給定值，填充一個數組

console.log(new Array(5).fill('a')); //['a', 'a', 'a', 'a', 'a'] 


    
        1

fill方法還可以接受第二個和第三個參數，用于指定填充的起始位置和結束位置。

['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c'] 


    
        1

6.數組實例的 entries()，keys() 和 values()

Set，Map，Object中都有這些方法

entries()，keys()和values()——用于遍歷數組。
它們都返回一個遍歷器對象，可以用for…of循環進行遍歷
唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

 let yes=[1,2,3,4]; console.log(yes.keys()); //Array Iterator {} console.log(yes.values()); //Array Iterator {} console.log(yes.entries()); //Array Iterator {} 


    
        1
    

    
        2
    

    
        3
    

    
        4

 let yes=[1,2,3,4]; for(let key of yes.keys()){ console.log(key); //0 1 2 3 } for(let key of yes.values()){ console.log(key); //1 2 3 4 } for(let [key,value] of yes.entries()){ console.log(key,value); //0 1 //1 2 //2 3 //3 4 } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14

7.includes()

console.log([1, 2, 3].includes(1)); //true console.log([1, 2, 3].includes(1,1)); //false 從1號索引開始找 


    
        1
    

    
        2

8.flat()

將嵌套的數組“拉平”，變成一維的數組。
該方法返回一個新數組，對原數據沒有影響

//默認只能拉平一層 console.log([1, 2, [3, 4]].flat()); //[1, 2, 3, 4] //如果拉平多層 設置層數 console.log([1, 2, [3, [4, 5]]].flat(2)); // [1, 2, 3, 4, 5] //如果層數太多 設置Infinity console.log([1, 2, [3, 4, [5, 6, [7, 8]]]].flat(Infinity)); //[1, 2, 3, 4, 5, 6, 7, 8] 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8

9.reduce()

reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。對空數組是不會執行回調函數的。

1.計算數組總和

var num = [1,2,3,4,5]; var res = num.reduce(function(total,num){ return total+num; //return total + Math.round(num);//對數組元素四舍五入并計算總和 },0); console.log(res); //15 //num.reduce((total,num) => total += num, 0); //沒有初始值initialValue（即上面例子中的0），當數組為0時會拋出異常提示reduce函數沒有初始值，所以為兼容性一般加上initialValue 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

2.合并二維數組

var red = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { return a.concat(b); }, []); console.log(red); //[0, 1, 2, 3, 4, 5] 


    
        1
    

    
        2
    

    
        3
    

    
        4

3.統計一個數組中有多少個不重復的單詞
reduce()函數

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1605)

292021-9

Vue的設計理念

目錄

Vue中的Mvvm實現原理

自己實現雙向數據綁定的示例

Vue與模板引Thymeleaf擎對比

顯示變量值（Vue）

顯示變量值（Thymeleaf）

替換Html（Vue）

替換Html（Thymeleaf）

綁定屬性（Vue）

綁定屬性（Thymeleaf）

隱藏顯示區塊（Vue）

隱藏顯示區塊（Thymeleaf）

遍歷列表數據-帶索引（Vue）

遍歷列表數據-帶索引（Thymeleaf）

引入其他文件內容（vue）

引入其他文件內容（Thymeleaf）

Vue的頁面定義基石-Options API

Vue中的代理運用

nginx反向代理

vue代理（正向代理）

Vue特性能力-filter

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合

Mvvm模型

MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發的架構模式，其核心是提供對View 和 ViewModel 的雙向數據綁定，這使得ViewModel 的狀態改變可以自動傳遞給 View，即所謂的數據雙向綁定。
Vue.js 是一個提供了 MVVM 風格的雙向數據綁定的 Javascript 庫，專注于View 層。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel負責連接 View 和 Model，保證視圖和數據的一致性，這種輕量級的架構讓前端開發更加高效、便捷。

Vue中的Mvvm實現原理

Vue.js的實現方式，對數據（Model）進行劫持，當數據變動時，數據會出發劫持時綁定的方法，對視圖進行更新。

這里有兩個方向：

1、數據流向視圖：數據變動時，能自動更新Dom節點的內容。此功能是通過數據劫持實現的，對數據（Model）進行劫持，當數據變動時，會調用劫持時綁定的方法，對視圖進行更新。

2、視圖流向數據：如輸入框input內容發生變動時，input對應的數據也會發生變動。此功能是通過監聽Dom事件實現的。當用戶在輸入框中輸入文字（即input的keyup事件發生時），vue會監聽到這個事件，找到對應的數據模型變量，修改變量值。

vue中雙向數據綁定的示例




    

        

            

            

        

        

            
                <div id="app-6">
            

        

    

    

        

            

            

        

        

            
                <p>{{ message }}</p>
            

        

    

    

        

            

            

        

        

            
                <input v-model="message">
            

        

    

    

        

            

            

        

        

            
                </div>




    

        

            

            

        

        

            
                var app6 = new Vue({
            

        

    

    

        

            

            

        

        

            
                el: '#app-6',
            

        

    

    

        

            

            

        

        

            
                data: {
            

        

    

    

        

            

            

        

        

            
                message: 'Hello Vue!'
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                })

自己實現雙向數據綁定的示例




    

        

            

            

        

        

            
                <!DOCTYPE html>
            

        

    

    

        

            

            

        

        

            
                <html lang="en">
            

        

    

    

        

            

            

        

        

            
                <head>
            

        

    

    

        

            

            

        

        

            
                <title>雙向綁定demoo</title>
            

        

    

    

        

            

            

        

        

            
                <meta charset="UTF-8">
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <div id="app">
            

        

    

    

        

            

            

        

        

            
                <input type="text" id="txt">
            

        

    

    

        

            

            

        

        

            
                <p id="show-txt"></p>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </body>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                var model={}
            

        

    

    

        

            

            

        

        

            
                Object.defineProperty(model,'txt',{
            

        

    

    

        

            

            

        

        

            
                _txt: "",
            

        

    

    

        

            

            

        

        

            
                get:function(){
            

        

    

    

        

            

            

        

        

            
                return _txt
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                set:function(newValue){
            

        

    

    

        

            

            

        

        

            
                _txt = newValue
            

        

    

    

        

            

            

        

        

            
                document.getElementById('txt').value = newValue
            

        

    

    

        

            

            

        

        

            
                document.getElementById('show-txt').innerHTML = newValue
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                document.addEventListener('keyup',function(e){
            

        

    

    

        

            

            

        

        

            
                model.txt = e.target.value
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            
                </html>

這里要講到一個關鍵函數

Object.defineProperty

Object.defineProperty 需要三個參數（object , propName , descriptor）

1 object 對象 => 給誰加
2 propName 屬性名 => 要加的屬性的名字【類型：String】
3 descriptor 屬性描述 => 加的這個屬性有什么樣的特性【類型：Object】

descriptor 屬性描述

get：一個給屬性提供getter的方法，如果沒有getter則為undefined。該方法返回值被用作屬性值。默認為undefined。
set：一個給屬性提供setter的方法，如果沒有setter則為undefined。該方法將接受唯一參數，并將該參數的新值分配給該屬性。默認值為undefined。

Vue與模板引Thymeleaf擎對比

顯示變量值（Vue）




    

        

            

            

        

        

            
                <div id="app">
            

        

    

    

        

            

            

        

        

            
                {{ message }}
            

        

    

    

        

            

            

        

        

            
                </div>

顯示變量值（Thymeleaf）




    

        

            

            

        

        

            
                <div id="app" th:text="${message}">
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </div>

替換Html（Vue）




    

        

            

            

        

        

            
                <div id="app" v-html="content">
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </div>

替換Html（Thymeleaf）




    

        

            

            

        

        

            
                <div id="app" th:html="${content}">
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </div>

綁定屬性（Vue）

<img :src="imgUrl" :id="newId"/>

綁定屬性（Thymeleaf）

<img th:attr="id=${newId},src=${imgUrl}"/>

隱藏顯示區塊（Vue）




    

        

            

            

        

        

            
                <div id="app" v-if="show">
            

        

    

    

        

            

            

        

        

            
                這是一個區塊
            

        

    

    

        

            

            

        

        

            
                </div>

隱藏顯示區塊（Thymeleaf）




    

        

            

            

        

        

            
                <div id="app" th:if="${show}">
            

        

    

    

        

            

            

        

        

            
                這是一個區塊
            

        

    

    

        

            

            

        

        

            
                </div>

遍歷列表數據-帶索引（Vue）




    

        

            

            

        

        

            
                <ul id="app">
            

        

    

    

        

            

            

        

        

            
                <li v-for="(item, index) in dataList">
            

        

    

    

        

            

            

        

        

            
                {{ index }} - {{ item.message }}
            

        

    

    

        

            

            

        

        

            
                </li>
            

        

    

    

        

            

            

        

        

            
                </ul>

遍歷列表數據-帶索引（Thymeleaf）




    

        

            

            

        

        

            
                <ul id="app">
            

        

    

    

        

            

            

        

        

            
                <li th:each="item, stat: ${dataList}">
            

        

    

    

        

            

            

        

        

            
                {{ stat.index }} - {{ item.message }}
            

        

    

    

        

            

            

        

        

            
                </li>
            

        

    

    

        

            

            

        

        

            
                </ul>

引入其他文件內容（vue）

在vue中，可復用的單元塊被稱為組件，定義組件




    

        

            

            

        

        

            
                <template>
            

        

    

    

        

            

            

        

        

            
                <button v-on:click="count++">You clicked me {{ count }} times.</button>
            

        

    

    

        

            

            

        

        

            
                </template>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                name: "button-counter"
            

        

    

    

        

            

            

        

        

            
                data(){
            

        

    

    

        

            

            

        

        

            
                count: 0
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </script>

引入組件




    

        

            

            

        

        

            
                <div id="components-demo">
            

        

    

    

        

            

            

        

        

            
                <button-counter></button-counter>
            

        

    

    

        

            

            

        

        

            
                </div>

引入其他文件內容（Thymeleaf）

被導入模塊index.html：




    

        

            

            

        

        

            
                <div th:fragment="head">
            

        

    

    

        

            

            

        

        

            
                這是網頁頭
            

        

    

    

        

            

            

        

        

            
                </div>

在其它頁面導入index.html中的head模塊：

<div th:include="index::head"></div>

由此可見在Html層面上來講，vue和后臺的模板引擎，整個設計方向是一樣。都是使用特定屬性標簽，來描述如何把數據映射到視圖上。

Vue的頁面定義基石-Options API

Options API，即大家常說的選項API，即以vue為后綴的文件，通過定義methods，computed，watch，data等屬性與方法，共同處理頁面邏輯

可以看到Options代碼編寫方式，如果是組件狀態，則寫在data屬性上，如果是方法，則寫在methods屬性上...

這種形式的頁面定義類似一個配置文件，定義了頁面的數據模型和行為

Vue中的代理運用

代理服務器：所謂代理服務器就是位于發起請求的客戶端與原始服務器端之間的一臺跳板服務器，是以正向代理可以隱藏客戶端，反向代理可以隱藏原始服務器。

代理分為正向代理和反向代理，下面就以我們實際使用中的示例講解下這兩種代理方式的區別。

nginx反向代理

這樣對于瀏覽器而言，瀏覽器只需要訪問代理服務器，就可以達到同時訪問兩個網站的目的

我們看下實際場景下的nginx的配置




    

        

            

            

        

        

            
                server {
            

        

    

    

        

            

            

        

        

            
                listen  4503;
            

        

    

    

        

            

            

        

        

            
                server_name  vue.izkml.com;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                access_log "pipe:rollback logs/gov-manage-new-vue/access_log interval=1d baknum=7 maxsize=2G" main;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                # 接口代理
            

        

    

    

        

            

            

        

        

            
                location /api {
            

        

    

    

        

            

            

        

        

            
                #去除 /api前綴
            

        

    

    

        

            

            

        

        

            
                rewrite  ^.+api/?(.*)$ /$1 break;
            

        

    

    

        

            

            

        

        

            
                # 轉發到 117.71.53.199:50020端口上
            

        

    

    

        

            

            

        

        

            
                proxy_pass  http://117.71.53.199:50020;
            

        

    

    

        

            

            

        

        

            
                proxy_buffering off;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                # 頁面文件代理
            

        

    

    

        

            

            

        

        

            
                location / {
            

        

    

    

        

            

            

        

        

            
                # 直接去本地文件讀取文件路徑
            

        

    

    

        

            

            

        

        

            
                root     html/gov-task-supervison;
            

        

    

    

        

            

            

        

        

            
                index    index.html index.htm;
            

        

    

    

        

            

            

        

        

            
                if (!-e $request_filename) {
            

        

    

    

        

            

            

        

        

            
                rewrite ^/(.*) /index.html last;
            

        

    

    

        

            

            

        

        

            
                break;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }

其中可以看到，主要分為接口代理和頁面代理兩部分
1. 如果是/api前綴的請求，則去除/api前綴，轉發到后臺網關端口上
2. 其他情況下，請求的為頁面內容，在html/gov-task-supervison文件夾中讀取文件內容

vue代理（正向代理）




    

        

            

            

        

        

            
                devServer: { // 支持webPack-dev-server的所有選項
            

        

    

    

        

            

            

        

        

            
                port: 8888, // 端口號
            

        

    

    

        

            

            

        

        

            
                host: '0.0.0.0',
            

        

    

    

        

            

            

        

        

            
                https: false,
            

        

    

    

        

            

            

        

        

            
                open: true, //配置自動啟動瀏覽器
            

        

    

    

        

            

            

        

        

            
                proxy: {
            

        

    

    

        

            

            

        

        

            
                '/api': {
            

        

    

    

        

            

            

        

        

            
                // 轉發地址
            

        

    

    

        

            

            

        

        

            
                target: 'http://117.71.53.199:50020', //測試環境
            

        

    

    

        

            

            

        

        

            
                changeOrigin: true,
            

        

    

    

        

            

            

        

        

            
                ws: true,
            

        

    

    

        

            

            

        

        

            
                // 去除/api前綴
            

        

    

    

        

            

            

        

        

            
                pathRewrite: {
            

        

    

    

        

            

            

        

        

            
                '^/api': ''
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }

這里主要看的是proxy字段，其中定義了規則

1. 如果是/api前綴的請求，則去除/api前綴，轉發到后臺網關端口上
2. 其他情況下，請求的為頁面內容，直接讀取本地項目路徑下面的頁面內容 **（隱式包含）**

Vue特性能力-filter

Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化

應用場景：前端常量翻譯




    

        

            

            

        

        

            
                <el-tag v-if="scope.row.status" class="round" size="small" >
            

        

    

    

        

            

            

        

        

            
                {{scope.row.status | CodeMaster('TASK_STATUS')}}
            

        

    

    

        

            

            

        

        

            
                </el-tag>




    

        

            

            

        

        

            
                Vue.filter('CodeMaster', function (value, type) {
            

        

    

    

        

            

            

        

        

            
                return Vue.prototype.$codeMaster.getCodeValue(type, value);
            

        

    

    

        

            

            

        

        

            
                })

在上面的代碼中，我們在模板html中，添加了filter的調用，并傳入了一個參數。
在vue進行html生成的過程中，會調用相應的filter，根據自定義的規則，完成文本格式化操作。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1901)

292021-9

JavaScript防抖與節流，深入淺出，一本正經講透徹

目錄

一、函數防抖（debounce）

1. 什么是防抖？

二.、函數節流

2.1 定時器實現

2.2 時間戳實現

2.3 時間戳+定時器

一、函數防抖（debounce）

1. 什么是防抖？

函數防抖：在頻繁觸發某一個事件時，一段時間內不再觸發該事件后才會去調用對應的回調函數，在設定間隔時間內如果下一次事件被觸發，那么就重新開始定時器，直到事件觸發結束。

規定時間內沒有繼續觸發事件的前提下，再去調用事件處理函數；

具體如下面的例子所示：




    

        

            

            

        

        

            
                /*定義防抖函數
            

        

    

    

        

            

            

        

        

            
                 * func：傳入一個函數，事件不再持續觸發時會調用該函數
            

        

    

    

        

            

            

        

        

            
                 * delay:定義持續多久后執行傳入的回調函數
            

        

    

    

        

            

            

        

        

            
                 * */
            

        

    

    

        

            

            

        

        

            
                function debounce(func,delay) {
            

        

    

    

        

            

            

        

        

            
                let timer = null // 用于保存定時器
            

        

    

    

        

            

            

        

        

            
                return function (...args) {
            

        

    

    

        

            

            

        

        

            
                // 如果定時器存在，清除定時器，隨后重新設置timer
            

        

    

    

        

            

            

        

        

            
                if(timer !== null) clearTimeout(timer)
            

        

    

    

        

            

            

        

        

            
                timer = setTimeout(func, delay) // 超過delay為接收到事件會調用這里的func   必要的額時候可以修改func的this指向  由于timer對外部存在引用，因此不會被銷毀
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /*事件處理函數*/
            

        

    

    

        

            

            

        

        

            
                function testDeBounce(){
            

        

    

    

        

            

            

        

        

            
                console.log('你看我執行了幾次？？')
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // 接收debounce返回的函數
            

        

    

    

        

            

            

        

        

            
                const temp = debounce(testDeBounce(),1000)
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /*綁定事件，測試防抖函數*/
            

        

    

    

        

            

            

        

        

            
                window.addEventListener('scroll',()=>{
            

        

    

    

        

            

            

        

        

            
                temp()
            

        

    

    

        

            

            

        

        

            
                }); // 這樣寫最少調用一次事件處理函數，最多也不會多余下面的寫法執行的次數
            

        

    

    

        

            

            

        

        

            
                window.addEventListener('scroll', testDeBounce); // 如果這樣寫的話，每當頁面滾動就會調用事件處理函數

總結一下思路：

1.定義一個節流函數

2.函數內部使用一個變量保存定時器

3.返回一個函數，函數內部定義：如果定時器已經存在就清除定時器，重新設置定時器

4.定義一個變量來接收debounce返回的函數

5.在事件的回調函數中直接調用上一步的變量接收的方法

二.、函數節流

函數節流：在事件持續觸發的前提下，保證一定時間段內只調用一次事件處理函數，就是函數節流；

函數節流實現的方式：定時器、時間戳、定時器+時間戳；

2.1 定時器實現

思路：

1.定義節流函數throttle

2.定義timer保存定時器

3.返回一個函數。函數內部定義：如果定時器不存在，設置定時器，間隔某一時間后將timer設置為null，如果在這之前事件再次觸發，則定時器中的回調無效

<button>這是一個孤獨的按鈕</button>




    

        

            

            

        

        

            
                /*
            

        

    

    

        

            

            

        

        

            
                 * 定義定時器節流函數
            

        

    

    

        

            

            

        

        

            
                 * func:傳入事件處理函數
            

        

    

    

        

            

            

        

        

            
                 * delay：在delay指定的時間內定時器回調無效
            

        

    

    

        

            

            

        

        

            
                 * */
            

        

    

    

        

            

            

        

        

            
                function throttle(func,delay) {
            

        

    

    

        

            

            

        

        

            
                let timer = null
            

        

    

    

        

            

            

        

        

            
                const context = this
            

        

    

    

        

            

            

        

        

            
                return function(...args){
            

        

    

    

        

            

            

        

        

            
                // 如果定時器不存在
            

        

    

    

        

            

            

        

        

            
                if(!timer){
            

        

    

    

        

            

            

        

        

            
                timer = setTimeout(()=>{
            

        

    

    

        

            

            

        

        

            
                func.apply(context,args) // 考慮返回的函數調用的環境，因此這里不直接使用this
            

        

    

    

        

            

            

        

        

            
                timer = null // delay之后清除定時器
            

        

    

    

        

            

            

        

        

            
                },delay)
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                function test() {
            

        

    

    

        

            

            

        

        

            
                console.log('啊啊啊！')
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                const temp = throttle(test,1000)
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                document.querySelector('button').addEventListener('click',()=>{
            

        

    

    

        

            

            

        

        

            
                temp()
            

        

    

    

        

            

            

        

        

            
                })

2.2 時間戳實現




    

        

            

            

        

        

            
                var throttle = function(func, delay) {
            

        

    

    

        

            

            

        

        

            
                var prev = Date.now();
            

        

    

    

        

            

            

        

        

            
                return function() {
            

        

    

    

        

            

            

        

        

            
                var context = this;
            

        

    

    

        

            

            

        

        

            
                var args = arguments;
            

        

    

    

        

            

            

        

        

            
                var now = Date.now();
            

        

    

    

        

            

            

        

        

            
                if (now - prev >= delay) {
            

        

    

    

        

            

            

        

        

            
                func.apply(context, args);
            

        

    

    

        

            

            

        

        

            
                prev = Date.now();
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                function handle() {
            

        

    

    

        

            

            

        

        

            
                console.log(Math.random());
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                window.addEventListener('scroll', throttle(handle, 1000));

2.3 時間戳+定時器




    

        

            

            

        

        

            
                // 節流throttle代碼（時間戳+定時器）：
            

        

    

    

        

            

            

        

        

            
                var throttle = function(func, delay) {
            

        

    

    

        

            

            

        

        

            
                var timer = null;
            

        

    

    

        

            

            

        

        

            
                var startTime = Date.now();
            

        

    

    

        

            

            

        

        

            
                return function() {
            

        

    

    

        

            

            

        

        

            
                var curTime = Date.now();
            

        

    

    

        

            

            

        

        

            
                var remaining = delay - (curTime - startTime);
            

        

    

    

        

            

            

        

        

            
                var context = this;
            

        

    

    

        

            

            

        

        

            
                var args = arguments;
            

        

    

    

        

            

            

        

        

            
                clearTimeout(timer);
            

        

    

    

        

            

            

        

        

            
                if (remaining <= 0) {
            

        

    

    

        

            

            

        

        

            
                func.apply(context, args);
            

        

    

    

        

            

            

        

        

            
                startTime = Date.now();
            

        

    

    

        

            

            

        

        

            
                } else {
            

        

    

    

        

            

            

        

        

            
                timer = setTimeout(func, remaining);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                function handle() {
            

        

    

    

        

            

            

        

        

            
                console.log(Math.random());
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                window.addEventListener('scroll', throttle(handle, 1000));

最后

想跟博主交朋友的可以查找，公_號?：前端老實人，跟博主一起探討學習哦?

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1615)

282021-9

重新設計東南亞頭部在線超市的真實案例

I. 發現

客戶訪談

由于這位甲方的合作態度良好，所以設計師有機會與 SESA 的創始人和產品經理進行了 2-3 次會議。

借此了解了業務目標、用戶需求和技術限制等關鍵問題：

主要問題：

低轉化率：雜亂的界面使用戶很難瀏覽商品。
手機端體驗不友好：幾乎 90% 的用戶是通過手機訪問網站，但手機版的設計不夠理想。
手機端糟糕的界面和體驗：目前他們使用的是現有的網站模板，根據目標用戶的反饋，缺乏優化而且加載速度很慢。

客戶需求

一鍵式購物
輕松的界面和體驗
無縫的商品搜索
折扣和優惠更容易被看到
使用網站時能感覺熟悉而簡便

成功指標

增加客單價
增強人們的對品牌的認知感
增加用戶和訂單數量
無縫的體驗
讓健康的生活方式更加受歡迎、評價、容易取得，更加有趣而美好
提供并教育用戶健康的生活方式，并轉化為愉快美好的生活

目標人群

根據產品團隊提供的數據，整理出了目標人群的特征：

II. 構思

人物角色

根據以上信息，整理出了兩個完全不同的人物角色：

故事版

沒有區分人物角色的故事版：

目標用戶的故事版：

體驗地圖

思考分析用戶旅程的五個階段（探索網站、比較商品、確認下單、完成購買和接收配送）和用戶感知的三個方面（行為、思考和感知），制作了體驗地圖：

將當中的關鍵信息挑選出來：

競品分析

設計師找到了三家主要競品，先大概了解他們的特色和優勢：

然后從 Google Play 的評論中尋找競品的問題，這樣就可以思考如何戰勝他們：

P.S. 評論分析是一種簡單有效的競品分析利器（也可以用來分析自己的產品），具體方法我之前有分享過：別總想著數據分析/用戶調研，先把評論分析做了吧！

III. 設計

信息導航

先把大致的用戶流程確定下來，這樣對整個產品就有了一個整體構思：

線框圖

然后用手畫出線框圖，定下頁面的整體布局：

低保真

將線框圖手稿用繪圖軟件細化，制作成低保真方案，用來向客戶展示和做用戶測試：

IV. 完成

可用性測試

找用戶做測試時，用的是低保真可交互原型。

根據測試發現的問題，設計師直接將優化方案運用到了高保真方案上，所以下面整理的問題都用高保真方案來配圖展示：

1. 自動定位：測試之前用戶必須手動搜索位置。
2. 屬性選擇：由于客戶想要一鍵式購物，所以當用戶點擊熟悉（通常是重量）右側的箭頭時，可以反轉卡片進行詳細選擇。

3. 促銷展示：原本設計了三個促銷區，但是測試中發現用戶面對大量的信息無法充分理解，所以移除了一部分，只保留了頭圖和分類優惠。

4. 商品導航：為了避免用戶迷路，將商品分類導航放在了所有頁面頂部，并且懸停時展示子分類和相關文章。

高保真

響應式

這個網站需要具備很高的響應式能力，不論在 PC 端還是手機端，都能輕松使用。

但由于 PC 端和手機端的尺寸相差太大了，所以不得不使用斷點（Breakpoint）來判斷用戶當前處在哪個端，并展示相應的界面。

這個斷點的概念在柵格系統很常用到，指的是當界面尺寸縮小或增大到某個（或幾個）零界點時，間距大小或其它界面元素發生突變。

上圖來源：三種最主流的響應式柵格

這個方案的對于移動端的特殊處理包括：

確保商品分類的位置，方便用戶記憶
使用漢堡菜單
提供模仿原生 APP 的吸底導航

Before&After

最后對比一下優化前后的方案：

原文地址：體驗進階（公眾號）

作者：設計師ZoeYZ

轉載請注明：學UI網》重新設計東南亞頭部在線超市的真實案例

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1552)

282021-9

UI&UE實用方法論 | 一直被錯用的米勒法則（7±2）

因為「米勒法則」研究的是人類大腦的短期記憶量，而導航菜單、金剛區這些場景，是側重用戶識別，而不是側重用戶記憶。試想你作為用戶的時候，你會去記導航菜單的名稱嗎，哪怕是短暫地記下來（就像我們記短信中的驗證碼，然后到另一個應用中輸入的場景一樣，短暫地記?。课蚁氪蟛糠值娜嗽谶@些場景中，應該都是所見所得、過眼云煙的吧。

并且“導航菜單的設計旨在用戶識別而不是用戶記憶”這個觀點，在UX研究咨詢公司 Nielsen Norman Group（NN/g 尼爾森諾曼集團）的“web可用性”一文中也有指出。

所以以上導航菜單、金剛區的案例，產品可能確實也是有在控制菜單項目的數量，但更多應該是出于對「?？硕伞沟目剂浚皇恰该桌辗▌t」（我之前也有在《交互四策略實現?？硕伞?/a>一文中說過：用戶的決策能力會跟隨選項數量的增長而降低，給用戶非常多的選擇，約等于沒給用戶選擇）。

這些案例完全是強行反推，給套了個「米勒法則」的結論…實屬不妥…那我就來談談，我對「米勒法則」的理解以及它在產品設計中的用途。

01、「米勒定律」在研究什么

米勒在1956年《心理學評論》刊中的《神奇的數字7±2：我們處理信息能力的一些限制（The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information）》一文中，首次提出「米勒定律」。但該文只算是一篇闡述學術觀點的文章，不算嚴格意義上的論文。

米勒在文中引用了實驗者記憶變化音調的實驗，發現人們在短時間內可以很好地記憶并復述5~6位的信息，隨著收到的信息位數增多，記憶出錯的概率也在不斷增加。但因為實驗者存在個體差異，最終的信息記憶量基本都能在該基礎上再浮動2~3位。所以得出了“人的大腦在短期記憶中最多可以記住大約7±2個信息團”的結論。

但因為該實驗與文章不屬于正式的科研研究和論文，所以后來的科研學者又對“人類短期記憶上限”進行了更多的實驗研究，最后形成了很多種學說。有堅持7±2的守舊派；有認為最佳短期記憶信息團為4±1的創新派；也有認為“人類的最佳短期記憶不應該被束縛于一個固定數值區間”的不站隊派（確實 NN/g 尼爾森諾曼集團也說過，用戶的短期記憶能力存在較大的個體差異，前25%的人群比尾部25%的人群會好大約2.4倍）。

但不論怎么說，這些實驗都明確表明了：人的短期記憶存在上限，只是對具體能記住的信息團數量存在分歧。

基于這個結論，我們在設計產品時，該如何加以運用呢？

02、在人機交互中的運用

NN/g 尼爾森諾曼集團基于「米勒法則」，提出了以下幾則設計指南參考：

· 響應時間必須足夠快，以便用戶在等待下一頁加載時不會忘記他們正在做什么；（體驗側）
· 更改訪問鏈接的顏色，以便用戶不會忘記他們已經單擊過哪里；（UI+交互側）
· 不要讓用戶去記優惠券代碼，而是該將優惠信息置入短信或郵件中的鏈接，通過鏈接自動將優惠券轉移到用戶的購物車中。這樣可以讓計算機承擔記住晦澀代碼的負擔；（交互側）
· 在用戶可能需要幫助的場景顯示“用戶幫助”功能，這樣他們就不必前往單獨的幫助功能區去記步驟，然后再回來解決手頭的問題。（交互側）

你會發現，實際上專業團隊對「米勒法則」的理解，基本都在于如何解決“人的短期記憶上限”問題，并沒有去糾結，到底是7±2，還是4±1…

并且我在 NN/g 團隊每一條設計指南的后面都標注了該條指南作用的側重向，發現大多都體現在交互側。因為「米勒法則」研究的是人的短期記憶極限，在視覺表現層其實很少會運用到。視覺更多強調的是“從識別到操作”，這并不是「米勒法則」的研究內容。

舉一些切實的例子吧，基于「米勒法則」而誕生的產品交互中，我們最常接觸到的就是移動設備自動獲取短信驗證碼，方便用戶一鍵填充；通過圖像識別用戶的銀行卡號，減輕用戶記憶負擔。

這一類有關用戶短時記憶的場景，為減輕用戶記憶負擔而誕生的交互形式，才是真正的基于「米勒法則」。

現在你明白了嗎？因為「米勒法則」中提到了短時記憶極限量為7±2個信息團，讓許多人都去關注數字了，而忽略了「米勒法則」到底在研究什么。然而這個數值，迄今為止，在科研領域依然還存在著分歧。

03、關于「米勒定律」的拓展與延伸

3.1 拆解與再組合

米勒在他發表的文章中也提到了：雖然短時記憶存在上限，但是人們的大腦也總是在努力尋找其他方式拓寬這個極限，例如拆解與再組合。

在前面米勒讓實驗者記憶變化音調的實驗中，就有人通過自主拆解、再組合信息形成信息團的形式，來增加自己最終記住的單位信息數。

基于此，前面圖像識別用戶的銀行卡號的示例，如果因為技術受限而無法實現，我們也可以通過拆解卡號為“4位一個信息團”的方式，來方便用戶記憶、輸入與校驗。這樣在體驗方面也是一種彌補。

3.2 讓用戶放棄記憶

要將用戶的記憶負擔減輕到極限，那就干脆讓用戶放棄記憶。

例如蘋果基于自己的云管理與密鑰技術，在識別到用戶在創建密碼時，會自動填充強密碼，強密碼復雜混亂到很難被人腦記憶。

一方面加強了密碼的安全性；另一方面，搭載其他技術手段來減輕用戶的記憶負擔，不再糾結于用戶究竟能記住多少個、多少位的密碼，直接將用戶需要記憶的內容減輕至0，這也許才是真正基于「米勒定律」而創造出來的產品設計吧。

04、寫在最后

其實這篇文章我認為更多是寫給交互和體驗設計師看的，如果你著手的功能有涉及到用戶記憶的場景，不防可以參考一下這些減輕用戶記憶負擔的案例，還有NN/g的設計指南。

但好像現在「米勒定律」被很多 UI設計師用成套路了…然而你發現了嗎，文中「米勒定律」的案例，與視覺、與“7±2”很少存在關聯。

如果文章開頭導航菜單、金剛區的例子，你硬要說是參考了神奇數字7±2，我認為勉強也算行吧（嗯…勉強算）。

因為雖然我認為其設計理論更多是建立于「?？硕伞怪系?，但「?？硕伞垢嬖V我們要減少展示給用戶的選項數量，卻并沒有給出一個建議值。如果你希望在某些場合給你的設計一些立足點（大家懂的），你如果說結合了「?？硕伞古c神奇數字7±2，我認為比直接說基于「米勒定律」要更內行一些。

原文地址：UCD耍家（公眾號）

作者：Howiet

轉載請注明：學UI網》UI&UE實用方法論 | 一直被錯用的米勒法則（7±2）

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1896)

272021-9

v-for的鍵值key

我們現在在使用v-for的時候、都必須會加上一個必要的key值,并且很多人會使用index來作為key，其實這樣是不太妥當的一種做法。那么v-for中的鍵值key到底有什么作用呢。請看：

官方給出的解答

當 Vue 正在更新使用 v-for 渲染的元素列表時，它默認使用“就地更新”的策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是就地更新每個元素，并且確保它們在每個索引位置正確渲染。這個類似 Vue 1.x 的 track-by="$index"。

這個默認的模式是高效的，但是只適用于不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。

為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key attribute：




    

        

            

            

        

        

            
                <div v-for="item in items" v-bind:key="item.id">
            

        

    

    

        

            

            

        

        

            
                <!-- 內容 -->
            

        

    

    

        

            

            

        

        

            
                </div>

建議盡可能在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。

舉例




    

        

            

            

        

        

            
                <div v-for="(item,index) in list" :key="index"> {{item.name}}</div>
            

        

    

    

        

            

            

        

        

            
                list: [
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                id: 1,
            

        

    

    

        

            

            

        

        

            
                name: "name1",
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                id: 2,
            

        

    

    

        

            

            

        

        

            
                name: "name2",
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                id: 3,
            

        

    

    

        

            

            

        

        

            
                name: "name3",
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                ]

這個場景如何我們不佳key vue 回直接報錯，所以大部分人都會使用index作為key的值

如果我們在添加一個數據




    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                list: [
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                id: 1,
            

        

    

    

        

            

            

        

        

            
                name: "name1",
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                id: 2,
            

        

    

    

        

            

            

        

        

            
                name: "name2",
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                id: 3,
            

        

    

    

        

            

            

        

        

            
                name: "name3",
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                id: 4,
            

        

    

    

        

            

            

        

        

            
                name: "last",
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                ]

此時前面3條數據直接服用之前的，新渲染最后一條數據，此時index作為key沒有任何問題

如何我們在中間添加一條




    

        

            

            

        

        

            
                list: [
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                id: 1,
            

        

    

    

        

            

            

        

        

            
                name: "name1",
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                id: 2,
            

        

    

    

        

            

            

        

        

            
                name: "name2",
            

        

    

    

        

            

            

        

        

            
                }, {
            

        

    

    

        

            

            

        

        

            
                id: 4,
            

        

    

    

        

            

            

        

        

            
                name: "last",
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                id: 3,
            

        

    

    

        

            

            

        

        

            
                name: "name3",
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                ]

此時我們更新渲染的數據通過index 定義key 進行數據對比一下

之前的數據：

中間插入之后的數據：

由此可以發現除了第一條數據可以復用以為其余的3條數據都是需要重新渲染，因為key的值發生了變化。

這個時候就可以體現出一個效率的問題，只插入一條數據，卻要從新渲染3條數據

所以我們需要可以想辦法讓數組中不會變化的數據的key值也不變，所以不能通過index來設置key值，應該設置一個唯一的id來標識數據的唯一性；我們修改之后再來對比一下渲染的效率：

之前的數據：

<div v-for="(item,index) in list" :key="item.id"> {{item.name}}</div>

中間插入之后的數據：

對此對比發現，只有一條數據發生改變，因為其他數據的id 都沒有變、所以對應的key也沒有發生改變。我們只需要渲染這一條新的數據就可以。所以一般推薦使用id作為key值配合v-for使用

總結：

Vue很大的一個特點就是雙向數據綁定，數據一旦改變，那么頁面就渲染新的數據呈現在頁面上。但是對于用v-for渲染的列表數據來說，數據量可能一般很龐大，而且我們經常還要對這個數據進行一些增刪改操作，而key的出現就是盡可能的回避這個問題，提高效率，如果我們給列表增加了一條數據，頁面只渲染了這數據。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1655)

272021-9

JS數組去重的幾種方法

數組去重

1 雙層for循環（類似冒泡排序的雙層循環寫法）

var arr = [2,3,4,2,34,21,1,12,3,4,1] for(var i =0;i<arr.length;i++){ //第一層：每次循環拿到arr中一個元素 for(var j=i+1;j<arr.length;j++){ //第二層：每次拿到的元素再和每次拿到的元素后邊的元素依次進行比對（因為第一個要從第二個開始比，第二個要從第三個比以此類推，所以這里的j應比i大1為j=i+1） if(arr[i] === arr[j]){ //如果相同就刪除后邊的元素 arr.splice(j,1) } } } //arr:[1, 2, 3, 4, 12, 21, 34] 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

2 循環和indexof、循環和includes

創建新數組，循環舊數組，看每次循環的元素是否存在于新數組中沒有就把當前元素添加到新數組中

//indexof var arr = [2,3,4,2,34,21,1,12,3,4,1] var arr2 = [] arr.forEach((e)=>{ if(arr2.indexOf(e)==-1){ arr2.push(e) } }) console.log(arr2) //arr2:[1, 2, 3, 4, 12, 21, 34] 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

//includes var arr = [2,3,4,2,34,21,1,12,3,4,1] var arr2 = [] arr.forEach((e)=>{ if(!arr2.includes(e)){ arr2.push(e) } }) console.log(arr2) //arr2:[1, 2, 3, 4, 12, 21, 34] 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

3 利用對象屬性不能重復去重

var arr = [2,3,4,2,34,21,1,12,3,4,1] var obj = {}; arr.forEach((e,i)=>{ obj[arr[i]] = "abc"; }); var arr2=Object.keys(obj) console.log(arr2) //arr2:["1", "2", "3", "4", "12", "21", "34"] var arr3 = arr2.map(e => ~~e ) //arr3:[1, 2, 3, 4, 12, 21, 34] //注意這種方法不僅給數組重新排列而且還改變了數組中元素的類型 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

~是js里的按位取反操作符，~~就是執行兩次按位取反，其實就是保持原值，但是注意雖然是原值，但是對布爾型變量執行這個操作，會轉化成相應的數值型變量，也就是 ~~true === 1，~~false === 0。

4 ES6 Set

ES6 提供了新的數據結構 Set。它類似于數組，但是成員的值都是唯一的，沒有重復的值。

var arr = [2,3,4,2,34,21,1,12,3,4,1] var arr1 = [...new Set(arr)] console.log(arr1) //arr1:[1, 2, 3, 4, 12, 21, 34] 


    
        1
    

    
        2
    

    
        3
    

    
        4

5 ES6 Array. prototype.filter()

注：indexOf在數組中找元素的時候，碰到符合條件的第一個就會把它的下標返回

var arr = [2,3,4,2,34,21,1,12,3,4,1] var arr2 = arr.filter((e,i)=>{ //看每次循環的元素在數組中出現的第一個下標位置（indexOf返回的位置），和每次循環的元素的下標（filter循環每次的i）是否一致，一致就說明他就是第一個符合條件，不會被過濾掉。 return arr.indexOf(e)==i; }) console.log(arr2) //arr2:[1, 2, 3, 4, 12, 21, 34] 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7

6 ES6 Array. prototype.reduce()

var arr = [2,3,4,2,34,21,1,12,3,4,1] var arr2 = arr.reduce((pre,e)=>{ //這里當然也可以用indexOf來判斷是否存在 pre.includes(e)?pre:pre.push(e); return pre },[]) console.log(arr2) //arr2:[1, 2, 3, 4, 12, 21, 34]

    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。



    



    分享此文一切功德，皆悉回向給文章原作者及眾讀者.



    轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 



    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

評論(0) 瀏覽(1667)

272021-9

單色配色你真的會用嗎？（實操篇）

01 單色配色實操

選擇基色“H:255 S:100 B:100”的深藍色為背景。

然后繪制兩個正圓，調整底對齊：

大圓顏色調整為和背景相同的顏色，透明度降低至0；調整小圓的顏色，色相（H）和亮度（B）保持不變，降低飽和度（S）為80%。

為了讓顏色混合更融洽，給主體執行“效果—模糊—高斯模糊”；再執行“效果—紋理—顆粒”添加質感。

最后添加文案排版，方案一就設計好了。

可以看到本案例精簡了色彩層級，色調干凈統一且穩定。利用兩款同色相顏色的漸變層次變化，產生了低對比度的和諧美感。

使用同樣的方法還可以設計出其他方案：

02 單色配色實操

第二個方案把英文作為主體。從“視圖”菜單中打開“符號”面板，選擇英文點擊“新建”按鈕，把英文設置為新符號。

接著畫出圓形外框，執行“效果—3D—凸出與斜角”命令，設定旋轉角度和凸出深度：

點擊“貼圖”進入貼圖視窗，勾選“三維模型不可見”，表面選擇“4/4”，符號找到新建的英文符號，勾選“縮放以適合”將文字縮放成適合的大?。?

背景選擇“H:255 S:100 H:100”的深藍色作為基色。把英文圖形執行“對象-擴展外觀”，雙擊進入圖形中分別給文字和背景填色，保持色相（H）不變，調整飽和度（S）和亮度（B)的數值。

使用相同的方法制作出其他英文圓環，并填充顏色：

最后加入文字排版，設計完成。

可以看到此方案雖然選擇了多個顏色，但通過單色搭配可以得到統一協調的視覺效果。

使用同樣的方法還可以設計出其他方案：

原文地址：藝海拾貝Design（公眾號）

作者：鄧海貝

轉載請注明：學UI網》單色配色你真的會用嗎？（實操篇）

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2096)

272021-9

金剛區也要考慮交互，不只是畫圖標而已

金剛區是什么，想必大家都有所了解。

沒有的話看這張圖就懂了：

圖片來源：淘寶首頁

我在微信上搜了一下，發現大部分討論金剛區設計的文章，都是在講怎么畫圖標。

但是我自己在使用各大 APP 的過程中，發現很多金剛區并不是那么好用，而且這跟圖標好不好看無關。

金剛區設計不好，會對我的使用造成直接影響：

不夠清晰易懂根本不想去看
首次使用找不到需要的內容
下次使用記不住圖標的樣子
圖標設計得怪怪的不好理解

我今天就來總結一下，對于金剛區設計的交互/體驗思考：

數量
順序
顏色
樣式

數量

金剛區里有多少項比較合適？

這其實是米勒法則（Miller’s Role）的典型運用了。

如果你還不太了解米勒法則，看看下面這張圖里的詞語：

現在，半分鐘回憶一下，你記住了多少個？

……

大部分人能記住 5~9 個。

米勒的研究發現，普通人的工作記憶（Working Memory）只有 7±2 個信息塊。

如果給的信息超出了這個數字，大部分人也只能記住這么多。

所以說，金剛區里的圖標數量，最好也維持在這個數，否則就是對用戶的記憶能力要求過高了。

通常來，4 個圖標很輕松，說 6 個圖標是比較理想的，8~9 個就有點吃力了，10 個就超綱了。

例如支付寶這個就過分了，好在這只是工具類產品，復雜一點也沒辦法：

順序

人們在看閱讀文字時，視線軌跡是之字形：

人們在閱讀表格時，視線軌跡是除草機形：

上圖來源：這樣設計表格，看著真難受！

雖然金剛區的眼動圖我沒有，但第一步肯定是從左上角開始往右掃。

所以，用戶最有可能使用的圖標，應該從左到右排在最上面一行，最不常用的可以排在右下角。

例如美團外賣這個設計，看著就挺合理。不但把重要內容放在第一行，而且還做了很大的視覺區分：

不過一些不愁流量的 APP 會選擇把黃金位置用做商業宣傳，難免損失點易用性。

顏色

仿真圖標

如果追求質感，多半會使用物品本身的顏色，例如每日優鮮這個：

這種圖標就沒什么顏色好討論了，注意一下整體和諧就好。

數量較少

如果圖標數量不多可以使用一個顏色，那么顏色上，同樣沒什么好討論的。

例如 QQ 音樂：

數量適中

如果圖標數量在 7 個左右或以內，那么可以每種顏色的圖標都來一個，這樣用戶也能記住大概什么顏色代表什么。

例如京東這樣：

數量很多

圖標數量遠超過 7 時，就不可能每種顏色來一個了，否則顏色都不夠用了。

如果還是想要劃分顏色，可以將類型作為依據，這樣用戶在尋找圖標時會比較有方向。

當然，其實也可以簡單點，干脆都一個顏色，例如聯通手機營業廳：

樣式

底框

一些產品為了統一感，會用圓圈或者圓角矩形，把所有圖標都框起來。

這樣視覺上是好處理了，但交互上很不推薦，因為會大大降低圖標的識別度，眨眼一看都長一樣。

這種底框在主流產品里已經很少見了，不過這么做的設計師還是不少，至少站酷上可以找到很多：

這種圖標數量少，有顏色區分還好，如果數量多又一個顏色，那就很難辨認了。

風格

縱觀常見的金剛區圖標，通常不外乎四種樣式：線條、形狀、2D、3D、仿真。

聯通手機營業廳

QQ音樂

京東

美團外賣

每日優鮮

任何樣式都能讓用戶識別和記憶，但是不同的樣式給人的感官不同。

真實性越高的視覺樣式，就越容易給人高級的感覺；相反真實性越低的視覺樣式，越容易給人簡單邊界的感覺。

總結

我發現做設計時，從不同的角度會帶來截然不同的思考。

今天這篇分析，算是一個以交互體驗為主，融合了一些視覺角度，希望帶給大家一些靈感~

如果你還有什么 idea，歡迎在評論區探討~

原文地址：體驗進階（公眾號）

作者：設計師ZoeYZ

轉載請注明：學UI網》金剛區也要考慮交互，不只是畫圖標而已

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1599)

« 1 2 3 4 5 6 7 ... 16 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合