讲一个老东家的故事。

一次产品迭代会上，老板在台上讲到打算重构C端产品框架，想重整标签栏的标签设定。可在讲到这一部分的时候卡壳了，迟迟说不出“标签栏”这个控件名，气氛有那么一丁点尴尬。这时在座的一名产品经理慷慨解囊地说道：底部导航栏！会议得以继续。

嗯，不全错，这么说也算能理解。控件在界面底部，能引导用户切换页面。但如果标签栏把导航栏的名字占了...那原本的导航栏应该叫什么呢？顶部标题栏？那导航栏里的内容控件又应该叫什么？左上角或者右上角的按钮？

接地气的名称让我们一听就懂，直到有一天你打算跳槽，你拿着自己的作品到下家面试，设计总监几个术语啪啪把你问的不知所云。这些“死控件”、“死栏目”在页面上不可或缺，在设计每一个页面时你以为你对它们早已了如指掌，偏偏在关键时刻，它们却六亲不认了。（说多了都是泪，我曾经面试也吃过专业名词的亏，以后有机会再娓娓道来。）

“我又不走形式主义，为什么一定要说专用名词装x呢？接地气的名称不是挺好吗，沟通。”——很简单的道理，如果名词和概念都混淆不清，有没有花功夫在UI设计领域进行深度专研也就一目了然了，还何以谈论如何将它们运用自如呢？——“你连迪丽热妈和古力娜扎都没分清，你敢说你知道什么是真皮沙发？”

于是我的经历，让我产生了一个想法。是时候做一些知识内容沉淀与分享了，不能让更多的人走我踩过的坑。第一期我们便来讲一讲导航栏。

-

01.导航栏究竟在哪里

导航栏 Navigation Bar，也简称为Navbar。一定会有不少刚入门的UI新人，在诸多的Bar控件中，难以区分它所指代的区域。

在iOS上，导航栏是指显示在应用程序顶部，位于状态栏下方的容器区域，层级应高于当前页面内容。

在安卓上，Google公司在Material Design中也赋予了它同样的定义，但是却给了它另一个名称，顶部应用栏（ Top App Bar）。

iOS与安卓的规范与命名区别

请务必要记住：导航栏是用于构架当前屏幕的内容，阐述当前屏幕的状态，并且起到连接父子级页面层次结构的作用。——所以回到开头的小故事，为什么标签栏不能叫做底部导航，因为标签栏是构架了多个屏幕之间平级页面的内容切换。和“导航”的定义没有半毛钱关系。

_

02.规范里告诉我们该怎么做 vs 实际项目我们该怎么做

一个基本的导航栏容器一般承载的信息可能会有：标题；导航按钮；内容控件按钮；其他控件（比如搜索栏、分页标签或分页控件等）；千万别忘了还有分割线。

2.1 导航栏标题

时间倒退回2017年以前，这时候的移动端规范下的导航栏还是循规蹈矩的，样式单一。但随着iPhone X等一系列全面屏手机相继问世后，移动设备在屏幕高度上有了进一步的扩展，界面设计在一屏内的发挥空间也随之增加。iOS11发布后，大标题导航栏设计风格兴起，随后被引入平台规范。

于是现在iOS与Material Design在导航栏上也都定义了两种导航栏标题规范：常规标题与大标题。

常规标题是指在高度为88px（iOS@2x下）的导航容器中，居中放置一个当前页面的标题。标题字号一般为34px-38px（34px为iOS标准规范，但实际项目中可以在尽量在不小于34px标准的情况下根据设计需求确定）。

常规导航不同标题字号的案例及视觉效果

大标题是将导航栏栏高增加到192px（iOS@2x），保留高度为88px的导航容器来承载内容控件按钮，将标题下坠居左。iOS的标准规范定义大标题的字号为68px。但由于英文有大小写区分，在视觉上有一定的层次表现，而中文因为缺少一定的层次结构，并且相同字号的中文视觉大小大于英文，所以大多数时候我们在进行大标题设计时，会适当缩小，一般为56px-64px居多。

大标题不同标题字号的案例及视觉效果

