我把整體分為了三個部分
1.空洞的設(shè)計方法（因為大多數(shù)的人對設(shè)計的方法論都處在一個看了、學(xué)了、但是用不上的階段，主要是講在我分享的內(nèi)容中可能會用到的一些設(shè)計理論和方法）
2.很一般的設(shè)計流程（這個優(yōu)化設(shè)計的流程其實千千萬，最重要的還是和真實的項目相結(jié)合，每一個點都值得拿出來寫一個長篇大論，有機會具體來說說）
3.不成熟的實際應(yīng)用（設(shè)計流程大多復(fù)雜而冗長，對于處在初創(chuàng)期或者發(fā)展期的產(chǎn)品來說，可能并沒有那么長的時間線來實踐，這一點也是我想和設(shè)計同行一起探討的問題）
“奧卡姆剃刀原理”是設(shè)計師們耳熟能詳?shù)囊粋€理論，即“如無必要，勿增實體”，在UI\UX設(shè)計中，我的理解是，如果能夠在用戶的行為路徑上和交互方式做出優(yōu)化，就不要增加新的功能。
這個理論會貫穿在整個產(chǎn)品設(shè)計流程中。
用戶體驗五要素，是我們在學(xué)生時代就會聽到的一個理論，但其實對于五要素真的對應(yīng)著什么，意味著什么，可能并沒有一個確切的概念。
我說說我的理解：
這五個要素，從戰(zhàn)略層到表現(xiàn)層，是一個從抽象到具象的過程，是一個易用產(chǎn)品背后必不可少的東西。
戰(zhàn)略層：用戶需求、產(chǎn)品目標——就是說在使用完這個產(chǎn)品之后，能不能很好的滿足了用戶的需求，達沒達成做這個產(chǎn)品的目的。
范圍層：在產(chǎn)品定位明確的情況下，我們要有什么樣的功能和內(nèi)容——具體需求
結(jié)構(gòu)層：各頁面、功能的聯(lián)系，用戶通過一個什么樣的路徑、什么樣的層級關(guān)系完成一個流程
架構(gòu)層：按鈕、控件、圖片、文本區(qū)域的布局，用戶對頁面的整體感知
表現(xiàn)層：長什么樣，顏色啊、風(fēng)格啊等等）
所謂KANO模型，它和接下來要說的消極選擇、NUF評估篩選都可以理解成為一個需求篩選的方法，他們都能夠幫助設(shè)計師在眾多需求當中，找到最合適和最合理的那個。
KANO模型中，我們可以把需求或者說創(chuàng)意點分成5個屬性
1.魅力/驚喜屬性
用戶意想不到，如果沒有這個功能用戶可能感知不到，但是做了這個功能，用戶會非常驚喜和滿意。（我們有沒有這樣的功能？首頁tab bar動效）
2.期望/期待屬性
做了這個功能，用戶滿意度會提升，否則反之，會降低
3.必備/必要屬性
一個產(chǎn)品的有效性功能，最基本的功能。如果做了用戶滿意度不會提升，覺得理所當然，但是如果沒有，滿意度會大幅下降。
4.無差異因素
做和不做對用戶的影響并不大，用戶也不太在意。
5.反相/錯誤因素
你不做還好，一旦做了用戶反而會反感，降低滿意度。
對于一個產(chǎn)品，最重要的即是必要屬性和期望屬性。
消極選擇其實是我們在生活當中也用得到的篩選方法，簡單來說就是：當我們想到的兩個idea都能用來解決一個問題，那么我們要選這兩個當中實現(xiàn)成本低的那個或者說“性價比”最高的那個。
NUF評估篩選相比前兩種方法，就顯得稍微繁復(fù)一點，用起來可能并不如前兩種方法更容易。
它其實是，在新穎、使用、可行三個維度，對我們要篩選的點進行打分，再根據(jù)分值進行篩選。
用起來其實比較消耗時間。
我把這一部分分成了4個步驟，分別是：桌面研究，用戶研究、概念提煉、設(shè)計方案
產(chǎn)品深度使用，提問并分析（比如素養(yǎng)課頁面，有多少卡片類型，有多少內(nèi)容分類？哪些課程點擊率比較高，為什么？等等）-同類產(chǎn)品分析-用戶體驗診斷，舒適體驗和不是體驗-確定設(shè)計方向，產(chǎn)品定位、改版（優(yōu)化）目的、用戶群體、價值點）（確定大致設(shè)計方向，提出假設(shè)，如：經(jīng)過我們上述的研究和分析，發(fā)現(xiàn)豐富、高質(zhì)量的內(nèi)容和清晰的布局，能夠讓用戶有瀏覽和互動欲望，從而達到轉(zhuǎn)化目的
我們一般通過定量問卷和定性訪談來從用戶那里獲得想要的信息點以得出用戶畫像和驗證我們前期的假設(shè)
在做訪談之前，要明確的就是我們要得到什么，或者說我們要訪談用戶的哪些方面
即：用戶習(xí)慣的研究、用戶行為模式的研究、用戶行為動機的研究
在設(shè)置問題時，要明確每個問題的背后我們關(guān)注的點在哪里，不可能在不相干問題中浪費時間。
通過前面的兩個階段，我們已經(jīng)可以得到很多東西了：完整清晰的用戶畫像、同理心地圖、As is 旅程圖。我們通過這些東西，找到我們可以優(yōu)化、可以提升用戶體驗的地方，即機會點，然后利用我們之前提到的篩選方法，進行創(chuàng)意決策。
（同理心地圖）
（As is 旅程圖 來自：池喜太厚）
通過前面完整的研究和決策，在此階段，得出交互設(shè)計方案、UI設(shè)計方案等等
這一部分是我想和大家探討的，前面所說的設(shè)計流程，多數(shù)時候在實際工作當中應(yīng)用起來并不容易，這也是很多設(shè)計師對設(shè)計方法嗤之以鼻的原因，覺得設(shè)計方法都是玄學(xué)，胡說胡有理，這里我也說說我的一些思考。
在我們?nèi)粘５墓ぷ鳟斨幸焉鲜龅乃辛鞒潭甲叩?，所有設(shè)計方法都應(yīng)用，顯然是不現(xiàn)實的。而且，在產(chǎn)品的不同階段，優(yōu)化和迭代的驅(qū)動力是不同的。在初創(chuàng)和成長階段，一般為問題驅(qū)動，在成熟期，一般為價值驅(qū)動。
也就是說，平時的工作可能是一個，發(fā)現(xiàn)問題到解決問題的過程，我們需要把成熟的方法和流程進行拆分，進行小部分流程的應(yīng)用，這樣也能夠讓我們得出一個合理的設(shè)計方案。
轉(zhuǎn)自：站酷-鹿爺不是咸魚
保持好奇，巧妙融合，追求卓越，自然而然
在網(wǎng)上找UX汽車相關(guān)的材料和文章是相當困難的。（學(xué)習(xí)君說：表示相當贊同：（ ）盡管有關(guān)移動和臺式設(shè)備UX的信息太多，但要獲得關(guān)于HMI（人機交互）原理的見識似乎要困難得多。為什么？
我的回答是，與為手持設(shè)備和計算機進行設(shè)計相比，這可能是一門利基學(xué)科，再加上汽車屏幕出現(xiàn)的時間不長。當然，車輛上的用戶體驗不僅僅是屏幕，只有旋鈕和物理按鈕時已經(jīng)是用戶體驗了，但是在這種知識上也沒有太多分享。
但是，主要原因可能是缺乏標準化。如果您現(xiàn)在看一下市場，您會發(fā)現(xiàn)有太多不同的方法和解決方案（滿足相同的需求），很難提出一套共享的規(guī)則。屏幕可以是橫向或縱向屏幕，可以是直角或傾斜角度，可以是一個或2個或3個或更多，超寬或更大的正方形，儀表板上的高度或膝蓋以下的高度，等等。與這種混亂相比，我們在手機上擁有的屏幕尺寸數(shù)量似乎是在開玩笑。
另一個原因是所有車載系統(tǒng)都需要非常全面的測試。用戶在可能致命的情況下與這些對象進行交互。因此，測試必須絕對優(yōu)先。搞砸移動應(yīng)用程序上的按鈕的位置或大小可能會帶來麻煩，但在汽車操作系統(tǒng)上這樣做（我不是說“信息娛樂”，因為在這一點上，它是一個簡化的術(shù)語）會造成生命損失。上面提到的缺乏標準化使得很難將先前測試的結(jié)果用于其他系統(tǒng)并在其他系統(tǒng)上重用。
各種研究表明，黑暗的UI在汽車環(huán)境中是最安全的選擇。深色界面可減少干擾和眩光，但是，存在一個組件，從暗模式切換為亮模式可能有助于提高可讀性，這就是導(dǎo)航圖。在幾乎所有導(dǎo)航系統(tǒng)中，地圖都會自動從暗切換為亮，反之亦然。
Android Auto
文字應(yīng)略讀，因此所有的號召性用語，菜單和所有文字通常都應(yīng)保持最少。除非是在不運動的情況下閱讀的文本，否則任何文本都不應(yīng)排在兩行或更多行上。
眼睛到中央顯示器的平均距離約為60厘米/ 24英寸。該數(shù)字只是根據(jù)市場上最常見的配置進行的平均測量，但是同樣，由于沒有適當?shù)臉藴?，因此該距離可能會有很大差異。
假定此措施為有效基準，則在運動情況下字體的最小尺寸為5.3 / 6毫米（不同的研究表明最佳做法略有不同）?？紤]到1mm為6.299 dp（@ 160dpi），則文本應(yīng)為34/38像素高，用于應(yīng)該在行駛時讀取的文本。
應(yīng)該只有一個主要動作，而第二個動作則盡可能少。同樣，我們希望用戶快速瀏覽并一眼就能找到所需的內(nèi)容。
（美國）美國國家公路交通安全管理局（NHTSA）指南指出，駕駛員應(yīng)該能夠在1.5秒的一系列掃視中完成一項任務(wù)，并且花在離開道路上的累積時間不超過12秒。
Apple CarPlay — phone call: 1 primary CTA
自從誕生以來，車載操作系統(tǒng)已超越了信息娛樂功能。通過鏡像智能手機甚至系統(tǒng)內(nèi)部的鏡像，我們可以訪問多種功能，例如消息傳遞，日歷和提醒，流視頻等等。但是，用戶在使用這些系統(tǒng)時要尋找的主要功能是3：
音樂/播客/有聲讀物
導(dǎo)航
撥打/接聽電話
這三個主要功能在駕駛時應(yīng)該比其他功能更醒目且易于使用。
圖標優(yōu)于文本標簽，但圖標的含義必須絕對清楚，不能解釋誤解。圖標標簽的字體大小可以小于第3點指示的最小字體大小。
Porsche Panamera UI
駕駛情況下的理想對比度至少應(yīng)為7：1，因此絕大多數(shù)系統(tǒng)都將白色（或淺灰色）變成黑色（或深灰色）。
對于行駛中未使用/讀取的組件，最小值應(yīng)為4.5：1。
旋鈕和物理按鈕的性能仍然優(yōu)于GUI組件，這是由于其具有肌肉內(nèi)存映射功能，觸摸屏上的可視元素要求駕駛員每次查看屏幕。但是，數(shù)字接口的靈活性毋庸置疑，世界正在朝這個方向發(fā)展。盡管大多數(shù)（如果不是全部）現(xiàn)代觸摸屏都支持各種類型的交互，例如您的常規(guī)平板電腦，但由于易于執(zhí)行，因此它們是首選的：
單點
向左/向右/向上/向下滑動
滾動（帶有捕捉）
應(yīng)避免使用其他更復(fù)雜的手勢，例如觸摸和按住，雙擊，捏合，多點觸摸手勢，或者在非運動情況下使用。
關(guān)于滾動的注意事項：在列表或卡片上自由滾動不是理想的選擇。垂直和水平滾動動作均應(yīng)具有捕捉效果，以始終將滾動項鎖定在同一位置
Scroll with snapping on the left, free on the right
非接觸手勢是許多OEM嘗試的新事物。目前，這項技術(shù)似乎還遠遠不夠完美，但是除此之外，在這種情況下使用的手勢通常并沒有真正令人難忘和自然。
雖然語音控制似乎是理想的選擇，但根據(jù)研究，在某些情況下，精神工作量可能會超出預(yù)期。在VUI并不是真正的“對話式”的較早系統(tǒng)上，情況更是如此，諸如Google Assistant或Siri之類的現(xiàn)代助手對信息較長的字符串的理解程度更高，從而減少了用語表達命令的精力。
但是，我們應(yīng)該考慮不能選擇說話的情況，例如，當嬰兒在后座上睡覺或某人有言語障礙時，并提供一種安全，可視/觸覺的方式來執(zhí)行所有動作。
與移動設(shè)備甚至與帶有臺式計算機和椅子的辦公室設(shè)置不同，在汽車中，座椅相對于屏幕呈固定角度，屏幕也固定在適當?shù)奈恢谩?/strong>因此，必須考慮屏幕的可達性及其可讀性。考慮到左側(cè)的駕駛員，屏幕右側(cè)的元素將導(dǎo)致可讀性和可訪問性降低（當然，在方向盤位于右側(cè)的汽車中會發(fā)生相反的情況）。
避免使用重影按鈕，輔助功能應(yīng)非常清晰可見。主要行動和次要行動均應(yīng)清晰可辨
Tesla Model 3 UI
當然，這也不意味著丑陋（不幸的是，那里有一些丑陋的車載體驗）。但是，在為車載屏幕設(shè)計時，您必須考慮告別微妙的色調(diào)，細膩的對比度，筆觸細膩的圖標，淺色字體，細小的文字……
極簡主義受到歡迎，但它是由更少的可見組件組成的極簡主義。
正如本文開頭所述，這些原則只是經(jīng)驗法則，不能以任何方式跳過嚴格的測試。但是，如果您是第一次使用智能手機和計算機的UX來接觸汽車的HMI，那么這可能是您開始著手涉足這一復(fù)雜學(xué)科的起點。
原理
keyCode 對于keypress 事件，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對于 keydown 和 keyup 事件，它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的布局相關(guān)。 因此我們可以根據(jù)keycode返回的字符碼來判斷用戶所按下的鍵，下面就是一個用于測試上下左右按鍵的js代碼，經(jīng)過我的測試之后，返回37 38 39 40；
window.onload = function(){
var box = document.getElementById("box");
document.onkeydown = function(event){
event = event || window.event;
console.log(event.keyCode);
}
};
3
3.方塊的移動實際上就是坐標的改變，因此需要offsetLeft 和offsetTop 來獲得當前方塊的坐標，然后將坐標進行一定的更改，就可以實現(xiàn)移動的效果了，下面給出代碼
window.onload = function() {
document.onkeydown = function(event) {
event = event || window.event;
//設(shè)置移動速度
var speed = 10;
//當ctrl和方向按鍵同時按下時，提升移動速度
if(event.ctrlKey) {
speed = 50;
}
//獲取div
var box01 = document.getElementById("box01");
switch(event.keyCode) {
/*keyCode返回按下按鍵的編碼
* 37 向左
* 38向上
* 39向右
* 40向下
*/
case 37:
box01.style.left = box01.offsetLeft - speed + "px";
break;
case 39:
box01.style.left = box01.offsetLeft + speed + "px";
break;
case 38:
box01.style.top = box01.offsetTop - speed + "px";
break;
case 40:
box01.style.top = box01.offsetTop + speed + "px";
break;
}
};
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box01 {
width: 100px;
height: 100px;
background-color: #008000;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function() {
//獲取div
var box01 = document.getElementById("box01");
//設(shè)置移動速度
var speed = 10;
//設(shè)置移動的方向
var dir = 0;
setInterval(function() {
switch(dir) {
/*keyCode返回按下按鍵的編碼
* 37 向左
* 38向上
* 39向右
* 40向下
*/
case 37:
box01.style.left = box01.offsetLeft - speed + "px";
break;
case 39:
box01.style.left = box01.offsetLeft + speed + "px";
break;
case 38:
box01.style.top = box01.offsetTop - speed + "px";
break;
case 40:
box01.style.top = box01.offsetTop + speed + "px";
break;
}
}, 50)
document.onkeydown = function(event) {
event = event || window.event;
//當ctrl和方向按鍵同時按下時，提升移動速度
if(event.ctrlKey) {
speed = 50;
} else {
speed = 10;
}
//使dir等于keycode的值
dir = event.keyCode;
//當鼠標松開時，停止移動 ---如果不寫這一個會造成無法停止移動的效果
document.onkeyup = function() {
dir = 0;
};
};
};
</script>
</head>
<body>
<div id="box01"></div>
</body>
</html>
————————————————
版權(quán)聲明：本文為CSDN博主「loving-cat」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42878211/article/details/104558443
vuex的基礎(chǔ)
1,狀態(tài)管理(共享)
緩存數(shù)據(jù)==>內(nèi)存， 只要刷新頁面，數(shù)據(jù)就丟了
訂單，詳情等，，，不適用vuex緩存數(shù)據(jù)
用于
非父子通信的問題
緩存后端數(shù)據(jù)，提高用戶體驗
注意：
vuex只能有一個store,
為了防止多人修改，我們切割成子store, 再合并成唯一一個大的store對象
模塊寫法
import Vue from 'vue'
import Vuex from 'vuex'
import cinema from './module/cinemaModule'
import tabbar from './module/tabbarshowModule'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
}, // "全局"狀態(tài)
mutations:{
},//唯一修改狀態(tài)的地方
//異步處理
actions:{
},
// 對上面的“全局狀態(tài)”進行數(shù)據(jù)處理， 類似于vue中的計算屬性
getters:{
},
modules:{
cinema,
tabbar
}
})
export default store
const module = {
namespaced:true, //命名空間
state :{
cinemaList:[]
},
actions:{
store.commit("setCinemaList",res.data.data.cinemas) //支持傳參
},
mutations:{
setCinemaList(state,data){
console.log("setCinemaList",data)
state.cinemaList = data
}
},
getters:{
topDataList(state){
//state形參s， vuex自動調(diào)用時候，傳來值
return state.cinemaList.slice(0,5)
}
}
}
export default module
import createPersistedState from "vuex-persistedstate"; //在index.js頁面加入這個插件
// 加入下面的代碼
const store = new Vuex.Store({
plugins: [createPersistedState({
reducer(val){
return {
user: val.user
}
}
})]
————————————————
版權(quán)聲明：本文為CSDN博主「m0_46436313」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/m0_46436313/article/details/104572076
中介者對象踐行了最少知識原則，指一個對象盡可能少的了解別的對象，從而盡量減少對象間耦合程度。這樣各個對象只需關(guān)注自身實現(xiàn)邏輯，對象間的交互關(guān)系交由中介者對象來實現(xiàn)和維護。
需求背景：
手機購買頁面，在購買流程中，可以選擇手機的顏色及輸入購買數(shù)量，同時頁面有兩個展示區(qū)域，分別向用戶展示剛選擇好的顏色和數(shù)量。還有一個按鈕動態(tài)顯示下一步的操作，我們需要查詢該顏色手機對應(yīng)的庫存，如果庫存數(shù)量少于這次購買的數(shù)量，按鈕將被禁用并顯示庫存不足，反之按鈕可以點擊并顯示放入購物車。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>中介者模式 購買商品</title>
</head>
<body>
選擇顏色：
<select id="colorSelect">
<option value="">請選擇</option>
<option value="red">紅色</option>
<option value="blue">藍色</option>
</select>
輸入購買數(shù)量：
<input type="text" id="numberInput">
您選擇了顏色：<div id="colorInfo"></div><br>
您輸入了數(shù)量：<div id="numberInfo"></div><br>
<button id="nextBtn" disabled>請選擇手機顏色和購買數(shù)量</button>
</body>
<script>
// 最初級的寫法
var colorSelect = document.getElementById('colorSelect'),
numberInput = document.getElementById('numberInput'),
colorInfo = document.getElementById('colorInfo'),
numberInfo = document.getElementById('numberInfo'),
nextBtn = document.getElementById('nextBtn');
var goods = {
'red': 3,
'blue': 6
}
colorSelect.onchange = function(){
var color = this.value,
number = numberInput.value,
stock = goods[color]
colorInfo.innerHTML = color;
if(!color){
nextBtn.disabled = true;
nextBtn.innerHTML = '請選擇手機顏色';
return;
}
if( ( (number-0) | 0 ) !== number-0 ){ //用戶輸入的購買數(shù)量是否為正整數(shù)
nextBtn.disabled = true;
nextBtn.innerHTML = '請輸入正確的購買數(shù)量';
return;
}
if(number > stock){ //當前選擇數(shù)量大于庫存量
nextBtn.disabled = true;
nextBtn.innerHTML = '庫存不足';
return;
}
nextBtn.disabled = false;
nextBtn.innerHTML = '放入購物車';
}
numberInput.oninput = function(){
var color = colorSelect.value,
number = this.value,
stock = goods[color]
colorInfo.innerHTML = color;
if(!color){
nextBtn.disabled = true;
nextBtn.innerHTML = '請選擇手機顏色';
return;
}
if( ( (number-0) | 0 ) !== number-0 ){ //用戶輸入的購買數(shù)量是否為正整數(shù)
nextBtn.disabled = true;
nextBtn.innerHTML = '請輸入正確的購買數(shù)量';
return;
}
if(number > stock){ //當前選擇數(shù)量大于庫存量
nextBtn.disabled = true;
nextBtn.innerHTML = '庫存不足';
return;
}
nextBtn.disabled = false;
nextBtn.innerHTML = '放入購物車';
}
</script>
</html>
在上個示例中，對象間聯(lián)系高度耦合，只是兩個輸入框還好，但如果有多個的話，相互聯(lián)系就非常復(fù)雜了，此時就要考慮用到中介者模式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>中介者模式 購買商品</title> </head> <body> 選擇顏色： <select id="colorSelect"> <option value="">請選擇</option> <option value="red">紅色</option> <option value="blue">藍色</option> </select> 選擇內(nèi)存： <select id="memorySelect"> <option value="">請選擇</option> <option value="32G">32G</option> <option value="16G">16G</option> </select> 輸入購買數(shù)量： <input type="text" id="numberInput"> 您選擇了顏色：<div id="colorInfo"></div><br> 您選擇了內(nèi)存：<div id="memoryInfo"></div><br> 您輸入了數(shù)量：<div id="numberInfo"></div><br> <button id="nextBtn" disabled>請選擇手機顏色、內(nèi)存和購買數(shù)量</button> </body> <script> var goods = { 'red|32G': 3, 'red|16G': 0, 'blue|32G': 1, 'blue|16G': 6 } //引入中介者 var mediator = (function(){ var colorSelect = document.getElementById('colorSelect'), memorySelect = document.getElementById('memorySelect'), numberInput = document.getElementById('numberInput'), colorInfo = document.getElementById('colorInfo'), memoryInfo = document.getElementById('memoryInfo'), numberInfo = document.getElementById('numberInfo'), nextBtn = document.getElementById('nextBtn'); return { changed: function(obj){ var color = colorSelect.value, memory = memorySelect.value, number = numberInput.value, stock = goods[color + '|' + memory]; if(obj == colorSelect){ //如果改變的是選擇顏色下拉框 colorInfo.innerHTML = color; }else if(obj == memorySelect){ memoryInfo.innerHTML = memory; }else if(obj == numberInput){ numberInfo.innerHTML = number; } if(!color){ nextBtn.disabled = true; nextBtn.innerHTML = '請選擇手機顏色'; return; } if(!memory){ nextBtn.disabled = true; nextBtn.innerHTML = '請選擇手機內(nèi)存'; return; } if(!number){ nextBtn.disabled = true; nextBtn.innerHTML = '請?zhí)顚懯謾C數(shù)量'; return; } if( ( (number-0) | 0 ) !== number-0 ){ //用戶輸入的購買數(shù)量是否為正整數(shù) nextBtn.disabled = true; nextBtn.innerHTML = '請輸入正確的購買數(shù)量'; return; } if(number > stock){ //當前選擇數(shù)量大于庫存量 nextBtn.disabled = true; nextBtn.innerHTML = '庫存不足'; return; } nextBtn.disabled = false; nextBtn.innerHTML = '放入購物車'; } } })() colorSelect.onchange = function(){ mediator.changed(this) } memorySelect.onchange = function(){ mediator.changed(this) } numberInput.oninput = function(){ mediator.changed(this) } //以后如果想要再增加選項，如手機CPU之類的，只需在中介者對象里加上相應(yīng)配置即可。 </script> </html>在實際開發(fā)中，還是要注意選擇利弊，中介者對象因為包含對象間交互的復(fù)雜性，所以維護成本可能也會較高。在實際開發(fā)中，最優(yōu)目的還是要快速完成項目交付，而非過度設(shè)計和堆砌模式。有時對象間的耦合也是有必要的，只有當對象間復(fù)雜耦合確實已經(jīng)導(dǎo)致調(diào)用與維護難以為繼，才考慮用中介者模式。
————————————————
版權(quán)聲明：本文為CSDN博主「一期一會」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_34832846/article/details/85989945
彈性布局（Flex）
隨著移動互聯(lián)網(wǎng)的發(fā)展，對于網(wǎng)頁布局來說要求越來越高，而傳統(tǒng)的布局方案對于實現(xiàn)特殊布局非常不方便，比如垂直居中。
2009年，W3C 提出了一種新的方案----Flex 布局，可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項功能。
下面是一些彈性布局的基本語法：
兩部分：
1. 語法是添加到父容器上的
display : flex;（彈性盒子的標志哦?。。。? flex-direction: row; 布局的排列方向 （主軸排列方向）
row 默認值，顯示為行。方向為當前文檔水平流方向，默認情況下是從左往右。
row-reverse 顯示為行。但方向和row屬性值是反的
column 顯示為列
column-reverse 顯示為列。但方向和column屬性值是反的
flex-wrap : nowrap; 是否進行換行處理。
nowrap; 默認值，不換行處理
wrap; 換行處理
wrap-reverse; 反向換行
flex-flow : flex-direction flex-wrap 復(fù)合寫法 (是有順序的)。
justify-content ; 屬性決定了主軸方向上子項的對齊和分布方式。
flex-start ： 子項都去起始位置對齊。
flex-end ： 子項都去結(jié)束位置對齊。
center ： 子項都去中心位置對齊。
space-between : 表現(xiàn)為兩端對齊。多余的空白間距在元素中間區(qū)域分配，兩邊沒寬。
space-around : 邊緣兩側(cè)的空白只有中間空白寬度一半即每個塊都有左右間距。
space-evenly :每個flex子項兩側(cè)空白間距完全相等。
align-items : 每一行中的子元素上下對齊方式。
stretch;默認值，flex子項拉伸
flex-start;容器頂部對齊
center;容器居中對齊
flex-end;容器底部對齊
align-content : 跟justify-content相反的操作。側(cè)軸的對齊方式。(最少需要兩行才能看出效果，因為他是多行的一個上下對齊方式)
默認：多行下，有幾行就會把容器劃分為幾部分，默認就是stretch拉伸的。
值跟justify-content取值是相同的。
2. 語法是添加到子容器上的？
order : 排序(值越大越后)
0：默認值 eg:1234
1：放在后面 eg:1342
-2：放在前面 eg:2134
flex-grow : 擴展 ( 想看到擴展的效果，必須有空隙 )
0 : 默認值 , 不去擴展
0.5：占空隙的一半
1 : 去擴展 , 會把空白區(qū)域全部沾滿
（ 注：子元素會按照設(shè)置的比例值來分配空隙，如果比例值總和小于1，那么會有空隙，如果比例值總和大于等于1，那么就沒有空隙。）
flex-shrink : 收縮
正常默認值是1
0表示不收縮，.5收縮小一些，2收縮大一些。（大小是跟正?？s放1進行比較的）
flex-basis : 跟flex-shrink/flex-grow很像。
flex-shrink/flex-grow是設(shè)置一個比例值，flex-basis是設(shè)置一個具體值。
flex : 一種復(fù)合寫法
flex-grow flex-shrink flex-basis
flex:1;
flex : 1 1 0
flex:0;
flex : 0 1 0
algin-self: 跟align-items操作很像，區(qū)別就是只是針對某一個子項。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
a{text-decoration: none;}
img{display: block;}
.box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;}
.box1 div{width: 30px;height: 30px;border-radius:50%;background: black;}
.box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
.box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
.box2 div:nth-of-type(1){align-self: flex-start;}
.box2 div:nth-of-type(2){align-self: flex-end;}
.box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
.box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
.box3 div:nth-of-type(1){align-self: flex-start;}
.box3 div:nth-of-type(3){align-self: flex-end;}
.box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
.box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
.box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
.box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
.box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
.box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
.box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
.box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
.box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
#box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid;
perspective: 500px;perspective-origin: right top;}
#box .main{position: relative;width: 150px;height: 150px;margin: 125px;
transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;}
#box .main .box1{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;}
#box .main .box2{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);}
#box .main .box3{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);}
#box .main .box4{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);}
#box .main .box5{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);}
#box .main .box6{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);}
#box:hover .main{transform:rotateY(360deg);}
</style>
</head>
<body>
<div id="box">
<div class="main">
<div class="box1">
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
</div>
<div class="box3">
<div></div>
<div></div>
<div></div>
</div>
<div class="box4">
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
</div>
<div class="box5">
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
</div>
<div class="box6">
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
</div>
</div>
</div>
</body>
</html>
注：默認情況下，在彈性盒子中的子元素的左右排列的。
注：
水平是主軸的時候：默認情況下，當寬高不寫的時候，寬度由內(nèi)容決定，高度由父容器決定。
垂直是主軸的時候：默認情況下，當寬高不寫的時候，寬度由父容器決定，高度由內(nèi)容決定。
注：當子項的總寬度大于父容器的時候，會自動收縮的（彈性的優(yōu)先級是大于自身固定大小的）
注：當子項的內(nèi)容已經(jīng)達到了父容器最小寬高的時候，就會出現(xiàn)溢出的現(xiàn)象。
注：彈性布局中用的頻率比較多的語法：
display : flex;
flex-direction;
justify-content;
align-items;
flex;
注：彈性布局的優(yōu)勢是做一維布局，網(wǎng)格布局的優(yōu)勢是做二維布局。
下面是彈性布局骰子案例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} ul{list-style: none;} a{text-decoration: none;} img{display: block;} .box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;} .box1 div{width: 30px;height: 30px;border-radius:50%;background: black;} .box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;} .box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;} .box2 div:nth-of-type(1){align-self: flex-start;} .box2 div:nth-of-type(2){align-self: flex-end;} .box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;} .box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;} .box3 div:nth-of-type(1){align-self: flex-start;} .box3 div:nth-of-type(3){align-self: flex-end;} .box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;} .box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;} .box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;} .box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;} .box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;} .box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;} .box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;} .box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;} .box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;} #box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid; perspective: 500px;perspective-origin: right top;} #box .main{position: relative;width: 150px;height: 150px;margin: 125px; transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;} #box .main .box1{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;} #box .main .box2{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);} #box .main .box3{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);} #box .main .box4{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);} #box .main .box5{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);} #box .main .box6{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);} #box:hover .main{transform:rotateY(360deg);} </style> </head> <body> <div id="box"> <div class="main"> <div class="box1"> <div></div> </div> <div class="box2"> <div></div> <div></div> </div> <div class="box3"> <div></div> <div></div> <div></div> </div> <div class="box4"> <div> <li></li> <li></li> </div> <div> <li></li> <li></li> </div> </div> <div class="box5"> <div> <li></li> <li></li> </div> <div> <li></li> </div> <div> <li></li> <li></li> </div> </div> <div class="box6"> <div> <li></li> <li></li> </div> <div> <li></li> <li></li> </div> <div> <li></li> <li></li> </div> </div> </div> </div> </body> </html>實際效果：
————————————————
版權(quán)聲明：本文為CSDN博主「GLINLIND」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/GLINLIND/article/details/104572530
javascript中window.open()與window.location.href的區(qū)別
window.open(‘index.html’) 表示新增一個窗口打開 index.html 這個頁面，并不刷新
location.href(‘index.html’) 表示在當前窗口重定向到新頁面，打開并刷新 index.html 這個頁面
window.location 是 window 對象的屬性，用來替換當前頁，也就是重新定位當前頁
而window.open 是 window 對象的方法，是用來打開一個新窗口的函數(shù)
// 打開新頁面
// 注意：有些瀏覽器的安全設(shè)置會將window.open()屏蔽，例如避免彈出廣告窗
window.open('./index.html');
// 在原窗口打開新頁面
window.location.href＝"./index.html";
window.open()詳解
window.open ('page.html', 'newwindow', 'height=100, width=400,
top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')
參數(shù)解釋： 三個參數(shù)
window.open 彈出新窗口的命令；
‘page.html’ 彈出窗口的文件名；
‘newPage’ 彈出窗口的名字（不是文件名），非必須，可用空’'代替；
height=100 窗口高度；
width=400 窗口寬度；
top=0 窗口距離屏幕上方的象素值；
left=0 窗口距離屏幕左側(cè)的象素值；
toolbar=no 是否顯示工具欄，yes為顯示；
menubar=no 是否顯示菜單欄，yes為顯示；
scrollbars=no 是否顯示滾動欄，yes為顯示；
resizable=no 是否允許改變窗口大小，yes為允許；
location=no 是否顯示地址欄，yes為允許；
status=no 是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開），yes為允許；
常用的js返回與刷新頁面
在此用a標簽舉例
前言：
做網(wǎng)頁項目時想要背景是動態(tài)的，推薦兩個我覺得比較可以的js動態(tài)背景。
隨鼠標的移動而移動的線條，具體效果看圖：
你焦點在哪，那么那里的線條就會匯聚到你的焦點處。
用法：將js聲明到body內(nèi)即可，我是放置在body底部的
<script type="text/javascript" src=";
1
可以鼠標點擊產(chǎn)生字的，如圖：
用法和第一個類似，不過在這個js文件前得先引入jquery:
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script type="text/javascript">
/* 鼠標 */
var a_idx = 0;
jQuery(document)
.ready(
function($) {
$("body")
.click(
function(e) {
var a = new Array("@健身",
"@學(xué)習(xí)", "@機車",
"@攝影", "@自由",
"@考研", "@自律",
"@獨立", "@廚藝",
"@橘子", "@交友",
"@愛媳婦", "@愛家人");
var $i = $("<span></span>")
.text(a[a_idx]);
a_idx = (a_idx + 1)
% a.length;
var x = e.pageX, y = e.pageY;
$i
.css({
"z-index" : 999999999999999999999999999999999999999999999999999999999999999999999,
"top" : y - 20,
"left" : x,
"position" : "absolute",
"font-weight" : "bold",
"color" : "rgb("
+ ~~(255 * Math
.random())
+ ","
+ ~~(255 * Math
.random())
+ ","
+ ~~(255 * Math
.random())
+ ")"
});
$("body").append($i);
$i.animate({
"top" : y - 180,
"opacity" : 0
}, 1500, function() {
$i.remove();
});
});
});
</script>
這里使用的是cdn形式的jquery即不用將jq放入本地文件再引入，直接訪問網(wǎng)絡(luò)上的jq即可，還有就是點擊產(chǎn)生的字可以自行修改。
————————————————
可以自定義一個file選擇文件的按鈕：
思路為：
用定位將自定義的按鈕遮住原來的選擇文件按鈕，
再讓點擊自定義按鈕時觸發(fā)原來的選擇文件按鈕的事件即可
（對此，label可實現(xiàn)）
eg:
html:
css樣式：
結(jié)果圖：
點一下，就可以彈出選擇文件的文件夾啦！
藍藍設(shè)計的小編 http://www.yvirxh.cn