软考UML基础大观
一、UML(Unified Modeling Language)统一建模语言。其结构如下
二、详解（因为历年软考题主要出用例图和类图（多重度问题），所以本文主要回忆这两个图）
1、用例图
解析：用例模型描述的是外部执行者所理解的系统功能。用例模型用于需求分析阶段，它的建立是系统开发者和用户反复讨论的结果，表明了开发者和用户对需求规格达成共识。
用例三要素：参与者（Actor）、用例（Use Case）、包含和扩展（Include and Extend）
在历年的软考下午题中都会考到用例图，题型大部分为填用例或参与者，遇到这样的问题只要是仔细读题的都可以作对，还有一个考点就是填关系名称。用例图中的关系主要是包含和扩展。下面举例说明什么是包含和扩展。
引用于《http://www.cnblogs.com/fan0136/archive/2008/12/14/1354730.html》
（1）包含(include)
包含关系：使用包含（Inclusion）用例来封装一组跨越多个用例的相似动作（行为片断），以便多个基（Base）用例复用。基用例控制与包含用例的关系，以及被包含用例的事件流是否会插入到基用例的事件流中。基用例可以依赖包含用例执行的结果，但是双方都不能访问对方的属性。
包含关系对典型的应用就是复用，也就是定义中说的情景。但是有时当某用例的事件流过于复杂时，为了简化用例的描述，我们也可以把某一段事件流抽象成为一个被包含的用例；相反，用例划分太细时，也可以抽象出一个基用例，来包含这些细颗粒的用例。这种情况类似于在过程设计语言中，将程序的某一段算法封装成一个子过程，然后再从主程序中调用这一子过程。
例如：业务中，总是存在着维护某某信息的功能，如果将它作为一个用例，那新建、编辑以及修改都要在用例详述中描述，过于复杂；如果分成新建用例、编辑用例和删除用例，则划分太细。这时包含关系可以用来理清关系。
（2）扩展(extend)
扩展关系：将基用例中一段相对独立并且可选的动作，用扩展（Extension）用例加以封装，再让它从基用例中声明的扩展点（Extension Point）上进行扩展，从而使基用例行为更简练和目标更集中。扩展用例为基用例添加新的行为。扩展用例可以访问基用例的属性，因此它能根据基用例中扩展点的当前状态来判断是否执行自己。但是扩展用例对基用例不可见。
对于一个扩展用例，可以在基用例上有几个扩展点。
例如，系统中允许用户对查询的结果进行导出、打印。对于查询而言，能不能导出、打印查询都是一样的，导出、打印是不可见的。导入、打印和查询相对独立，而且为查询添加了新行为。因此可以采用扩展关系来描述：
用例图做题中药注意的几点：
①正确识别参与者：角色不仅可以由人承担，还可以是其它系统、硬件设备，甚至是时钟。
②参与者一定在系统之外，不是系统的一部分。
2、类图和对象图
解析：所谓类是一类具有相同特征的对象的描述。对象是类的实例。类由类的名字、属性、操作构成。分别分布在三格上中下的位置。
重点一：类之间的关系
①依赖关系（dependency）
有两个元素X，Y，如果修改元素X的定义可能会引起对另一个元素Y的定义的修改，则称元素Y依赖于元素X。用带箭头的虚线表示依赖关系
引起依赖的原因有一个类向另一个类发送消息；一个类是另一个类的数据成员；一个类是另一个类的某个操作参数等。
②泛化关系（Generalization）
泛化关系描述了一般事物与该事物中的特殊种类之间的关系，也就是父类与子类之间的关系。继承关系是泛化关系的反关系，也就是说子类是从父类中继承的，而父类则是子类的泛化。使用带空心箭头的实线表示，箭头指向父类。
③关联关系（association）
关联表示两个类之间存在某种语义上的联系。例如，一个人为一家公司工作，一家公司有许多办公室。那么人和公司、公司和办公室之间存在某种语义关系。
关联关系提供了通信的路径，它是所有关系中最通用、语义最弱的。用一条实线来表示。
3.1聚合关系（aggregation）
聚合是一种特殊形式的关联。聚合表示类之间的关系式整体与部分的关系。例如一个轿车包含4个车轮、一个方向盘、一个发动机和一个底盘，这就是聚合。用一个带空心菱形的实线表示
3.2组合关系（composite）
如果聚合关系表示部分的类的存在，与表示整体的类有着紧密的关系，例如公司和部门之间的关系，那么就应该使用组合关系来表示。在UML中使用带有实心菱形的实线表示
④实现关系（Implementation ）
实现关系式用来规定接口和实现接口的类或组件之间的关系。接口是操作的集合，这些操作作用于规定类或组件的服务、用带有空心箭头的虚线表示
重点二：多重度问题
最常见的多重性有：0..1 ; 0..* ; 1..1 ; 1..* ; *
多重性用来说明关联的两个类之间的数量关系，例如：
- 书与借书记录之间的关系就应该是1对0..1的关系，也就是一本书可以有0或者1个借书记录；
- 经理与员工之间的关系则应为1对0..*的关系，也就是一个经理可以领导0个或多个员工；
- 学生与选修课程之间的关系就可以表示为0..*对1..*的关系，也就是一个学生可以选择1门或多门课程，而一门课程有0个或多个学生选择。
软考UML部分的基础分析的部分就到这里，具体在做题的时候一定要认真审题，不要错过任何信息，也不要自以为是，要以题干为基础进行分析。在历年的UML题型中，大部分会考到以下几部分：
【问题一】（5分）根据说明中的描述，给出图中A1和A2..An所对应的参与者,U1和U2..Un所对应的用例，以及（1）、（2)..(n)中所对应的关系。
仔细审题圈出能做出操作的参与者，根据具体题干进行填空。在题干中寻找动宾短句，根据题意填空。这几分是很容易得到的，但是还是要细心，如果填反了一样没有分。
至于填关系的题，不是《include》就是《extend》，所以要分析题干，根据上文对包含和扩展关系的分析来填空。还有一个技巧就是如果箭头万众归一，指向大的用例，则一般都是扩展，如果是万箭齐发，指向小的用例，则大部分都是包含。
【问题二】（7分）根据说明中的描述，给出图中缺少的C1~Cn所对应的类名以及（3）~（n）处所对应的多重度。
本题找对应的类名不是难点，难点是容易弄反，所以还是要细心。难点还有多重度的分析，每次做模拟题都会错一两个，一个就是1分，这分好得也好丢，关键看题干分析，只要是认真细心的人就一定会分析正确，如果懒得思考的人就很难做对。考试的时候是现场直播，没有演习，所以要付出百分百的脑力去分析它，啃透它消化它。
【问题三】（3分）图中的类图设计采用了某某设计模式，请说明该模式的内涵。
多么无耻的出题者啊，光是有设计模式的大题、上午题还是不过瘾，还嵌在UML里一道题。23个设计模式虽然看类图能回想起来设计模式的内涵但是就是有人无法用具体的语句来描述出来。这就是得靠总结，靠背。真烦！这也是UML题不能得满分的原因。
总结这么多，还是一点，做UML题就是要心细、细心的分析。
各位周末玩了一天累了吧，我们一起来做两道面试题吧（据说淘宝的哟）！
前言
我的CSS一直是一块短板，原因就是前几年对CSS不重视，现在重视了项目经验又不足，所以在这块上我是下了很大功夫的，也看了一点书，做了点东西，希望在几个项目后CSS水平有所提高！
完了，我最近在思考自己的CSS是短板，那么JS就是强项了吗？却发现自己前端水平貌似也不是很高，于是又开始走老路开始自卑起来了，于是这个时候我们要嘛做点实事做点项目，不然就在网上搞几道面试题来干干，这对个人提高很不错的。
我之前有一段时间有点迷茫，并且找不到学习的方向与方法，却在一次面试过程中从新获得了专注的力量，所以我们不要小看了面试题带来的冲击，面试题是帮助前端人员提高的非常好的途径呢！我不CSS是短板吗，好的那就上两道CSS的面试题好了。
进入正题
使用 HTML+CSS 实现如图布局，border-widht 5px，一个格子大小是 50*50，hover时候边框变为红色（兼容IE6+，考虑语义化的结构）。
使用一个标签和纯CSS <a href="#" title="订阅博客">订阅博客</a> 实现如图效果，文字始终保持左边距10px, 下边距5px，改变字体大小（12px-50px）时，边距保持不变，不使用 content:"订阅博客"，兼容现代浏览器
俗话说得好，有图有真相，两道题都出来了，我们来看看吧
题目一
对于初看题目一，小的第一印象便是非常简单，但真的简不简单现在还不好说，真的简单估计就不会出了吧，我估计被坑了。
先上预览地址：http://sandbox.runjs.cn/show/xhqxoohd
他这个是个标准的九宫格，我这里可以不要脸一点用table试试：
丑陋的table
PS：我这里叫它丑陋的table，其实table不丑陋，我才丑陋，就拿这道题你来说，最后真的用table实现的话也没什么问题的，我们谈论一个事情时候不应该起分别心，比如几年前我们用百分比布局，有人会说你是错的，那现在呢？？？伟大的设计可能会重新占领市场，table也可能屌丝逆袭的。
初步做出来就是这个样子了，我们发现表格之间是有间隙的，所以我们需要先去掉间隙先：
cellpadding="0" cellspacing="0"
这是我第一时间想的的办法，但是这个可能不是我想要的解决办法，于是最终找到了这个东东：
border-collapse:collapse;
不错了，这就是我想要的东西，
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示
separate
默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse
如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit
规定应该从父元素继承 border-collapse 属性的值。
于是我们再改下代码，我们就得到了这个东东：
View Code
无论如何，这都不是我想要的东西，并且他不会兼容IE6的，于是我想到了绝对定位，那么我们来试试绝对定位吧：
#test02 { position: relative; }
#test02 a { border: 5px solid blue; 50px; height: 50px; text-align: center; display: block; position: absolute; }
我原本想把a标签设置为inline-block，但是IE6好像不支持，是不是支持我还真不知道了，我电脑上都不能看呢。。。。
View Code
于是我们实现了功能，因为在IE6下面css 盒模型解析有误，所以还进行了一点hack处理，现在我们回头看看这道题我做的有什么不足。
看了代码的朋友可能会注意到，我其实是使用js生成的html代码，js代码就不用看了，没经过思考的，但是每个元素上面都会有style
我不知道大神是怎么做的，但我能想到的就是这个样子了，至于这道题究竟想考察什么，小的我也不知道了。。。。不明觉厉！
再一次附上预览地址：
http://sandbox.runjs.cn/show/xhqxoohd
于是，我们进入下一个题目吧。
第二题
首先附上预览地址：http://sandbox.runjs.cn/show/7vpjps1r
说实话，望着第二题，我看了很久对其中一个词语没有搞懂“现代浏览器”，这里所说的现代浏览器是指IE9+的浏览器吗？？？
但是搞到现在，如果不使用HTML5和CSS3的东西就用纯html，我怕我是实现不了的，于是我们在看看他这个题目
前面鼠标以上后，文字变慢慢变大，而且似乎只有一个a标签<a href="#" title="订阅博客">订阅博客</a>，下面那根红线应该是其他的吧？
但是对于CSS3来说，这个题好似没什么难度，但会是坑吗？我们来看看：
PS：文字详细说了是一个a标签，所以我这里应该只能用一个标签吧
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style> 6 * { margin: 0; padding: 0; } 7 a { display: block; border-bottom: 4px solid red; text-decoration: none; color: Gray; font-size: 12px;
transition: font-size 1s; padding: 0 0 5px 10px; } 8 a:hover { font-size: 50px; } 9 </style> 10 </head> 11 <body> 12 <a href="#" title="订阅博客">订阅博客</a> 13 </body> 14 </html>
于是我感觉怎么莫名其妙的就做完了。。。。也不知道对不对。。。
http://sandbox.runjs.cn/show/7vpjps1r
结语
之前我们项目经理说过，没事出去面试一下，会得到增长的，到我这里就变成了没事做两道面试题会有好处的，呵呵，希望这两道题能给各位代理乐趣。
如果觉得不错，就帮顶哟