大标题导航栏的优点毋庸置疑，页面留白更多，呼吸感更强，大气现代、逼格更高，因为页面标题巨大，能够帮助用户快速确认当前所处位置；采用统一的大标题，让页面布局风格快速统一。但缺点也显而易见，因为增加了导航栏的高度，导致屏幕利用率降低，一些通过广告变现或更加注重一屏内内容呈现的应用便中和了常规导航与大标题导航的优缺点，进行了风格改进。

改进的大标题案例

那我们如何在常规标题和大标题之间抉择呢，这可不单单是设计风格的问题，还受产品定位与功能的影响。苹果的设计师在Apple Music中实验并验证了一条结论——在内容非常丰富、层级结构较深的产品当中，大标题能够帮用户快速确认自己的位置。

所以我理解的适合使用大标题风格的产品一定是：突出内容呈现而不是功能繁琐的；产品定位更偏向于现代或文艺艺术的；需要快速统一界面风格的。而层级结构需不需要很深，这并不一定，我反而觉得功能越单一、产品体量级越轻的应用，越适合大标题。

所以如此看来，国内使用大标题成功的案例就为数不多了，这可能与中文字体还有国内app产品功能都比较繁琐的原因有关，真正做到了使用大标题快速帮助用户确认自己位置，并且结合了产品特性与风格的，我认为人人都是产品经理的移动端在这方面做的非常棒。

 2.2 导航按钮及内容控件按钮

iOS规定导航按钮位置仅能用于放置返回按钮，可以添加一个层级的面包屑，帮助用户有效地明确当前页面层级；Material Design中，则不仅可以放置返回按钮，还另有作用，菜单图标-用于打开导航抽屉 或者 关闭图标-关闭工具栏。

iOS与安卓的导航按钮区域区别

这一点与iOS的定义有着天壤之别，iOS非常明确地赋予了工具栏的定义，并且将导航栏和工具栏（Toolbars）彻底地分离开，典型案例就是Safari。

iOS明确地将导航栏与工具栏分离开

在内容控件上iOS与Material Design也大相径庭，Material Design不去限制你的内容控件多少，因为它提供了溢出菜单，并可以根据屏宽的变化，自适应释出和收纳溢出菜单中的控件。

而iOS则规定我们，要给内容控件按钮足够多的空间，必要的时候，隐藏导航栏标题也未尝不可。

Material Design的溢出菜单也被运用在iOS端

虽然国内遵从Material Design进行Android应用设计的情况相对较少，但它提供的设计理念与方案却并不局限在安卓平台。

 2.3 分割线

分割线只是一种体现形式，我想要表达的是，别忘记区分导航栏与内容界面的视觉层级关系。Matetial Design提醒我们，顶部应用栏可以与内容位于同一高度，但滚动时，请增加导航栏的视觉高度，让内容在其后方滚动。而iOS则默认采用了背景模糊的方式区分了导航栏与内容区域的层级关系。

区分导航栏与内容区域的层级关系

 2.4 其他控件

关于其他控件，iOS只在规范中提及到了分页控件。苹果设计师考虑到部分场景在当前页面中还存在信息层级结构划分，此时建议可以在导航栏中使用分段控件。

但国内的应用程序早已将导航栏容器的作用发挥到，基于导航栏层级始终高于内容区域的特性，我们通常可以将分段控件、分页标签、搜索栏等等用户可能随时使用的工具放在导航栏中。

导航栏通常会承载的其他控件

-

03.总结

如今我们的生活，到处都是大幅图像广告，纷扰喧闹的各类短视频与直播。这是一个快节奏时代，我们更倾向阅读图像。为什么我们偏爱图像视觉超过文字？从人类进化角度来看，原始时代的祖先通过五感感知着这个世界，其中通过视觉来感知判断生活，其他四感辅助之。即使后面我们发明了文字，但发展至今，对图像的本能吸引力依旧强烈。因为在我们认知的潜意识里图像相较于文字更能让我们快速轻松理解并记忆。

图像如此重要，设计作品中当然也必不可少。因为图片，它能一定程度上决定画面基调；引导视觉流程；调剂平衡多段文字信息的枯燥性，让阅读变得轻松容易。 

在UI设计中，我们经常需要把设计输出物拿给产品经理或者其他有设计决断力的人看，UI设计中图片使用的好与坏，能很大程度上影响着决策者的感知，以及你的设计过稿率。

