掌握好常用的設(shè)計理論與心理學(xué)知識，能幫助我們對用戶的人性特征的拿捏，幫助我們較大的影響用戶底層決策，以產(chǎn)品實現(xiàn)業(yè)務(wù)目標(biāo)。

一、尼爾森10大可用性原則

1、狀態(tài)可見原則

不局限于：用戶的當(dāng)前狀態(tài)、知道當(dāng)前任務(wù)要做什么、任務(wù)進(jìn)度等。

2、環(huán)境貼切原則

設(shè)計要復(fù)合目標(biāo)用戶的認(rèn)知，符合用戶的心智模型，于是熟悉的事物越容易被用戶所接受。

3、撤銷重做原則

操作前可預(yù)知，操作中有反饋、操作后可撤銷。

4、一致性原則

不局限于：業(yè)內(nèi)產(chǎn)品的一致性、產(chǎn)品內(nèi)的一致性、版本迭代間的一致性

5、防錯原則

錯誤行動發(fā)生前，引導(dǎo)用戶向正確的方向前進(jìn)；用戶觸碰到危險操作時給予提示；危險操作發(fā)生之后，提供撤回的入口。

6、易取原則

通過使用對象、動作和選項的可視化表達(dá)，最大限度地減輕用戶的記憶負(fù)擔(dān)。

記住用戶的操作記錄、一個流程對應(yīng)一個操作目標(biāo)、提供適量的信息、選擇而不是輸入。

7、靈活原則

好的產(chǎn)品需要同時兼顧新用戶和資深用戶的需求。對新用戶來說，需要功能明確、清晰，對于老用戶需要快捷使用高頻功能。不可迎合某一種用戶，把不必要的信息占據(jù)重要部分。

8、易掃（讀）原則

不要包含不相關(guān)或低頻次的信息/操作。頁面中的每個額外信息都會降低主要內(nèi)容的相對可見性。

產(chǎn)品設(shè)計的四大基本原則：親密性、對齊、重復(fù)、對比。

9、容錯原則

錯誤信息應(yīng)該用通俗易懂的語言表達(dá)，較準(zhǔn)確地指出問題，并且提出解決方案。避免通過代碼等用戶難以理解的形式

即：提供解決方案、幫助用戶從錯誤中恢復(fù)

10、人性化幫助

如果系統(tǒng)能讓用戶不需要閱讀文檔就會使用那是最好的，但通常情況下還是需要幫助文檔的。任何信息應(yīng)該容易被搜索，且專注于用戶的目標(biāo)任務(wù)，并列出具體的步驟來告知用戶。

二、費茨定律

翻譯成人話就是：

1. 按鈕做大點（W大點）更易于點擊

2. 將按鈕放置在離開始點較近的地方

3. 相關(guān)按鈕之間距離近點（D小點）更易于點擊

4. 屏幕的四角與四邊是「無限可選中」位置（非移動端）

5. 通過費茨定律的反向使用，可以降低按鈕被點擊的可能

三、米勒定律

米勒定律預(yù)測人的工作記憶能夠記住的項為7(±2)個。1956年認(rèn)知心理學(xué)家喬治·米勒發(fā)表了一篇論文，他討論了短期記憶和記憶跨度的極限。

不要亂用 “神奇的7” 為設(shè)計進(jìn)行不必要的限制；

將內(nèi)容整理為較小的單元，以便用戶輕松地處理、理解和記憶。

比如電話號碼的顯示方式、銀行卡的顯示方式等

四、接近法則

觀察者看到彼此鄰近（空間或時間）的物體時，會將它們視為一個整體。

在界面設(shè)計中，對信息的組織已經(jīng)離不開這個法則了，他在界面中所體現(xiàn)的就是把相關(guān)的信息塊組合在一起，不太相關(guān)的分離開，增強(qiáng)與區(qū)分元素之間的關(guān)聯(lián)性，所強(qiáng)調(diào)的是空間和位置。

接近法則產(chǎn)生于群組，它可以減少信息設(shè)計的復(fù)雜性，對引導(dǎo)用戶的視覺流、便于用戶對界面的解讀起到至關(guān)重要的作用。

五、席克定律

?？硕墒且环N心理物理學(xué)定律。用戶所面臨的選擇數(shù)量越多，做出選擇所花費的時間就越長，在人機(jī)交互的界面中選項越多，意味著用戶做出決策的時間越長。

六、泰斯勒定律（復(fù)雜性守恒定律）

泰斯勒定律又稱復(fù)雜性守恒定律，該定律認(rèn)為每一個過程都有其固有的復(fù)雜性，這個復(fù)雜性存在一個臨界點，超過了這個點就不能再簡化了，你只能將固有的復(fù)雜性從一個地方移動到另外一個地方。

七、奧卡姆剃刀原理

奧卡姆剃刀原理的核心思想為：“切勿浪費較多東西去做用較少東西同樣可以做好的事——如無必要，勿增實體，即簡單有效原理”。

八、防錯原則

操作前有提示，操作中有反饋、操作后可撤銷。

九、損失厭惡

損失厭惡是指人們面對同樣數(shù)量的收益和損失時，認(rèn)為損失更加令他們難以忍受。同量的損失帶來的負(fù)效用為同量收益的正效用的2.5倍。損失厭惡反映了人們的風(fēng)險偏好并不是一致的，當(dāng)涉及的是收益時，人們表現(xiàn)為風(fēng)險厭惡；當(dāng)涉及的是損失時，人們則表現(xiàn)為風(fēng)險尋求。

十、安慰劑效應(yīng)

“安慰劑效應(yīng)”指的是，對于某種無效的療法或干預(yù)手段，僅僅是“相信它有效”，就能改善健康，并能改變認(rèn)知

十一、多爾蒂門檻

研究結(jié)果表明，計算機(jī)的響應(yīng)速度直接影響了使用者做出下一個決定所要花費的時間（這個時間被稱為用戶響應(yīng)時間），換句話說，計算機(jī)相應(yīng)的時間越長，用戶就要花費越多的時間來思考和決定下一步的操作。

合理的操作響應(yīng)時長、方式有助于用戶保持專注和提率。

軟件操作的過度動畫時間不宜太短或太長，最常見于 400ms 左右。

如果無法避免操作中較長讀取、等待時間，那么就用其他更有趣的動畫、頁面來減少用戶的焦慮感。

十二、馬斯洛需求層次理論

馬斯洛需求層次理論是人本主義科學(xué)的理論之一，由美國心理學(xué)家亞伯拉罕?馬斯洛在1943年在《人類動機(jī)理論》論文中所提出。書中將人類需求像階梯一樣從低到高按層次分為五種，從低到高依次是：生理需求、安全需求、社交需求、尊重需求和自我實現(xiàn)需求。

但最終馬斯洛添加求知需求和審美需求，自此馬斯洛需求層次理論最終定型為8層。

十三、格式塔心理學(xué)

格式塔原則描述了當(dāng)某些條款和條件被應(yīng)用時，人類大腦如何感知視覺成分。它幫助大腦創(chuàng)造視覺的意象。因此，格式塔原則基于六個主要類別：

位置和位置；

接近；

對稱與秩序；

類似；

關(guān)閉；

連續(xù)性。

十四、自我參照效應(yīng)

第一種是精細(xì)加工說：在記憶過程中，這些事物在頭腦中被進(jìn)行了精細(xì)加工，與頭腦中的已有知識之間建立了更多的聯(lián)系，因此回憶時的提示線索更多，回憶效果更好。

第二種是組織加工說：于自我的知識是頭腦中存在的一種結(jié)構(gòu)良好的組織體系，它對與自己相關(guān)的事物有更好的固著作用；同時，由于自我知識常常被激活，因此與之相關(guān)的信息也更容易被相應(yīng)地激活起來，這樣回憶起來也就更容易。

第三種是雙過程說：即自我參照任務(wù)能提高記憶的機(jī)制既包括精細(xì)加工因素，也有組織作用的參與

廣告商會挖空心思的建立商品和你的關(guān)聯(lián)，告知我們?nèi)绻阗徺I了我的商品，你就會獲得怎樣的好處。而自媒體人則在標(biāo)題上盡量簡明扼要的說明，我要說的事情和你密切相關(guān)，不看就虧了。所以，稍微有深度的文章在快餐式的自媒體平臺中反而閱讀量不高，這是因為文章標(biāo)題所涵蓋的內(nèi)容可能只和少部分人有關(guān)。

十五、上癮模型

1、觸發(fā)：提醒人們采取下一步行動

觸發(fā)分為外部觸發(fā)與內(nèi)部觸發(fā)

外部觸發(fā)又分為：

付費型觸發(fā)、回饋型觸發(fā)、人際型觸發(fā)、自主型觸發(fā)。

內(nèi)部觸發(fā)

內(nèi)部觸發(fā)通過用戶記憶存儲中的各種關(guān)聯(lián)來提醒他們采取下一步行動。

比如餓了的時候想起餓了么，想健身的時候想起keep

2、行動：人們在期待酬賞時的直接反應(yīng)

