UI设计行业刚刚在全球软件业兴起，属于高新技术设计产业，国内外众多大型IT企业均已成立专业的UI设计部门，但专业人才稀缺，人才资源争夺激烈，就业市场供不应求。想要成为一个出色UI设计师，你需要掌握更多的技能和实践。学习任何技术都有学习步骤，UI设计也是一样。上海千锋小编接下来为你介绍UI学习步骤。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
1、首先理解一下“深拷贝”和“浅拷贝”的区别：
浅拷贝：a = b;//a和b中存的是相同的地址，该地址指向堆内存中相同的地方，即a和b就是一个东西，改变a的值b的值也会跟着改变，同理改变b的值a的值也会发生改变；
深拷贝：a和b中存的地址不同，但是地址对应的堆内存中的内容完全一致，即b是a的副本
2、
（1）数组和对象的浅拷贝一样 ，简单的赋值操作
var b = a;
如数组的浅拷贝：
输出的值为：
对象的浅拷贝：
输出的值为：
（2）数组的深拷贝
ES5：var b = a.concat();
输出的结果为：
ES6 let [...b] = a;
（3）对象的深拷贝
ES5:
输出的结果为：
ES6：
let {...b} = a;
随着时代的发展，UI视觉设计逐渐成为人们最直观、最挑剔的话题，视觉营销的时代已经成为消费者习以为常的选择，那么作为UI视觉设计师，2018年薪风向是怎样的？
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
1:获取所有的
2：根据表格id获取表格，在表格内获取
3：新建一个空数组，获取所有name为”check”的多选框，循环判断多选框是否被选中，如果被选中则添加到数组里，获取输出按钮，然后为按钮添加onclick事件，输出数组长度即可。
基本选择器：
层次选择器：
<p>元素，对<p>元素继续循环，因为获取的是数组对象，给每个<p>元素添加行为事件
var items=document.getElementsByTagName("p"); for(var i=0;i<items.length;i++){
items[i].onclick=function(){ //do something }
}
<tbody>元素，在<tbody>元素下获取<tr>元素，循环输出获取的<tr>元素，对元素的索引值除以2取模，然后根据奇偶设置不同的背景色。
var item=docuement.getElementById("tb"); var tbody=item.getElementsByTagName("tbody")[0]; var trs=tbody.getElementByTagName("tr"); for(var i=0;i<trs.length;i++){ if(i%2==0){
trs[i].style.backgroundColor="#888";
}
}
var btn=document.getElementById("btn");
btn.onclick=function(){ var array=new Array(); var items=document.getElementsByName("check"); for(i=0;i<items.length;i++){ if(items[i].checked){ array.push(items[i].value);
}
}
alert(array.length);
}
#id $("#test")选取id为test的元素 .class $(".test")选取所有class为test的元素 element $("p")选取所有的<p>元素 $("div,span,p.myClass") 选取所有的<div>，<span>和拥有class为myClass的<p>标签的一组元素
$("ancestor descendant") $("div span")选取<div>里面所有的<span>元素 $("parent>child") $("div >span")选取<div>元素下元素名为<span>的子元素 $("prev+next") $(".one+div")选取class为one的下一个<div>同辈元素 $("#two~div")选取id为two的元素后面的所有<div>同辈元素
后面两个用得少，因为在jQuery里可以用更加简单的方法代替 $(".one+div") $(".one").next("div"); $("prev~div") $("#prev").nextAll("div");
根据统计2017年前半年的统计说明，前半年的设计风格主要以减约化为主，能更加让用户体验即简约便捷的方式展现给广大群体与用户。比如说蘑菇节、唯品会、AMII等，近几年来，人们的审美也在渐渐发生变化，作为一个UI设计师不仅要会设计页面，还要会设计用户喜欢的界面。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
本篇文章基本介绍了学习HTML的一些基础的语法与标签，标签包括换行</br>，加粗<b>,下划线<hr/>斜体字<i>,字体<h1....6>，标题<title>......
<small>
<small> 标签呈现小号字体效果
。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。
<small> 标签也可以嵌套，从而连续地把文字缩小。每个 <small> 标签都把文本的字体变小一号，直到达到下限的一号字。
<sub>表示下标<sup>表示上标。
<p>与<pre>有些类似
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
p 元素会自动在其前后创建一些空白。
<ul>与<ol>
两者都指列表，前者是无序的，后者是有序的。
效果：
其中<title>体现在最上方的搜索栏中。
今天来给大家讲解一下什么是UI设计，UI设计的类别，UI设计包含了哪些设计呢？手机端：手机、平板上的一些APP界面设计，例如QQ、微信的软件界面设计，小米、oppo主题商店里面的一些主题的设计等。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
例2很明显，这个过程非常的‘黑’，如果你想知道object包含什么数据的话，可以：
被上述步骤折磨完之后，终于能真正的写点代码了，但是依旧得非常小心，因为这里还有另一个函数：fn2
在修改代码的时候，得保证result这个结果没有被影响，那么如何保证呢？
很简单，重复上面的步骤，搞清楚result包含的数据，在测试的时候确保其数据跟原先的相同。
动态类型一时爽，代码重构火葬场
是时候彻底优化这个烦人的问题了
其实问题的根源就是因为javascript太灵活了，在代码运行期间几乎可以做任何的修改，
没有东西可以在代码层面保证 某个变量，某个函数 跟预期的一致。
所以要加入类型系统来确保代码的可靠性，在后期维护的时候同样能够传达出有效的信息
Flow是个JavaScript的静态类型检查工具，由Facebook出品的开源码项目，问世只有两三年，是个相当年轻的项目。简单来说，它是对比TypeScript语言的解决方式。
会有这类解决方案，起因是JavaScript是一种弱(动态)数据类型的语言，弱(动态)数据类型代表在代码中，变量或常量会自动依照赋值变更数据类型，而且类型种类也很少，这是直译式脚本语言的常见特性，但有可能是优点也是很大的缺点。优点是容易学习与使用，缺点是像开发者经常会因为赋值或传值的类型错误，造成不如预期的结果。有些时候在使用框架或函数库时，如果没有仔细看文件，亦或是文件写得不清不楚，也容易造成误用的情况。
这个缺点在应用规模化时，会显得更加严重。我们在团队开发协同时，一般都是通过统一的代码规范，来降低这个问题的发生，但
TypeScript自然有它的市场，但它有一些明显的问题：
*所以许多现行的开源码函数库或框架，并不会直接使用TypeScript作为代码的语言，另一方面因为TypeScript并非是普及到一定程度的语言。
现在，Flow提供了另一个新的选项，它是一种强(静态)类型的辅助
相较于TypeScript是另外重新制定一套语言，最后再经过编译为JavaScript代码来运行。Flow走的则是非强制与非侵入性的路线。
选择flow.js工具而不选择TypeScript强类型语言的原因显而易见？
这种类型不符的情况在代码中非常容易发生，例如上面的例1:
x这个传参，我们在函数声明时希望它是个数字类型，但最后使用调用函数时则用了字符串类型。最后的结果会是什么吗？ “Hello!10”，这是因为加号(+)在JavaScript语言中，除了作为数字的加运算外，也可以当作字符串的连接运算。想当然这并不是我们想要的结果。
聪明如你应该会想要用类型来当传参的识别名，容易一眼看出传参要的是什么类型，像下面这样:
利用Flow类型的定义方式，来解决这个小案例的问题，可以改写为像下面的代码:
当使用非数字类型的值作为传入值时，就会出现由Flow工具发出的警告消息，像下面这样:
[flow] Cannot call
如果是要允许多种类型也是很容易可以加标记的，假使这个函数可以使用布尔与数字类型，但返回可以是数字或字符串，就像下面这样修改过:
在多人协同开发某个有规模的JavaScript应用时，这种类型的输出输入问题就会很常遇见。如果利用Flow工具的检查，可以避免掉许多不必要的类型问题。
可能你会认为Flow工具只能运用在小型代码中，其实不然，Vue源码中大量使用flowjs中类型检测：
“javascript.validate.enable”: false
4 . babel插件在编译时就会一并转换Flow标记
Flow支持原始数据类型，如下面的列表:
如果你在React class里面使用了React.PropTypes规范，你可以对JSX上的attributes做静态类型检查：
更多关于支持React的细节 请移步 https://flow.org/en/docs/react/components/
看一段常见代码：
//例1 function foo(x) { return x + 10 }
foo('Hello!') //例2 function main(params){ //fn1函数获取了一个数据 var object = fn1(params) //fn2根据获数据，产生一个结果 var result = fn2(object) return result
}
…
知乎传送门:为什么说“动态类型一时爽，代码重构火葬场”
引入类型系统
Flow & TypeScript
JS语言本身无法有效阻止这些问题。TypeScript这样的强(静态)类型的JavaScript超集语言就开始流行，用严格的角度，以JavaScript语言为基底，来重新打造另一套具有强(静态)类型特性的语言，就如同Java或C#这些语言一样，这也是为什么TypeScript称自己是企业级的开发JavaScript解决方案。
TypeScript存在的问题
当然TypeScript也是个活跃的开源码项目，发展到现在也有一段时间，它的背后有微软公司的支持，全新打造过的Angular2框架中(由Google主导)，也采用了TypeScript作为基础的开发语言*。
Flow你的新选择
检查工具。Flow的功能是让现有的JavaScript语法可以事先作类型的声明(定义)，在开发过程中进行自动检查，当然在最后编译时，一样可以用babel工具来移除这些标记。
Flow的优点
轻且易学易用
它的学习曲线没有TypeScript来得高，虽然内容也很多，但半天学个大概，就可以渐进式地开始使用
检查工具
不是新的程序语言或超集语言，所以它可以与各种现有的JavaScript代码兼容，如果你哪天不想用了，就去除掉标记就是回到原来的代码，没什么负担
so
flow.js对工程的侵入性很小，无需大量的额外工作就能使用起来
从一个小例子演示
function foo(x) { return x + 10 }
foo('Hello!')
function foo(number) { return number + 10 }
// @flow function foo(x: number): number { return x + 10 }
foo('hi')
foo with 'hi' bound to x because string 1 is incompatible with number 2. (a.getting-start.js:6:5)
// @flow function foo(x: number | boolean): number | string { if (typeof x === 'number') { return x + 10 } return 'x is boolean' }
foo(1)
foo(true)
foo(null) // 这一行有类型错误消息
真实案例
Flow使用
1. flow init
2. // @flow 或 /* @flow */
3. IDE插件 或 flow check
在Visual Studio Code中因为它内建TypeScript与JavaScript的检查功能，如果要使用Flow工具来作类型检查，需要在用户设置中，加上下面这行设置值以免冲突:
{
"plugins": [ "transform-flow-strip-types" ] }
Flow支持的数据类型
类型别名&常见语法
// @flow export type Test = {
titleOne?: string,
titleTwo: ?string
} var a: Test = {titleOne:"3",titleTwo:4} var b:string = "" //any export type NavigationGestureDirection = 'horizontal' | 'vertical';
type T = Array<string> var x: T = []
x["Hi"] = 2 //有Flow警告 type TT = Array<Test> var xx:TT = []
xx = [{titleOne: '1',
titleTwo: false}]
type MyObject = {
foo: number,
bar: boolean,
baz: string,
};
let val:MyObject = {foo:2,bar:false,baz:'444'}; var val1: MyObject = {foo:2,bar:false,baz:null}; var val2: MyObject = {foo:2,bar:false}; function method(val: MyObject):MyObject { return {foo:2,bar:false,baz:'2'}} class Foo { constructor(val: MyObject) { /* ... */ } }
React中的应用
var Hello = React.createClass ({
propTypes: {
name: React.PropTypes.string.isRequired
} ... });
//<Hello/> //Flow就会发现 缺少属性的错误
//<Hello name={42}/>//属性类型的错误
import * as React from 'react'; type Props = {
foo: number,
bar?: string,
}; function MyComponent(props: Props) {
props.doesNotExist; // Error! You did not define a `doesNotExist` prop. return <div>{props.bar}</div>;
}
<MyComponent foo={42} />
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
BEM的意识就是块(block)、元素(element)、修饰符(modifier)，是由yandex团队提出的一种CSS Class命名方法。
任何一个东西的存在都有其存在的道理，如果他毫无价值，那么肯定会被淘汰，后人可能都不了解，甚至都不会出现在后人的世界里。
关于BEM命名其最大的争议就是其命名风格，它鼓励一级一级的写的非常具体，但是会很长。如此常的命名会影响书写效率，名称过长代码量就会增多，文件体积就会变大(在gzip下这个不算是个问题)，从而会影响传输速度，用户体验度就低，但是作为一个职业人我们都不能单纯把个人喜好和习惯作为借口来拒绝或否定其用途。
风格对于使用者来说并不是很重要，关键的是看其效果。正所谓人们常说的“不看疗程，看疗效”。
从扩展性上来看，嵌套过多阅读性差，超过3层就很难阅读了;嵌套越多，选择器的层级也会随之增多，那么性能不知不觉就会变差;如此长的名字，书写上想冲突都难。
从编程原则上来说，这种命名方式不会暴露抽象类。假如样式变了需要继承另一个抽象类，不需要改HTML，只需要改css即可。
团队开发中，风格无非是一种形式，可以约束人们达到一定程度上的统一。内部沟通会极大降低沟通成本。
BEM命名的方法虽然有自身的不足之处，但至少他可以使我们命名的时候达到一定的统一，我们可以学习其优秀的方面将其纳为己用。在实际项目开发中将其巧妙而又灵活的运用起来也未尝不是一件坏事。
蓝蓝设计的小编 http://www.lanlanwork.com