如下左图：商品视角、调性、细节，都没有右图来的统一、有质感。单看这两张图，会让用户有这样的心理感知：左图感觉像山寨盗版商城；右图则会认为是严肃官方认证商城。所以，在同样页面布局下，不同的图片使用与处理，能让UI页面的品质有较大的感知差异。 

图片的使用如此重要。那么，我们在正式做UI设计前，首先需要弄清楚图片在页面的占比情况以及后续图片的支撑来源问题。

1.了解图片占比与来源

在构思UI页面阶段，首先需要了解以下两个问题：1.图片区域占比问题；2.图片来源问题。当页面图片占比多，且让用户自定义，那么需要预估到APP上线后设计可控率会降低。换句话说，实际上线效果会不尽人意。如下图：由于淘宝和网易严选平台属性不同，在图片品控上就有着不同的视觉感受。当然，不是说淘宝做的不好，而是当一个平台集纳不同的店铺，不同调性的产品类型，即使有图片规范，也难如统一品类、调性的产品来的统一。 

弄清图片内容的可控性问题后，开始进入设计环节，那么我们该如何选择图片？

2.怎样选择以及运用图片

1.是否符合产品气质？

在不同的场合有恰当合适的场景搭配，是十分基础且重要的事情。在UI设计中，任何一个部分的设计以及元素运用都需要为产品服务。图片也不例外。如果你是厨房类APP，头图选用小清新感的图片，就显得不够合适，带有环境食材元素的图片才更让用户有共鸣。 

2.是否能清晰表达产品核心内容？

图片是否主体明确？能一眼正确无误的传达核心内容？会不会因为其他元素元素抢了主体视觉，找不到视觉重点？ 

3.是否美观、有品质、让人想拥有？

图片是否能表达美好生活以及美好品质的向往？光影关系是否自然？图片是否高清有细节？ 

当明白图片如何选择后，还想和你分享一些冷门且重要的图片过稿小技巧。记下来，将大大提升你的设计过稿率。

3.过稿高手图片使用小技巧

1.图片风格统一风格调性

漂亮图片有很多，如果我们都以漂亮为基准，找出来的图片也会形色各异。由于用户的实际使用场景是：浏览一个完整APP，统一风格调性比美更重要。如果商品角度不一样；饱和度高低不同；抽象与具象等，都会形成产品不统一，用户视觉不适应等问题。 

2.图片使用符合场景，让决策者可以看到最后的显示效果

有时我们为了赶时间，直接用图片填充插件，让图片区域自动填充。但我还是想要给到你这样一个建议：一个专业且成熟的设计师，即使是设计初稿，也不能随便拿张图，凑合一下。任何时候的汇报，都需要有着处女座对于事物的完美要求，过自己这关。因为任何时候你的表达与表现，都形成了你在别人心目中专不专业的看法，从而影响着后续的设计话语权问题。如下图都是商城陈列页面，右侧的图片给出上线的实际效果，更贴合产品，方便设计决策者给出建议方向，或做出决策。 

总结

我们都是视觉动物，不管你是否愿意承认：我们常常通过视觉表象，才决定是否愿意去更深入的了解某个东西。

设计就是在做产品视觉表象的表达，我们需要尽可能使用贴切的，漂亮的图片。让UI视觉看起来更加美观，让用户愿意停留，认可以及信赖平台。 

转自：站酷-丘丘的设计笔记 

我把整体分为了三个部分

1.空洞的设计方法（因为大多数的人对设计的方法论都处在一个看了、学了、但是用不上的阶段，主要是讲在我分享的内容中可能会用到的一些设计理论和方法）

2.很一般的设计流程（这个优化设计的流程其实千千万，最重要的还是和真实的项目相结合，每一个点都值得拿出来写一个长篇大论，有机会具体来说说）

3.不成熟的实际应用（设计流程大多复杂而冗长，对于处在初创期或者发展期的产品来说，可能并没有那么长的时间线来实践，这一点也是我想和设计同行一起探讨的问题）

“奥卡姆剃刀原理”是设计师们耳熟能详的一个理论，即“如无必要，勿增实体”，在UI\UX设计中，我的理解是，如果能够在用户的行为路径上和交互方式做出优化，就不要增加新的功能。

这个理论会贯穿在整个产品设计流程中。