福格行為模型可以用公式來呈現(xiàn)，即B=MAT。B代表行為，M代表動機(jī)，A代表能力，T代表觸發(fā)。要想使人們完成特定的行為，動機(jī)、能力、觸發(fā)這三樣缺一不可。 否則，人們將無法跨過“行動線”，也就是說，不會實施某種行為。

比如說中午十一點你餓了想到餓了么訂餐但是由于你的手機(jī)沒電了定不了餐，中午要吃飯是動機(jī)，訂餐想到叫餓了么外賣是觸發(fā)，能夠用手機(jī)訂餐是能力，但是因為手機(jī)沒有電 你就缺乏了相應(yīng)的能力所以這個行為就沒法完成。（當(dāng)然你也能用朋友的手機(jī)訂餐，這里只是舉個例子）

福格總結(jié)了簡潔性所包含的6個元素 ，即影響任務(wù)難易程度的6個要素，它們是：

• 時間——完成這項活動所需的時間。

• 金錢——從事這項活動所需的經(jīng)濟(jì)投入。

• 體力——完成這項活動所需消耗的體力。

• 腦力——從事這項活動所需消耗的腦力。

• 社會偏差——他人對該項活動的接受度。

• 非常規(guī)性——按照福格的定義，“該項活動與常規(guī)活動之間的匹配程度或矛盾程度”。

四種非常規(guī)的效應(yīng)刺激動機(jī)：

• 稀缺效應(yīng)：（限量1000件）

• 環(huán)境效應(yīng)：（同一款啤酒在便利店和高檔就把價格不一，但人們愿意為價格買單）

• 錨定效應(yīng)：（瑞幸咖啡定價24元的拿鐵對標(biāo)星巴克的32元拿鐵）

• 贈券效應(yīng)：（利益進(jìn)度吸引用戶動機(jī)）

3、多變的酬賞：滿足用戶的需求，激發(fā)使用欲

多變性會使大腦中的伏隔核更加活躍，并且會提升神經(jīng)傳遞素多巴胺的含量，促使我們對酬賞產(chǎn)生迫切的渴望。 研究測試表明，當(dāng)賭博者贏了錢，或是異性戀男性看到美女的圖片時，大腦伏隔核中的多巴胺含量會上升。

多變的酬賞主要表現(xiàn)為三種形式：社交酬賞、獵物酬賞、自我酬賞。那些讓我們欲罷不能的習(xí)慣養(yǎng)成類產(chǎn)品或多或少都利用了這幾類酬賞。

社交酬賞

所謂社交酬賞，是指人們從產(chǎn)品中通過與他人的互動而獲取的人際獎勵。比如微信的點贊評論、站酷的推薦，用戶能夠獲得社交的認(rèn)同。

獵物酬賞

獵物酬賞，是指人們從產(chǎn)品中獲得的具體資源或信息。

自我酬賞

所謂自我酬賞，是指人們從產(chǎn)品中體驗到的操控感、成就感和終結(jié)感。

4、投入：通過用戶對產(chǎn)品的投入，培養(yǎng)忠實用戶

要想讓用戶產(chǎn)生心理聯(lián)想并自動采取行動，首先必須讓他們對產(chǎn)品有所投入。

用戶對某件產(chǎn)品或某項服務(wù)投入的時間和精力越多，對該產(chǎn)品或服務(wù)就越重視。事實上，有充分證據(jù)表明，用戶投入的多寡與其熱愛某項事物的程度成正比。

1、文飾效應(yīng)心理

（1）我們總是高估自己的勞動成果。

（2）我們總是盡力和過去保持行為一致。

（3）我們總是避免認(rèn)知失調(diào)。

2、點滴投入

（1）儲存價值

（2）內(nèi)容

（3）數(shù)據(jù)資料

（4）關(guān)注者

（5）信譽

（6）技能

3、加載下一個觸發(fā)

用戶投入的同時也可以通過加載下一個觸發(fā)的令自己重新開始上癮循環(huán)，從而增加了進(jìn)入上癮循環(huán)的可能性。

十六、雅各布定律

雅各布定律（簡稱雅各布互聯(lián)網(wǎng)用戶體驗法則），它指出如果用戶已將大部分時間花費在某個網(wǎng)站上，那么他們會希望你的網(wǎng)站可以與那些他們已熟悉的網(wǎng)站一樣擁有相似的使用模式。

我們在與新事物互動的過程中，用戶使用的是以往的經(jīng)驗

對設(shè)計師來說，我們可以匹配用戶的心智模型來改善體驗。因此，用戶可以輕松地將已有經(jīng)驗從一種產(chǎn)品或體驗轉(zhuǎn)移到另一種上，無需額外了解新系統(tǒng)的工作原理。

當(dāng)設(shè)計師與用戶的心智模型一致時，良好的用戶體驗就得以實現(xiàn)。

十七、KANO模型

KANO模型大家可以看看這個童鞋的總結(jié)很詳細(xì)

https://www.zcool.com.cn/article/ZMTAyMjQ3Mg==.html

十八、古藤堡表圖表法

人們在瀏覽頁面或布局時視線趨于從左上角移動到右下角

古騰堡圖表法說明我們觀看頁面的視線并不是鏡面對稱的，我們需要在設(shè)計中避免出現(xiàn)此類錯誤但絕不是墨守成規(guī)，將頁面的 Logo放置在左上角而主體向右下角延伸，左下和右上作為視覺的盲點可以添加輔助元素

十九、尼爾森F型視覺模型

尼爾森F型視覺模型由 Jakob Nielsen于2006年提出

他指出，我們在第一次觀看頁面時，視線會呈 F的形狀關(guān)注頁面。
1.先從頂部開始從左到右水平移動。
2.目光再下移開始從左到右觀察但是長度會相對短些。
3.以較短的長度向下掃視，形成一個 F形狀，此時我們的閱讀速度較慢，更為系統(tǒng)和條理性。

二十、序列效應(yīng)

1.在列舉信息時，排在最前和最后的元素，比排在中間的更容易讓人記住。

2.對排在開頭的信息產(chǎn)生加強(qiáng)的回想效果，稱為：初始效應(yīng)，人們有時候會把最前面的信息儲存在長期記憶中。排在結(jié)尾的信息產(chǎn)生加強(qiáng)的回想效果，稱為：時近效應(yīng)。時近效應(yīng)適用于聽覺刺激。初始效應(yīng)適用于視覺刺激。

3.在列舉信息元素時，如果列舉信息屬于視覺性，那么把重要的信息放在最前面；如果是聽覺性，就放在最后面。如果是用戶必須做決定，并且是最后一項出現(xiàn)后馬上做決定，那么就將想要用戶做決定的信息放置最后，以便增加獲選概率，否則放在最前面。

4. 應(yīng)用例子：比如在很多app產(chǎn)品設(shè)計時，個人賬戶與設(shè)置基本放在頁面的最前面和最后面，這體現(xiàn)著產(chǎn)品信息的序列關(guān)系，重要次序，所以在進(jìn)行設(shè)計時，可以在信息排序上遵循序列效應(yīng)。 當(dāng)然還有一些產(chǎn)品想對用戶進(jìn)行引導(dǎo)操作，也可以利用這個法則，將信息放置最前或最后。

轉(zhuǎn)自：站酷-YELLOW_J 

1. 小程序沒有DOM對象，一切基于組件化

2. 小程序的四個重要的文件

• *.js —> view邏輯 —> javascript
• *.wxml —> view結(jié)構(gòu) ----> html
• *.wxss —> view樣式 -----> css
• *. json ----> view 數(shù)據(jù) -----> json文件

注意：為了方便開發(fā)者減少配置項，描述頁面的四個文件必須具有相同的路徑與文件名。

2.1 WXML

WXML（WeiXin Markup Language）是框架設(shè)計的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。WXML 充當(dāng)?shù)木褪穷愃?nbsp;HTML 的角色
要完整了解 WXML 語法，請參考WXML 語法參考。

2.2 WXSS