用户体验五要素，是我们在学生时代就会听到的一个理论，但其实对于五要素真的对应着什么，意味着什么，可能并没有一个确切的概念。

我说说我的理解：
这五个要素，从战略层到表现层，是一个从抽象到具象的过程，是一个易用产品背后必不可少的东西。

战略层：用户需求、产品目标——就是说在使用完这个产品之后，能不能很好的满足了用户的需求，达没达成做这个产品的目的。

范围层：在产品定位明确的情况下，我们要有什么样的功能和内容——具体需求

结构层：各页面、功能的联系，用户通过一个什么样的路径、什么样的层级关系完成一个流程

架构层：按钮、控件、图片、文本区域的布局，用户对页面的整体感知

表现层：长什么样，颜色啊、风格啊等等）

所谓KANO模型，它和接下来要说的消极选择、NUF评估筛选都可以理解成为一个需求筛选的方法，他们都能够帮助设计师在众多需求当中，找到最合适和最合理的那个。

KANO模型中，我们可以把需求或者说创意点分成5个属性

1.魅力/惊喜属性
用户意想不到，如果没有这个功能用户可能感知不到，但是做了这个功能，用户会非常惊喜和满意。（我们有没有这样的功能？首页tab bar动效）

2.期望/期待属性
做了这个功能，用户满意度会提升，否则反之，会降低

3.必备/必要属性
一个产品的有效性功能，最基本的功能。如果做了用户满意度不会提升，觉得理所当然，但是如果没有，满意度会大幅下降。

4.无差异因素
做和不做对用户的影响并不大，用户也不太在意。

5.反相/错误因素
你不做还好，一旦做了用户反而会反感，降低满意度。

对于一个产品，最重要的即是必要属性和期望属性。

消极选择其实是我们在生活当中也用得到的筛选方法，简单来说就是：当我们想到的两个idea都能用来解决一个问题，那么我们要选这两个当中实现成本低的那个或者说“性价比”最高的那个。

NUF评估筛选相比前两种方法，就显得稍微繁复一点，用起来可能并不如前两种方法更容易。
它其实是，在新颖、使用、可行三个维度，对我们要筛选的点进行打分，再根据分值进行筛选。
用起来其实比较消耗时间。

我把这一部分分成了4个步骤，分别是：桌面研究，用户研究、概念提炼、设计方案

产品深度使用，提问并分析（比如素养课页面，有多少卡片类型，有多少内容分类？哪些课程点击率比较高，为什么？等等）-同类产品分析-用户体验诊断，舒适体验和不是体验-确定设计方向，产品定位、改版（优化）目的、用户群体、价值点）（确定大致设计方向，提出假设，如：经过我们上述的研究和分析，发现丰富、高质量的内容和清晰的布局，能够让用户有浏览和互动欲望，从而达到转化目的

我们一般通过定量问卷和定性访谈来从用户那里获得想要的信息点以得出用户画像和验证我们前期的假设

在做访谈之前，要明确的就是我们要得到什么，或者说我们要访谈用户的哪些方面
即：用户习惯的研究、用户行为模式的研究、用户行为动机的研究

在设置问题时，要明确每个问题的背后我们关注的点在哪里，不可能在不相干问题中浪费时间。

通过前面的两个阶段，我们已经可以得到很多东西了：完整清晰的用户画像、同理心地图、As is 旅程图。我们通过这些东西，找到我们可以优化、可以提升用户体验的地方，即机会点，然后利用我们之前提到的筛选方法，进行创意决策。

（同理心地图）

（As is 旅程图 来自：池喜太厚）

通过前面完整的研究和决策，在此阶段，得出交互设计方案、UI设计方案等等

这一部分是我想和大家探讨的，前面所说的设计流程，多数时候在实际工作当中应用起来并不容易，这也是很多设计师对设计方法嗤之以鼻的原因，觉得设计方法都是玄学，胡说胡有理，这里我也说说我的一些思考。

在我们日常的工作当中要把上述的所有流程都走到，所有设计方法都应用，显然是不现实的。而且，在产品的不同阶段，优化和迭代的驱动力是不同的。在初创和成长阶段，一般为问题驱动，在成熟期，一般为价值驱动。

也就是说，平时的工作可能是一个，发现问题到解决问题的过程，我们需要把成熟的方法和流程进行拆分，进行小部分流程的应用，这样也能够让我们得出一个合理的设计方案。