WXSS (WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。

WXSS 用來決定 WXML 的組件應(yīng)該怎么顯示。

為了適應(yīng)廣大的前端開發(fā)者，WXSS 具有 CSS 大部分特性。同時為了更適合開發(fā)微信小程序，WXSS 對 CSS 進(jìn)行了擴(kuò)充以及修改。

與 CSS 相比，WXSS 擴(kuò)展的特性有：



尺寸單位

樣式導(dǎo)入

2.3 json

JSON 是一種數(shù)據(jù)格式，并不是編程語言，在小程序中，JSON扮演的靜態(tài)配置的角色。



全局配置

小程序根目錄下的 app.json 文件用來對微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多 tab 等。



頁面配置

每一個小程序頁面也可以使用同名 .json 文件來對本頁面的窗口表現(xiàn)進(jìn)行配置，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。



工具配置 project.config.json

通常大家在使用一個工具的時候，都會針對各自喜好做一些個性化配置，例如界面顏色、編譯配置等等，當(dāng)你換了另外一臺電腦重新安裝工具的時候，你還要重新配置。

考慮到這點，小程序開發(fā)者工具在每個項目的根目錄都會生成一個 project.config.json，你在工具上做的任何配置都會寫入到這個文件，當(dāng)你重新安裝工具或者換電腦工作時，你只要載入同一個項目的代碼包，開發(fā)者工具就自動

注意：

JSON文件都是被包裹在一個大括號中 {}，通過key-value的方式來表達(dá)數(shù)據(jù)。JSON的Key必須包裹在一個雙引號中，在實踐中，編寫 JSON 的時候，忘了給 Key 值加雙引號或者是把雙引號寫成單引號是常見錯誤。

JSON的值只能是以下幾種數(shù)據(jù)格式，其他任何格式都會觸發(fā)報錯，例如 JavaScript 中的 undefined。



數(shù)字，包含浮點數(shù)和整數(shù)

字符串，需要包裹在雙引號中

Bool值，true 或者 false

數(shù)組，需要包裹在方括號中 []

對象，需要包裹在大括號中 {}

Null

還需要注意的是 JSON 文件中無法使用注釋，試圖添加注釋將會引發(fā)報錯。

2.4 js

一個服務(wù)僅僅只有界面展示是不夠的，還需要和用戶做交互：響應(yīng)用戶的點擊、獲取用戶的位置等等。在小程序里邊，我們就通過編寫 JS 腳本文件來處理用戶的操作。

注冊頁面

對于小程序中的每個頁面，都需要在頁面對應(yīng)的 js 文件中進(jìn)行注冊，指定頁面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等



使用 Page 構(gòu)造器注冊頁面

簡單的頁面可以使用 Page() 進(jìn)行構(gòu)造。



使用 Component 構(gòu)造器構(gòu)造頁面

Page 構(gòu)造器適用于簡單的頁面。但對于復(fù)雜的頁面， Page 構(gòu)造器可能并不好用。

此時，可以使用 Component 構(gòu)造器來構(gòu)造頁面。 Component 構(gòu)造器的主要區(qū)別是：方法需要放在 methods: { } 里面。

————————————————

版權(quán)聲明：本文為CSDN博主「前端嵐楓」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/yilanyoumeng3/java/article/details/106292742

1.可視化面板介紹

應(yīng)對現(xiàn)在數(shù)據(jù)可視化的趨勢，越來越多企業(yè)需要在很多場景(營銷數(shù)據(jù)，生產(chǎn)數(shù)據(jù)，用戶數(shù)據(jù))下使用，可視化圖表來展示體現(xiàn)數(shù)據(jù)，讓數(shù)據(jù)更加直觀，數(shù)據(jù)特點更加突出。

01-技術(shù)要點

1. div + css 布局
2. flex 布局
3. Less
4. 原生js + jquery 使用
5. rem適配
6. echarts基礎(chǔ)

02-案例適配方案

7. 設(shè)計稿是1920px
8. flexible.js 把屏幕分為 24 等份
9. cssrem 插件的基準(zhǔn)值是 80px
   插件-配置按鈕—配置擴(kuò)展設(shè)置–Root Font Size 里面 設(shè)置。
   但是別忘記重啟vscode軟件保證生效

03-頁面主體布局

1. header布局
2. mainbox布局
3. 公共面板模塊 panel
4. 柱形圖 bar

因為我們今天的主題是echarts部分所以前面的這些，我就為大家寫好框架，里面的布局相信以大家的能力都是分分鐘解決的事情。

2.Echarts（重點）

echarts介紹

常見的數(shù)據(jù)可視化庫：

D3.js 目前 Web 端評價最高的 Javascript 可視化工具庫(入手難)
ECharts.js 百度出品的一個開源 Javascript 數(shù)據(jù)可視化庫
Highcharts.js 國外的前端數(shù)據(jù)可視化庫，非商用免費，被許多國外大公司所使用
AntV 螞蟻金服全新一代數(shù)據(jù)可視化解決方案 等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的關(guān)系

ECharts，一個使用 JavaScript 實現(xiàn)的開源可視化庫，可以流暢的運行在 PC 和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數(shù)據(jù)可視化圖表。

官網(wǎng)地址：https://www.echartsjs.com/zh/index.html

echarts體驗
下載echarts https://github.com/apache/incubator-echarts/tree/4.5.0

使用步驟（5大步驟）：
1.引入echarts 插件文件到html頁面中
2.準(zhǔn)備一個具備大小的DOM容器

<div id="main" style="width: 600px;height:400px;"></div>

3.初始化echarts實例對象

var myChart = echarts.init(document.getElementById('main'));

4.指定配置項和數(shù)據(jù)(option)

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

5.將配置項設(shè)置給echarts實例對象

myChart.setOption(option);  

echarts基礎(chǔ)配置

這是要求同學(xué)們知道以下配置每個模塊的主要作用干什么的就可以了

series

系列列表。每個系列通過 type 決定自己的圖表類型

大白話：圖標(biāo)數(shù)據(jù)，指定什么類型的圖標(biāo)，可以多個圖表重疊。

xAxis：直角坐標(biāo)系 grid 中的 x 軸

boundaryGap: 坐標(biāo)軸兩邊留白策略 true，這時候刻度只是作為分隔線，標(biāo)簽和數(shù)據(jù)點都會在兩個刻度之間的帶(band)中間。

yAxis：直角坐標(biāo)系 grid 中的 y 軸

grid：直角坐標(biāo)系內(nèi)繪圖網(wǎng)格。

title：標(biāo)題組件

tooltip：提示框組件

legend：圖例組件

color：調(diào)色盤顏色列表

數(shù)據(jù)堆疊，同個類目軸上系列配置相同的stack值后 后一個系列的值會在前一個系列的值上相加。



option = {

    // color設(shè)置我們線條的顏色 注意后面是個數(shù)組

    color: ['pink', 'red', 'green', 'skyblue'],

    // 設(shè)置圖表的標(biāo)題

    title: {

        text: '折線圖堆疊123'

    },

    // 圖表的提示框組件 

    tooltip: {

        // 觸發(fā)方式

        trigger: 'axis'

    },

    // 圖例組件

    legend: {

       // series里面有了 name值則 legend里面的data可以刪掉

    },

    // 網(wǎng)格配置  grid可以控制線形圖 柱狀圖 圖表大小

    grid: {

        left: '3%',

        right: '4%',

        bottom: '3%',

        // 是否顯示刻度標(biāo)簽 如果是true 就顯示 否則反之

        containLabel: true

    },

    // 工具箱組件  可以另存為圖片等功能

    toolbox: {

        feature: {

            saveAsImage: {}

        }

    },

    // 設(shè)置x軸的相關(guān)配置

    xAxis: {

        type: 'category',

        // 是否讓我們的線條和坐標(biāo)軸有縫隙

        boundaryGap: false,

        data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']

    },

     // 設(shè)置y軸的相關(guān)配置

    yAxis: {

        type: 'value'

    },

    // 系列圖表配置 它決定著顯示那種類型的圖表

    series: [

        {

            name: '郵件營銷',

            type: 'line',

           

            data: [120, 132, 101, 134, 90, 230, 210]

        },

        {

            name: '聯(lián)盟廣告',

            type: 'line',



            data: [220, 182, 191, 234, 290, 330, 310]

        },

        {

            name: '視頻廣告',

            type: 'line',

          

            data: [150, 232, 201, 154, 190, 330, 410]

        },

        {

            name: '直接訪問',

            type: 'line',

          

            data: [320, 332, 301, 334, 390, 330, 320]

        }

    ]

};

3.Echarts快速使用

1.官網(wǎng)實例

官網(wǎng)默認(rèn)為我們提供了大量的案例，我們需要使用那一種只需要直接點擊打開后復(fù)制他們的相關(guān)配置，然后按照我上面說的5大步驟進(jìn)行使用即可。

2.社區(qū)Gallery

官方自帶的圖例，可能在很多時候并不能滿足我們的需要，在社區(qū)這里可以找到一些基于echart的高度定制好的圖表，相當(dāng)于基于jquery開發(fā)的插件，這里是基于echarts開發(fā)的第三方的圖表。

本案例中使用了地圖模擬飛行的案例就是從社區(qū)中進(jìn)行引用的，
參考社區(qū)的例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模擬飛機(jī)航線)
實現(xiàn)步驟：

第一需要下載china.js提供中國地圖的js文件
第二個因為里面代碼比較多，我們新建一個新的js文件 myMap.js 引入
使用社區(qū)提供的配置即可。
代碼已經(jīng)上傳至我的碼云如有需要的小伙伴可自行下載：
https://gitee.com/jiuyueqi/echarts

ps:最后呢，如果大家看完樓主的文章覺得對echarts的學(xué)習(xí)和了解有所幫助，麻煩大家路過點個贊點個關(guān)注唄!樓主后續(xù)還會繼續(xù)更新有關(guān)前端方面的面試題資料或者其他方面的知識。
————————————————
版權(quán)聲明：本文為CSDN博主「程序猿玖月柒」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_45257157/java/article/details/106300587

JavaScript數(shù)組對象的迭代方法詳解

上一篇博客講到了數(shù)組的方法，當(dāng)然里邊比較復(fù)雜的就是數(shù)組的迭代方法，因為涉及到了回調(diào)函數(shù)，所以這篇博客我們來詳細(xì)講解一下js數(shù)組迭代方法的使用。