转自：站酷-鹿爷不是咸鱼

原理

1. 利用键盘控制移动，则需要了解onkeydown函数，表示某个按键被按下，可以以此绑定一个事件响应函数，当键盘被按下时候，触发此事件，进行移动
   

2. keyCode 对于keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 因此我们可以根据keycode返回的字符码来判断用户所按下的键，下面就是一个用于测试上下左右按键的js代码，经过我的测试之后，返回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 来获得当前方块的坐标，然后将坐标进行一定的更改，就可以实现移动的效果了，下面给出代码

   window.onload = function() {
               document.onkeydown = function(event) {
                   event = event || window.event;
                   //设置移动速度
                   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;
   
                   }
               };
   
           };
   

   
   

   
   

   这样就可以简单实现方块的移动，但是此时我们会发现一个问题，当我们进行移动的时候，按住按键不松手，理论上方块应该直接平滑的进行移动，但实际上并非如此，第一下它会有一个小的停顿，这实际上是浏览器防止误触所设置的，因此我们需要对此进行优化
   解决方案
   
   这里我采用了定时器的做法来解决这个问题，因为控制移动的因素有两个，一个是控制方向，一个是控制速度，控制方向没有问题，因此我们需要改变速度
   setInterval（function(){},time）;这是一个定时器，我们只需要在time时间内调用一次函数，就可以解决停顿的问题了
   下面附上修改后的完整代码
   
   
   

   <!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");
               //设置移动速度
               var speed = 10;
               //设置移动的方向
               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>

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

版权声明：本文为CSDN博主「loving-cat」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_42878211/article/details/104558443

vuex的基础

1,状态管理(共享)

缓存数据==>内存， 只要刷新页面，数据就丢了

订单，详情等，，，不适用vuex缓存数据



用于



非父子通信的问题

缓存后端数据，提高用户体验

注意：

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: {

  }, // "全局"状态
  mutations:{

  },//唯一修改状态的地方
  //异步处理
  actions:{
  },
  // 对上面的“全局状态”进行数据处理， 类似于vue中的计算属性
  getters:{
  },

  modules:{
    cinema,
    tabbar
  }
})
export default store

2,子模块的写法

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自动调用时候，传来值
      return state.cinemaList.slice(0,5)
    }
  }
}

export default module

3,为了防止页面刷新丢失数据,所以还得找到其他插件来帮忙

import createPersistedState from "vuex-persistedstate"; //在index.js页面加入这个插件

// 加入下面的代码
const store = new Vuex.Store({
  plugins: [createPersistedState({
    reducer(val){
      return {
        user: val.user
      }
    }
  })]

————————————————
版权声明：本文为CSDN博主「m0_46436313」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_46436313/article/details/104572076

中介者对象践行了最少知识原则，指一个对象尽可能少的了解别的对象，从而尽量减少对象间耦合程度。这样各个对象只需关注自身实现逻辑，对象间的交互关系交由中介者对象来实现和维护。



需求背景：



手机购买页面，在购买流程中，可以选择手机的颜色及输入购买数量，同时页面有两个展示区域，分别向用户展示刚选择好的颜色和数量。还有一个按钮动态显示下一步的操作，我们需要查询该颜色手机对应的库存，如果库存数量少于这次购买的数量，按钮将被禁用并显示库存不足，反之按钮可以点击并显示放入购物车。

<!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>

    输入购买数量：
    <input type="text" id="numberInput">

    您选择了颜色：<div id="colorInfo"></div><br>
    您输入了数量：<div id="numberInfo"></div><br>

    <button id="nextBtn" disabled>请选择手机颜色和购买数量</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 ){      //用户输入的购买数量是否为正整数
        nextBtn.disabled = true;
        nextBtn.innerHTML = '请输入正确的购买数量';
        return;
    }

    if(number > stock){     //当前选择数量大于库存量
        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 ){      //用户输入的购买数量是否为正整数
        nextBtn.disabled = true;
        nextBtn.innerHTML = '请输入正确的购买数量';
        return;
    }

    if(number > stock){     //当前选择数量大于库存量
        nextBtn.disabled = true;
        nextBtn.innerHTML = '库存不足';
        return;
    }

    nextBtn.disabled = false;
    nextBtn.innerHTML = '放入购物车';
}