1.forEach(funcrion(value,index,arr){})：對數(shù)組的每一項運行給定函數(shù)，這個方法不進(jìn)行返回，所以一般用于讓數(shù)組循環(huán)執(zhí)行某方法。

  var arr=[1,2,3,4,5,6];

    arr.forEach(function(val,index,arr){

        console.log(val,index,arr);

    })

    // 其中：

    // value:每一個數(shù)組項的值 必填項

    // index:每一個數(shù)組項對應(yīng)的索引

    // arr:當(dāng)前的數(shù)組

注意：forEach()方法不返回值，所以回調(diào)函數(shù)中使用return會打印出來undefined。

2.map(funcrion(value,index,arr){})：對數(shù)組的每一項運行給定函數(shù)，它將返回執(zhí)行函數(shù)后的結(jié)果組成的新數(shù)組。

 var aNum2 = [1.2, 1.8, 2.0, 4.3];

    console.log(aNum2.map(Math.floor()));// [1,1,2,4]

    

    var arr=[1,2,3];

    console.log(arr.map(function(val,index){

        return val*3

    }));// 3 6 9

    // 其中：

    // value:每一個數(shù)組項的值 必填項

    // index:每一個數(shù)組項對應(yīng)的索引

    // arr:當(dāng)前的數(shù)組

注意：map()方法有返回值，返回值為新的數(shù)組，所以可以直接再回調(diào)函數(shù)中return。

3.every(funcrion(value,index,arr){})：對數(shù)組的每一項都運行給定函數(shù)，進(jìn)項判斷，若對于每項執(zhí)行函數(shù)都返回了true，則其結(jié)果為true。

 var arr=[10,20,30];

    console.log(arr.every(function(val){

        return val>20;

    }));// false

    

    console.log(arr.every(function(val){

        return val>0;

    }));// true

    

    // 其中：

    // value:每一個數(shù)組項的值 必填項

    // index:每一個數(shù)組項對應(yīng)的索引

    // arr:當(dāng)前的數(shù)組

注意：every()方法所有的數(shù)組項都符合判斷時返回true,否則返回false。

4.some(funcrion(value,index,arr){})：對數(shù)組的每一項都運行給定函數(shù)，進(jìn)行判斷，若存在一項符合條件的數(shù)組項，則其結(jié)果為true。

    var arr=[10,20,30];

    console.log(arr.some(function(val){

        return val>20;

    }));// true

    

    console.log(arr.some(function(val){

        return val>0;

    }));// true

    

    console.log(arr.some(function(val){

        return val<0;

    }));// false

    

    arr.some(function(val){

        console.log(val<0);

    });//fasle false false

    // 其中：

    // value:每一個數(shù)組項的值 必填項

    // index:每一個數(shù)組項對應(yīng)的索引

    // arr:當(dāng)前的數(shù)組

注意：some()方法如果回調(diào)函數(shù)執(zhí)行完會根據(jù)結(jié)果返回true或false，但是回調(diào)函數(shù)中打印判斷是，只會作為判斷條件的返回值，則會打印多遍。

5.fliter(funcrion(value,index,arr){})：對數(shù)組的每一項都運行給定函數(shù)，進(jìn)行過濾，將符合條件的數(shù)組項添加到新的數(shù)組中，并返回新的數(shù)組。

   var aNum=[1,2,3,4];
    console.log(aNum.filter(function (num) {
        return num > 1;
    }));//[2,3,4,]
    aNum.filter(function (num) {
        console.log(num > 1);//true true true
    })

注意：filter()方法對數(shù)組項進(jìn)行過濾，然后將符合條件的數(shù)組項添加到一個新的數(shù)組并返回，但是如果直接打印這個判斷條件，相當(dāng)于打印的判斷條件的結(jié)果，只會返回true或者false。

6.ES6中新增的迭代方法

1.find():返回第一個符合傳入測試（函數(shù)）條件的數(shù)組元素。

  var aNum=[10,20,30,40];

    console.log(aNum.find(function (num) {

        return num > 19;

    }));//1

    console.log(aNum.find(function (num) {

        return num < 0;

    }));//undefined



2.findIndex():返回符合傳入測試（函數(shù)）條件的數(shù)組元素索引。

console.log(aNum.findIndex(function (num) { return num > 19; }));//3

3.includes():判斷一個數(shù)組是否包含一個指定的值。

總結(jié)：

forEach()與map()是一對，用于數(shù)組遍歷執(zhí)行指定函數(shù)，前者不返回數(shù)組，后者返回 處理過的新數(shù)組。
every()與some()是一對，分別適用于檢測數(shù)組是否全部滿足某條件或者存在滿足的數(shù)組項,返回true或false。
filter()則是相當(dāng)于過濾器的存在，過濾掉數(shù)組中不符合條件的數(shù)據(jù)，將符合條件的數(shù)組項添加到新數(shù)組，并返回。
————————————————
版權(quán)聲明：本文為CSDN博主「Mr_Han119」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_39155611/java/article/details/106294417

在 TypeScript 開發(fā)中，tsconfig.json 是個不可或缺的配置文件，它是我們在 TS 項目中最常見的配置文件，那么你真的了解這個文件嗎？它里面都有哪些優(yōu)秀配置？如何配置一個合理的 tsconfig.json 文件？本文將全面帶大家一起詳細(xì)了解 tsconfig.json 的各項配置。

本文將從以下幾個方面全面介紹 tsconfig.json 文件：

了不起的 tsconfig.json 指南.png

水平有限，歡迎各位大佬指點~~

一、tsconfig.json 簡介

1. 什么是 tsconfig.json

TypeScript 使用 tsconfig.json 文件作為其配置文件，當(dāng)一個目錄中存在 tsconfig.json 文件，則認(rèn)為該目錄為 TypeScript 項目的根目錄。

通常 tsconfig.json 文件主要包含兩部分內(nèi)容：指定待編譯文件和定義編譯選項。

從《TypeScript編譯器的配置文件的JSON模式》可知，目前 tsconfig.json 文件有以下幾個頂層屬性：

compileOnSave

compilerOptions

exclude

extends

files

include

references

typeAcquisition

文章后面會詳細(xì)介紹一些常用屬性配置。

2. 為什么使用 tsconfig.json

通常我們可以使用 tsc 命令來編譯少量 TypeScript 文件：

/*

 參數(shù)介紹：

 --outFile // 編譯后生成的文件名稱

 --target  // 指定ECMAScript目標(biāo)版本

 --module  // 指定生成哪個模塊系統(tǒng)代碼

 index.ts  // 源文件

*/

$ tsc --outFile leo.js --target es3 --module amd index.ts

但如果實際開發(fā)的項目，很少是只有單個文件，當(dāng)我們需要編譯整個項目時，就可以使用 tsconfig.json 文件，將需要使用到的配置都寫進(jìn) tsconfig.json 文件，這樣就不用每次編譯都手動輸入配置，另外也方便團(tuán)隊協(xié)作開發(fā)。

二、使用 tsconfig.json

目前使用 tsconfig.json 有2種操作：

1. 初始化 tsconfig.json

在初始化操作，也有 2 種方式：

手動在項目根目錄（或其他）創(chuàng)建 tsconfig.json 文件并填寫配置；

通過 tsc --init 初始化 tsconfig.json 文件。

2. 指定需要編譯的目錄

在不指定輸入文件的情況下執(zhí)行 tsc 命令，默認(rèn)從當(dāng)前目錄開始編譯，編譯所有 .ts 文件，并且從當(dāng)前目錄開始查找 tsconfig.json 文件，并逐級向上級目錄搜索。

$ tsc

另外也可以為 tsc 命令指定參數(shù) --project 或 -p 指定需要編譯的目錄，該目錄需要包含一個 tsconfig.json 文件，如：

/*

 文件目錄：

 ├─src/

 │  ├─index.ts

 │  └─tsconfig.json

 ├─package.json

*/

$ tsc --project src

注意，tsc 的命令行選項具有優(yōu)先級，會覆蓋 tsconfig.json 中的同名選項。

更多 tsc 編譯選項，可查看《編譯選項》章節(jié)。

三、使用示例

這個章節(jié)，我們將通過本地一個小項目 learnTsconfig 來學(xué)著實現(xiàn)一個簡單配置。

當(dāng)前開發(fā)環(huán)境：windows / node 10.15.1 / TypeScript3.9

1. 初始化 learnTsconfig 項目

執(zhí)行下面命令：

$ mkdir learnTsconfig

$ cd .\learnTsconfig\

$ mkdir src

$ new-item index.ts

并且我們?yōu)?index.ts 文件寫一些簡單代碼：

// 返回當(dāng)前版本號

function getVersion(version:string = "1.0.0"): string{

   return version;

}

console.log(getVersion("1.0.1"))

我們將獲得這么一個目錄結(jié)構(gòu)：

 └─src/

    └─index.ts

2. 初始化 tsconfig.json 文件

在 learnTsconfig 根目錄執(zhí)行：

$ tsc --init

3. 修改 tsconfig.json 文件

我們設(shè)置幾個常見配置項：

{

 "compilerOptions": {

   "target": "ES5",             // 目標(biāo)語言的版本

   "module": "commonjs",        // 指定生成代碼的模板標(biāo)準(zhǔn)

   "noImplicitAny": true,       // 不允許隱式的 any 類型

   "removeComments": true,      // 刪除注釋

   "preserveConstEnums": true,  // 保留 const 和 enum 聲明

   "sourceMap": true            // 生成目標(biāo)文件的sourceMap文件

 },

 "files": [   // 指定待編譯文件

   "./src/index.ts"  

 ]

}

其中需要注意一點：

files 配置項值是一個數(shù)組，用來指定了待編譯文件，即入口文件。

當(dāng)入口文件依賴其他文件時，不需要將被依賴文件也指定到 files 中，因為編譯器會自動將所有的依賴文件歸納為編譯對象，即 index.ts 依賴 user.ts 時，不需要在 files 中指定 user.ts ， user.ts 會自動納入待編譯文件。

4. 執(zhí)行編譯

配置完成后，我們可以在命令行執(zhí)行 tsc 命令，執(zhí)行編譯完成后，我們可以得到一個 index.js 文件和一個 index.js.map 文件，證明我們編譯成功，其中 index.js 文件內(nèi)容如下：

function getVersion(version) {

   if (version === void 0) { version = "1.0.0"; }

   return version;

}

console.log(getVersion("1.0.1"));

//# sourceMappingURL=index.js.map

可以看出，tsconfig.json 中的 removeComments 配置生效了，將我們添加的注釋代碼移除了。

到這一步，就完成了這個簡單的示例，接下來會基于這個示例代碼，講解《七、常見配置示例》。

四、tsconfig.json 文件結(jié)構(gòu)介紹

1. 按頂層屬性分類

在 tsconfig.json 文件中按照頂層屬性，分為以下幾類：

tsconfig.json 文件結(jié)構(gòu)（頂層屬性）.png

了不起的 tsconfig.json 指南.png

2. 按功能分類

tsconfig.json 文件結(jié)構(gòu)（功能）.png

五、tsconfig.json 配置介紹

1. compileOnSave

compileOnSave 屬性作用是設(shè)置保存文件的時候自動編譯，但需要編譯器支持。

{

   // ...

 "compileOnSave": false,

}

2. compilerOptions

compilerOptions 屬性作用是配置編譯選項。

若 compilerOptions 屬性被忽略，則編譯器會使用默認(rèn)值，可以查看《官方完整的編譯選項列表》。

編譯選項配置非常繁雜，有很多配置，這里只列出常用的配置。

{

 // ...

 "compilerOptions": {

   "incremental": true, // TS編譯器在第一次編譯之后會生成一個存儲編譯信息的文件，第二次編譯會在第一次的基礎(chǔ)上進(jìn)行增量編譯，可以提高編譯的速度

   "tsBuildInfoFile": "./buildFile", // 增量編譯文件的存儲位置

   "diagnostics": true, // 打印診斷信息

   "target": "ES5", // 目標(biāo)語言的版本

   "module": "CommonJS", // 生成代碼的模板標(biāo)準(zhǔn)

   "outFile": "./app.js", // 將多個相互依賴的文件生成一個文件，可以用在AMD模塊中，即開啟時應(yīng)設(shè)置"module": "AMD",

   "lib": ["DOM", "ES2015", "ScriptHost", "ES2019.Array"], // TS需要引用的庫，即聲明文件，es5 默認(rèn)引用dom、es5、scripthost,如需要使用es的高級版本特性，通常都需要配置，如es8的數(shù)組新特性需要引入"ES2019.Array",

   "allowJS": true, // 允許編譯器編譯JS，JSX文件

   "checkJs": true, // 允許在JS文件中報錯，通常與allowJS一起使用

   "outDir": "./dist", // 指定輸出目錄

   "rootDir": "./", // 指定輸出文件目錄(用于輸出)，用于控制輸出目錄結(jié)構(gòu)

   "declaration": true, // 生成聲明文件，開啟后會自動生成聲明文件

   "declarationDir": "./file", // 指定生成聲明文件存放目錄

   "emitDeclarationOnly": true, // 只生成聲明文件，而不會生成js文件

   "sourceMap": true, // 生成目標(biāo)文件的sourceMap文件

   "inlineSourceMap": true, // 生成目標(biāo)文件的inline SourceMap，inline SourceMap會包含在生成的js文件中

   "declarationMap": true, // 為聲明文件生成sourceMap

   "typeRoots": [], // 聲明文件目錄，默認(rèn)時node_modules/@types

   "types": [], // 加載的聲明文件包

   "removeComments":true, // 刪除注釋

   "noEmit": true, // 不輸出文件,即編譯后不會生成任何js文件

   "noEmitOnError": true, // 發(fā)送錯誤時不輸出任何文件

   "noEmitHelpers": true, // 不生成helper函數(shù)，減小體積，需要額外安裝，常配合importHelpers一起使用

   "importHelpers": true, // 通過tslib引入helper函數(shù)，文件必須是模塊

   "downlevelIteration": true, // 降級遍歷器實現(xiàn)，如果目標(biāo)源是es3/5，那么遍歷器會有降級的實現(xiàn)

   "strict": true, // 開啟所有嚴(yán)格的類型檢查

   "alwaysStrict": true, // 在代碼中注入'use strict'

   "noImplicitAny": true, // 不允許隱式的any類型

   "strictNullChecks": true, // 不允許把null、undefined賦值給其他類型的變量

   "strictFunctionTypes": true, // 不允許函數(shù)參數(shù)雙向協(xié)變

   "strictPropertyInitialization": true, // 類的實例屬性必須初始化

   "strictBindCallApply": true, // 嚴(yán)格的bind/call/apply檢查

   "noImplicitThis": true, // 不允許this有隱式的any類型

   "noUnusedLocals": true, // 檢查只聲明、未使用的局部變量(只提示不報錯)

   "noUnusedParameters": true, // 檢查未使用的函數(shù)參數(shù)(只提示不報錯)

   "noFallthroughCasesInSwitch": true, // 防止switch語句貫穿(即如果沒有break語句后面不會執(zhí)行)

   "noImplicitReturns": true, //每個分支都會有返回值

   "esModuleInterop": true, // 允許export=導(dǎo)出，由import from 導(dǎo)入

   "allowUmdGlobalAccess": true, // 允許在模塊中全局變量的方式訪問umd模塊

   "moduleResolution": "node", // 模塊解析策略，ts默認(rèn)用node的解析策略，即相對的方式導(dǎo)入

   "baseUrl": "./", // 解析非相對模塊的基地址，默認(rèn)是當(dāng)前目錄

   "paths": { // 路徑映射，相對于baseUrl

     // 如使用jq時不想使用默認(rèn)版本，而需要手動指定版本，可進(jìn)行如下配置

     "jquery": ["node_modules/jquery/dist/jquery.min.js"]

   },

   "rootDirs": ["src","out"], // 將多個目錄放在一個虛擬目錄下，用于運行時，即編譯后引入文件的位置可能發(fā)生變化，這也設(shè)置可以虛擬src和out在同一個目錄下，不用再去改變路徑也不會報錯

   "listEmittedFiles": true, // 打印輸出文件

   "listFiles": true// 打印編譯的文件(包括引用的聲明文件)

 }

}

3. exclude

exclude 屬性作用是指定編譯器需要排除的文件或文件夾。

默認(rèn)排除 node_modules 文件夾下文件。

{

   // ...

 "exclude": [

   "src/lib" // 排除src目錄下的lib文件夾下的文件不會編譯

 ]

}

和 include 屬性一樣，支持 glob 通配符：

* 匹配0或多個字符（不包括目錄分隔符）

? 匹配一個任意字符（不包括目錄分隔符）

**/ 遞歸匹配任意子目錄

4. extends

extends 屬性作用是引入其他配置文件，繼承配置。

默認(rèn)包含當(dāng)前目錄和子目錄下所有 TypeScript 文件。

{

   // ...

 // 把基礎(chǔ)配置抽離成tsconfig.base.json文件，然后引入

   "extends": "./tsconfig.base.json"

}

5. files

files 屬性作用是指定需要編譯的單個文件列表。

默認(rèn)包含當(dāng)前目錄和子目錄下所有 TypeScript 文件。

{

   // ...

 "files": [

   // 指定編譯文件是src目錄下的leo.ts文件

   "scr/leo.ts"

 ]

}

6. include

include 屬性作用是指定編譯需要編譯的文件或目錄。

{

   // ...

 "include": [

   // "scr" // 會編譯src目錄下的所有文件，包括子目錄

   // "scr/*" // 只會編譯scr一級目錄下的文件

   "scr/*/*" // 只會編譯scr二級目錄下的文件

 ]

}

7. references

references 屬性作用是指定工程引用依賴。

在項目開發(fā)中，有時候我們?yōu)榱朔奖銓⑶岸隧椖亢秃蠖薾ode項目放在同一個目錄下開發(fā)，兩個項目依賴同一個配置文件和通用文件，但我們希望前后端項目進(jìn)行靈活的分別打包，那么我們可以進(jìn)行如下配置：