</script>
</html>

在上个示例中，对象间联系高度耦合，只是两个输入框还好，但如果有多个的话，相互联系就非常复杂了，此时就要考虑用到中介者模式。

<!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>

    选择内存： 
    <select id="memorySelect">
        <option value="">请选择</option>
        <option value="32G">32G</option>
        <option value="16G">16G</option>
    </select>

    输入购买数量：
    <input type="text" id="numberInput">

    您选择了颜色：<div id="colorInfo"></div><br>
    您选择了内存：<div id="memoryInfo"></div><br>
    您输入了数量：<div id="numberInfo"></div><br>

    <button id="nextBtn" disabled>请选择手机颜色、内存和购买数量</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 = '请选择手机内存';
                    return;
                }

                if(!number){
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '请填写手机数量';
                    return;
                }

                if( ( (number-0) | 0 ) !== number-0 ){      //用户输入的购买数量是否为正整数
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '请输入正确的购买数量';
                    return;
                }

                if(number > stock){     //当前选择数量大于库存量
                    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之类的，只需在中介者对象里加上相应配置即可。
</script>
</html>

在实际开发中，还是要注意选择利弊，中介者对象因为包含对象间交互的复杂性，所以维护成本可能也会较高。在实际开发中，最优目的还是要快速完成项目交付，而非过度设计和堆砌模式。有时对象间的耦合也是有必要的，只有当对象间复杂耦合确实已经导致调用与维护难以为继，才考虑用中介者模式。

————————————————
版权声明：本文为CSDN博主「一期一会」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34832846/article/details/85989945

弹性布局（Flex）

随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

下面是一些弹性布局的基本语法：

两部分：

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 复合写法 (是有顺序的)。
        justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。  
            flex-start ： 子项都去起始位置对齐。
            flex-end ： 子项都去结束位置对齐。
            center ： 子项都去中心位置对齐。
            space-between : 表现为两端对齐。多余的空白间距在元素中间区域分配，两边没宽。 
            space-around : 边缘两侧的空白只有中间空白宽度一半即每个块都有左右间距。
            space-evenly :每个flex子项两侧空白间距完全相等。
        align-items : 每一行中的子元素上下对齐方式。
            stretch;默认值，flex子项拉伸
            flex-start;容器顶部对齐
            center;容器居中对齐
            flex-end;容器底部对齐
        align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)
            默认：多行下，有几行就会把容器划分为几部分，默认就是stretch拉伸的。
            值跟justify-content取值是相同的。

2. 语法是添加到子容器上的？
        order : 排序(值越大越后)
            0：默认值      eg:1234
            1：放在后面    eg:1342
            -2：放在前面   eg:2134
        flex-grow : 扩展 ( 想看到扩展的效果，必须有空隙 )
            0 : 默认值 , 不去扩展
            0.5：占空隙的一半
            1 : 去扩展 , 会把空白区域全部沾满
         （ 注：子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙。）
        flex-shrink : 收缩
            正常默认值是1
            0表示不收缩，.5收缩小一些，2收缩大一些。（大小是跟正常缩放1进行比较的）
        flex-basis : 跟flex-shrink/flex-grow很像。
            flex-shrink/flex-grow是设置一个比例值，flex-basis是设置一个具体值。
        flex : 一种复合写法
            flex-grow  flex-shrink  flex-basis
            flex:1;
                flex : 1 1 0    
            flex:0;
                flex : 0 1 0
        algin-self: 跟align-items操作很像，区别就是只是针对某一个子项。
<!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>

注：默认情况下，在弹性盒子中的子元素的左右排列的。
注：
    水平是主轴的时候：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器决定。
    垂直是主轴的时候：默认情况下，当宽高不写的时候，宽度由父容器决定，高度由内容决定。
注：当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）
注：当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。
注：弹性布局中用的频率比较多的语法：
    display : flex;
    flex-direction;
    justify-content;
    align-items;
    flex;
注：弹性布局的优势是做一维布局，网格布局的优势是做二维布局。

下面是弹性布局骰子案例代码：

<!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>


实际效果：
 



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

版权声明：本文为CSDN博主「GLINLIND」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/GLINLIND/article/details/104572530