{

   // ...

 "references": [ // 指定依賴的工程

    {"path": "./common"}

 ]

}

8. typeAcquisition

typeAcquisition 屬性作用是設(shè)置自動引入庫類型定義文件(.d.ts)相關(guān)。

包含 3 個子屬性：

enable  : 布爾類型，是否開啟自動引入庫類型定義文件(.d.ts)，默認(rèn)為 false；

include  : 數(shù)組類型，允許自動引入的庫名，如：["jquery", "lodash"]；

exculde  : 數(shù)組類型，排除的庫名。

{

   // ...

 "typeAcquisition": {

   "enable": false,

   "exclude": ["jquery"],

   "include": ["jest"]

 }

}

六、常見配置示例

本部分內(nèi)容中，我們找了幾個實際開發(fā)中比較常見的配置，當(dāng)然，還有很多配置需要自己摸索喲~~

1. 移除代碼中注釋

tsconfig.json：

{

 "compilerOptions": {

   "removeComments": true,

 }

}

編譯前：

// 返回當(dāng)前版本號

function getVersion(version:string = "1.0.0"): string{

   return version;

}

console.log(getVersion("1.0.1"))

編譯結(jié)果：

function getVersion(version) {

   if (version === void 0) { version = "1.0.0"; }

   return version;

}

console.log(getVersion("1.0.1"));

2. 開啟null、undefined檢測

tsconfig.json：

{

   "compilerOptions": {

       "strictNullChecks": true

   },

}

修改 index.ts 文件內(nèi)容：

const leo;

leo = new Pingan('leo','hello');

這時候編輯器也會提示錯誤信息，執(zhí)行 tsc 后，控制臺報錯：

src/index.ts:9:11 - error TS2304: Cannot find name 'Pingan'.

9 leo = new Pingan('leo','hello');

Found 1 error.

3. 配置復(fù)用

通過 extends 屬性實現(xiàn)配置復(fù)用，即一個配置文件可以繼承另一個文件的配置屬性。

比如，建立一個基礎(chǔ)的配置文件 configs/base.json ：

{

 "compilerOptions": {

   "noImplicitAny": true,

   "strictNullChecks": true

 }

}

在tsconfig.json 就可以引用這個文件的配置了：

{

 "extends": "./configs/base",

 "files": [

   "main.ts",

   "supplemental.ts"

 ]

}

4. 生成枚舉的映射代碼

在默認(rèn)情況下，使用 const 修飾符后，枚舉不會生成映射代碼。

如下，我們可以看出：使用 const 修飾符后，編譯器不會生成任何 RequestMethod 枚舉的任何映射代碼，在其他地方使用時，內(nèi)聯(lián)每個成員的值，節(jié)省很大開銷。

const enum RequestMethod {

 Get,

 Post,

 Put,

 Delete

}

let methods = [

 RequestMethod.Get,

 RequestMethod.Post

]

編譯結(jié)果：

"use strict";

let methods = [

   0 /* Get */,

   1 /* Post */

];

當(dāng)然，我們希望生成映射代碼時，也可以設(shè)置 tsconfig.json 中的配置，設(shè)置 preserveConstEnums 編譯器選項為 true ：

{

 "compilerOptions": {

   "target": "es5",

   "preserveConstEnums": true

 }

}

最后編譯結(jié)果變成：

"use strict";

var RequestMethod;

(function (RequestMethod) {

   RequestMethod[RequestMethod["Get"] = 0] = "Get";

   RequestMethod[RequestMethod["Post"] = 1] = "Post";

   RequestMethod[RequestMethod["Put"] = 2] = "Put";

   RequestMethod[RequestMethod["Delete"] = 3] = "Delete";

})(RequestMethod || (RequestMethod = {}));

let methods = [

   0 /* Get */,

   1 /* Post */

];

5. 關(guān)閉 this 類型注解提示

通過下面代碼編譯后會報錯：

const button = document.querySelector("button");

button?.addEventListener("click", handleClick);

function handleClick(this) {

console.log("Clicked!");

this.removeEventListener("click", handleClick);

}

報錯內(nèi)容：

src/index.ts:10:22 - error TS7006: Parameter 'this' implicitly has an 'any' type.

10 function handleClick(this) {

Found 1 error.

這是因為 this 隱式具有 any 類型，如果沒有指定類型注解，編譯器會提示“"this" 隱式具有類型 "any"，因為它沒有類型注釋?！?。

解決方法有2種：

指定 this 類型，如本代碼中為 HTMLElement 類型：

HTMLElement 接口表示所有的 HTML 元素。一些HTML元素直接實現(xiàn)了 HTMLElement 接口，其它的間接實現(xiàn)HTMLElement接口。

關(guān)于 HTMLElement 可查看詳細(xì)。

使用 --noImplicitThis 配置項：

在 TS2.0 還增加一個新的編譯選項： --noImplicitThis，表示當(dāng) this 表達(dá)式值為 any 類型時生成一個錯誤信息。我們設(shè)置為 true 后就能正常編譯。

{

 "compilerOptions": {

   "noImplicitThis": true

 }

}

七、Webpack/React 中使用示例

1. 配置編譯 ES6 代碼，JSX 文件

創(chuàng)建測試項目 webpack-demo，結(jié)構(gòu)如下：

webpack-demo/

 |- package.json

 |- tsconfig.json

 |- webpack.config.js

 |- /dist

   |- bundle.js

   |- index.html

 |- /src

   |- index.js

   |- index.ts

 |- /node_modules

安裝 TypeScript 和 ts-loader：

$ npm install --save-dev typescript ts-loader

配置 tsconfig.json，支持 JSX，并將 TypeScript 編譯為 ES5：

{

 "compilerOptions": {

   "outDir": "./dist/",

   "noImplicitAny": true,

+   "module": "es6",

+   "target": "es5",

+   "jsx": "react",

   "allowJs": true

 }

}

還需要配置 webpack.config.js，使其能夠處理 TypeScript 代碼，這里主要在 rules 中添加 ts-loader ：

const path = require('path');

module.exports = {

 entry: './src/index.ts',

 module: {

   rules: [

     {

       test: /\.tsx?$/,

       use: 'ts-loader',

       exclude: /node_modules/

     }

   ]

 },

 resolve: {

   extensions: [ '.tsx', '.ts', '.js' ]

 },

 output: {

   filename: 'bundle.js',

   path: path.resolve(__dirname, 'dist')

 }

};

2. 配置 source map

想要啟用 source map，我們必須配置 TypeScript，以將內(nèi)聯(lián)的 source map 輸出到編譯后的 JavaScript 文件中。

只需要在 tsconfig.json 中配置 sourceMap 屬性：

 {

   "compilerOptions": {

     "outDir": "./dist/",

+     "sourceMap": true,

     "noImplicitAny": true,

     "module": "commonjs",

     "target": "es5",

     "jsx": "react",

     "allowJs": true

   }

 }

然后配置 webpack.config.js 文件，讓 webpack 提取 source map，并內(nèi)聯(lián)到最終的 bundle 中：

 const path = require('path');

 module.exports = {

   entry: './src/index.ts',

+   devtool: 'inline-source-map',

   module: {

     rules: [

       {

         test: /\.tsx?$/,

         use: 'ts-loader',

         exclude: /node_modules/

       }

     ]

   },

   resolve: {

     extensions: [ '.tsx', '.ts', '.js' ]

   },

   output: {

     filename: 'bundle.js',

     path: path.resolve(__dirname, 'dist')

   }

 };

八、總結(jié)

本文較全面介紹了 tsconfig.json 文件的知識，從“什么是 tsconfig.js 文件”開始，一步步帶領(lǐng)大家全面認(rèn)識 tsconfig.json 文件。

文中通過一個簡單 learnTsconfig 項目，讓大家知道項目中如何使用 tsconfig.json 文件。在后續(xù)文章中，我們將這么多的配置項進(jìn)行分類學(xué)習(xí)。最后通過幾個常見配置示例，解決我們開發(fā)中遇到的幾個常見問題。

路由設(shè)計

本則路由考慮驗證進(jìn)入登錄頁面，完成登錄操作進(jìn)入首頁。

import Vue from "vue";

import Router from "vue-router";

Vue.use(Router);

import store from "@/store/store";

// (延遲加載)

const Login = () => import("@/views/login");

const Home = () => import("@/views/home");

const HomeRoute = {

 path: "/",

 name: "首頁",

 component: Home

};

export { HomeRoute };

const router = new Router({

 base: process.env.BASE_URL,

 routes: [

   {

     path: "/login",

     name: "登錄",

     component: Login

   },

   HomeRoute

 ]

});

router.beforeEach((to, from, next) => {

 let loginName = store.state.user.loginName;

 if (to.path === "/" && loginName == "") {

   next("/login");

 } else {

   next();

 }

});

export default router;

數(shù)據(jù)模型

const state = {

 loginName: ""

};

const mutations = {

 SET_LOGINNAME(state, loginName) {

   state.loginName = loginName;

 }

};

const actions = {

 login({ commit }, userInfo) {

   return new Promise((res, ret) => {

     commit("SET_LOGINNAME", userInfo);

     res();

   });

 },

 logout({ commit }) {

   return new Promise((res, ret) => {

     commit("SET_LOGINNAME", "");

     res();

   });

 }

};

export default {

 namespaced: true,

 state,

 mutations,

 actions

};

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

import user from "./modules/user";

const store = new Vuex.Store({

 modules: {

   user

 }

});

export default store;

組件

<div class="modify">

 <input

   type="text"

   @keydown.enter.prevent="handleKeydown"

   v-model="currentVal"

   placeholder="使用enter鍵切換頻道"

 />

 <button @click="reset" style="margin-left:5px;outline:none;cursor:pointer;">復(fù)位</button>

</div>

import { mapState, mapMutations, mapActions } from "vuex";

export default {

 name: "login",

 data() {

   return {

     currentVal: "",

     list: ["咨詢服務(wù)", "音悅臺", "體育臺", "財經(jīng)頻道", "時尚資訊"],

     index: 0

   };

 },

 computed: {

   ...mapState({

     loginName: state => state.user.loginName

   })

 },

 methods: {

   ...mapActions({

     login: "user/login"

   }),

   handleToHome() {

     let userInfo = "user";

     this.login(userInfo);

     this.$router.push({

       path: "/"

     });

   },

前言

在平時H5或者RN開發(fā)時，我們業(yè)務(wù)場景中大部分都不是單頁面的需求，那這時我們就能使用路由在進(jìn)行多頁面的切換。下面會對比一下react路由和RN路由的本質(zhì)區(qū)別和使用方法。

路由（routing）是指分組從源到目的地時，決定端到端路徑的網(wǎng)絡(luò)范圍的進(jìn)程

React路由

簡介

使用React構(gòu)建的單頁面應(yīng)用，要想實現(xiàn)頁面間的跳轉(zhuǎn)，首先想到的就是使用路由。在React中，常用的有兩個包可以實現(xiàn)這個需求，那就是react-router和react-router-dom。本文主要針對react-router-dom進(jìn)行說明

在根組件上配置路由，引用react-router-dom結(jié)構(gòu){ HashRouter as Router, Route ,Link ,Redirect ,Switch }，HashRouter組件是路由的根組件，定義屬性和方法傳遞給子組件。Router組件進(jìn)行路由，指定每個路由跳轉(zhuǎn)到相應(yīng)的組件。Link組件指定跳轉(zhuǎn)鏈接。Redirect組件路由重定向，不管什么情況下，都會跳轉(zhuǎn)當(dāng)前指定的路徑，和switch組件聯(lián)合起來一起調(diào)用，當(dāng)路徑匹配到路由，不在往下匹配

兩類路由

HashRouter：利用監(jiān)聽hash變化（有一個事件hashchange）實現(xiàn)路由切換，它是路由容器，

渲染子組件，并向下層子組件傳遞（Context上下文傳遞）loaction,history等路由信息

BrowserHistory：利用H5Api實現(xiàn)路由切換，是路由容器，渲染子組件，

并向子組件傳遞loaction,history等路由信息

路由配置

image-20200601110809995

路由實現(xiàn)原理

HashRouter只是一個容器，本身并沒有DOM結(jié)構(gòu)

它渲染的就是它的子組件，并向下層傳遞location

組件掛載完成之后根據(jù)hash改變pathname的值，如果沒有hash值就默認(rèn)展示根組件

需要跳轉(zhuǎn)路由頁面時我們使用link或者push去賦值hash的pathname 如this.props.history.push({ pathname: preview, param: { pic, index } });

當(dāng)hash值發(fā)生變化的時候會通過hashchange捕獲變化，并給pathname重新賦值

拿到上下文中傳過來的location，然后取出pathname。再對它的子組件進(jìn)行遍歷，如果子組件的path屬性和當(dāng)前上下文中傳過來的pathname屬性相匹配就進(jìn)行渲染，若不匹配就返回null。

總結(jié)

React路由是實質(zhì)就是，根據(jù)遍歷識別路由的pathname，來切換router路由容器中component組件的加載渲染。每次更改pathname就都是組件的重新渲染流程，頁面也都會呈現(xiàn)出刷新的效果。

RN路由

簡介

RN把導(dǎo)航和路由都集中到了react-navigation庫里面

組件使用堆棧式的頁面導(dǎo)航來實現(xiàn)各個頁面跳轉(zhuǎn)

構(gòu)造函數(shù)：StackNavigator(RouteConfigs, StackNavigatorConfig)

RouteConfigs：頁面路由配置

StackNavigatorConfig：路由參數(shù)配置

路由配置

image-20200601111333107

參數(shù)詳解

navigationOptions：配置StackNavigator的一些屬性。

   title：標(biāo)題，如果設(shè)置了這個導(dǎo)航欄和標(biāo)簽欄的title就會變成一樣的，不推薦使用

   header：可以設(shè)置一些導(dǎo)航的屬性，如果隱藏頂部導(dǎo)航欄只要將這個屬性設(shè)置為null

   headerTitle：設(shè)置導(dǎo)航欄標(biāo)題，推薦

   headerBackTitle：設(shè)置跳轉(zhuǎn)頁面左側(cè)返回箭頭后面的文字，默認(rèn)是上一個頁面的標(biāo)題。可以自定義，也可以設(shè)置為null

   headerTruncatedBackTitle：設(shè)置當(dāng)上個頁面標(biāo)題不符合返回箭頭后的文字時，默認(rèn)改成"返回"

   headerRight：設(shè)置導(dǎo)航條右側(cè)?？梢允前粹o或者其他視圖控件

   headerLeft：設(shè)置導(dǎo)航條左側(cè)?？梢允前粹o或者其他視圖控件

   headerStyle：設(shè)置導(dǎo)航條的樣式。背景色，寬高等

   headerTitleStyle：設(shè)置導(dǎo)航欄文字樣式

   headerBackTitleStyle：設(shè)置導(dǎo)航欄‘返回’文字樣式

   headerTintColor：設(shè)置導(dǎo)航欄顏色

   headerPressColorAndroid：安卓獨有的設(shè)置顏色紋理，需要安卓版本大于5.0

   gesturesEnabled：是否支持滑動返回手勢，iOS默認(rèn)支持，安卓默認(rèn)關(guān)閉

screen：對應(yīng)界面名稱，需要填入import之后的頁面

mode：定義跳轉(zhuǎn)風(fēng)格

  card：使用iOS和安卓默認(rèn)的風(fēng)格

  modal：iOS獨有的使屏幕從底部畫出。類似iOS的present效果

headerMode：返回上級頁面時動畫效果

  float：iOS默認(rèn)的效果

  screen：滑動過程中，整個頁面都會返回

  none：無動畫

cardStyle：自定義設(shè)置跳轉(zhuǎn)效果

  transitionConfig： 自定義設(shè)置滑動返回的配置

  onTransitionStart：當(dāng)轉(zhuǎn)換動畫即將開始時被調(diào)用的功能

  onTransitionEnd：當(dāng)轉(zhuǎn)換動畫完成，將被調(diào)用的功能

path：路由中設(shè)置的路徑的覆蓋映射配置

initialRouteName：設(shè)置默認(rèn)的頁面組件，必須是上面已注冊的頁面組件

initialRouteParams：初始路由參數(shù)

路由首頁

react：

image-20200601111638902

在react中初始化時沒有指定hash值，route會匹配路由表里面的根組件”/”

RN：

image-20200601111722749

RN 需要在StackNavigatorConfig里面指定首頁

RN路由使用

image-20200601112012191

在入口路由列表注冊完成之后 在導(dǎo)航器中的每一個頁面，都有 navigation 屬性 通過提供的navigate方法來提供跳轉(zhuǎn)

navigation

在導(dǎo)航器中每一個頁面都有navigation屬性，該屬性有以下幾個屬性/方法

navigate 跳轉(zhuǎn)到其他頁面 常用參數(shù)如下

routeName 導(dǎo)航器中配置的路由名稱

params 傳遞到下一個頁面的參數(shù)

state：state 里面包含有傳遞過來的參數(shù) params 、 key 、路由名稱 routeName

setParams 更改當(dāng)前頁面路由參數(shù)（后面詳細(xì)介紹）

goBack： 回退可穿參數(shù)

navigate

setParams

（Onboarding 是指用戶第一次使用產(chǎn)品時認(rèn)識、熟悉產(chǎn)品的過程）

往期回顧：

對設(shè)計系統(tǒng)有所認(rèn)識的話應(yīng)該會知道原子設(shè)計（Atomic Design）的重要性，我們也能將同樣的概念應(yīng)用在 onboarding 上，其構(gòu)成從宏觀到微觀分成體驗流程、控件形式與界面元素三個層級。

體驗流程是一個有時序性的旅程，可以由數(shù)個不同的載具表現(xiàn)組合而成；控件則是承載信息而存在的平面，可以放上不同的元素；而界面元素是無法再行分割的對象。

我在每個階段都舉了幾個常見的例子，搭配市面上產(chǎn)品的應(yīng)用方法。

體驗流程

1. 分流 Branching

一個產(chǎn)品通常不會只有一種用戶——使用健身 app 可能是為了減肥，也可能是為了增重；使用協(xié)作產(chǎn)品可能是為了記錄工作成果，也可能是為了管理團(tuán)隊。如果能夠在 onboarding 階段了解用戶的主要意圖、在適量的搜集信息后將用戶分流（記得上篇的避免過度吸收法則嗎？），就能夠打造更切身的體驗。

除了用戶分流之外，還有一些概括性的分流如下：

真正新的使用者 vs. 回流使用者

某些使用者只是因為一些外部因素（手機(jī)掉了、手滑刪掉 app、忘記密碼）而重新登錄/下載產(chǎn)品，他們已經(jīng)接觸過產(chǎn)品的核心價值了，并不需要再次學(xué)習(xí)，這就是為什么跳過（skip）功能很重要。

邀請人 vs. 受邀人

如果邀請人已經(jīng)設(shè)定好群組，受邀人應(yīng)該自動被加入，某些信息也該自動填入，而非讓用戶再填一次，從而導(dǎo)致出錯。

新手 vs. 老手

與專業(yè)領(lǐng)域高度相關(guān)的產(chǎn)品（例如 Adobe 系列、CAD 系列等）還可以將用戶區(qū)分為已經(jīng)很熟悉作業(yè)流程的老手與初學(xué)者等級的新手。老手最重視的是定制化以符合他們習(xí)慣的作業(yè)流程、作業(yè)效率高不高，并且跟其他競品做比較。新手則不然，初次使用產(chǎn)品時的他們也是初次進(jìn)入這個領(lǐng)域，如果能幫助他們更加了解這個領(lǐng)域的大致流程的話會很加分。

△ Photoshop 的豐富資源指引（Rich Tooltips）對于新手來說是一大神助

2. 展示 Showcase

特別點出幾個重點 features，簡單地告知用戶最重要的功能為何、組件在哪里，用戶在登錄產(chǎn)品之后只要知道這幾個主要動作就可以打遍天下無敵手。

△ Slack 指出 channel 和對話框如何使用

當(dāng)產(chǎn)品較為復(fù)雜，難以指出特定 feature 時，也常以影片或圖片來展現(xiàn)產(chǎn)品價值——也就是畫一張大餅給用戶，讓他們想象未來的生活在用了這個產(chǎn)品后會有多便利，或是讓自我感覺提升。

3. 實際演練 Do to Learn

相對于展示，實際演練更著重用戶要親自執(zhí)行。許多研究都證實從做中學(xué)習(xí)的成效，就算只是訓(xùn)練肌肉記憶（muscle memory），也能讓用戶對界面的物理空間更有概念，像是「噢對剛才有做過，我記得按鍵在右上角」。

我們也可以設(shè)計一套 demo 版的試用，像是將 scenario 抓一個出來讓用戶試跑，跑過一個假想的故事情節(jié)后印象會更為深刻。

4. 演化成資源庫 Resource

在初次展示后將用戶引導(dǎo)的數(shù)據(jù)回收再利用，變成每當(dāng)用戶有問題時都隨時可用的資源庫。

載具形式

1. 導(dǎo)覽 Guided Tour

可能是影片，也可能是滑動式 slideshow，但總之是向用戶介紹產(chǎn)品的主要功能或是傳達(dá)產(chǎn)品價值，通常是為了展示的體驗流程所設(shè)置。

2. 指引 Tooltip / Coachmark

用極小的空間指向目標(biāo)物，既可以集中用戶注意力，又不會遮蓋住大部分的使用空間，用戶可以一邊進(jìn)行正規(guī)作業(yè)，一邊通過指引了解不懂的內(nèi)容。

△ Dropbox Paper 用詼諧的語氣鼓勵你開始打字

有一陣子很多產(chǎn)品會將所有指引放在同一張圖上，但其實使用不當(dāng)很容易造成信息過載、注意力分散、之后會很難全數(shù)記住的情況，我的建議是一次一個比較好。

3. 秀給我看 Show Me

通常只會出現(xiàn)在教程中，強(qiáng)迫用戶一定要親自去按到按鍵或執(zhí)行關(guān)鍵動作，切實練習(xí)用戶的肌肉記憶。

界面元素

1. 空白狀態(tài)的行動呼吁 Empty State CTA

擅用空白狀態(tài)是 onboarding 重要的一環(huán)，畢竟許多產(chǎn)品在用戶動作之前可能都沒有太多料，這時候就要運用行動呼吁。

例如 Tumblr 在指導(dǎo)使用者選擇有興趣的領(lǐng)域之后就指出如何 po 內(nèi)容，因為其用戶生成平臺（UGC，User-generated content）的本質(zhì)就是要鼓勵用戶多交流、多產(chǎn)出，平臺才有價值。

2. 進(jìn)度列 Progress Bar

提供進(jìn)度可視化，讓用戶有掌控時間的感覺，而不是不知道自己還要再走幾個步驟而感到不耐煩。

Basecamp 將進(jìn)度列擺在上端，讓使用者知道已經(jīng)快做完這些設(shè)置了

3. 待辦事項 Checklist

人類天生喜歡將事情「全部做完」，欲罷不能：科技如何讓我們上癮？可以協(xié)助我們「引誘」用戶更愿意完成 onboarding 程序。

Bluma Zeigarnik 讓受試者完成某些任務(wù)，但在他們完成另一些任務(wù)前打斷他們，強(qiáng)迫他們開始進(jìn)行其他的任務(wù)。這些受試者會非常不情愿地停下手上正在做的事，有些人會強(qiáng)烈抗議，有些人甚至?xí)鷼?，這顯示出 Zeigarnik 的打斷為他們帶來多么大的壓力。到實驗的最后，受試者清楚記得那些未完成的任務(wù)。如果是打斷后一陣子又讓他們完成的話，就沒有這種效應(yīng)。（摘自 欲罷不能）

4. 跳過 Skip

每次有 onboarding 都會選擇跳過的人舉手！

我喜歡把這稱為不喜歡看桌游規(guī)則的人們，所以在使用中遇到困難時給予提示，對他們來說才是最實用而且最愉悅的，而不是在使用前的紙上談兵。

△ Tumblr 在使用者第一次發(fā)文時才提示如何裝飾文字

設(shè)計 onboarding 時并不是只能選擇一種方法，我們可以靈活運用各種元素。將 onboarding 視為一個旅程，而不是單一元素的無限重復(fù)。我看過大部分最棒的例子都是綜合使用上述多種元素，以下以新興生產(chǎn)力工具 Coda 為例，來看看集上述大成的 onboarding 作品。

在第一次進(jìn)入產(chǎn)品使用引導(dǎo)時，可以自行選擇偏好的學(xué)習(xí)方式——影片或是交互式教學(xué)。

Coda 并沒有強(qiáng)制用戶立刻進(jìn)入 onboarding 模式，而是在呈現(xiàn)主畫面之余，讓我們看到右側(cè)的待辦事項，令人產(chǎn)生「想將之完成」的欲望。

點入后，先有個 setup 內(nèi)容，任務(wù)情境是為了項目經(jīng)理所設(shè)計，但隨著使用教程的進(jìn)行，用戶也能夠聯(lián)想到自己生活中的其他任務(wù)，例如安排家庭旅游、寫系列文案、追蹤買家信息等。

正式進(jìn)入學(xué)習(xí)階段后，進(jìn)度條就出現(xiàn)了。

單純根據(jù)文字?jǐn)⑹?，用戶仍然可能混淆，這時候 Show Me 功能可以減少不必要的誤解。

同上，當(dāng)用專有名詞（此處的 section ）介紹某個界面元素時，將其他無關(guān)緊要的區(qū)域遮蓋住，聚焦在重點區(qū)域，用戶更容易將專有名詞跟界面鏈接在一起。否則單說 section 誰知道是哪一個 section？

結(jié)束時記得給辛苦學(xué)習(xí)的用戶一些獎勵，并且貼心附上下一步，當(dāng)然還是要留給使用者最終決定權(quán)。

完成一項后，Coda 會幫用戶將完成的項目劃除，于是得到立即的回饋。

完成所有步驟之后，原先是教程列的右側(cè)區(qū)域轉(zhuǎn)變成資源列，每當(dāng)使用上遇到困難時就可以尋求各種協(xié)助。

題外話與小結(jié)

Onboarding 并不是只會出現(xiàn)一次，推出多年的產(chǎn)品也仍會時常進(jìn)行。

onboarding 的程序，例如推出新 feature 或有重新設(shè)計（redesign）的時候，目的仍然是讓用戶快速熟悉產(chǎn)品，所以這是身為產(chǎn)品設(shè)計師不可忽視的一環(huán)。

另外，除了 UI/UX 設(shè)計之外，文案寫作也極其重要——如何跟用戶訴說一個吸引人的故事、描繪出他們想象中的自己，也是成功 onboarding 必要元素。

文章來源：優(yōu)設(shè)    作者：