关于UI界面的切图命名规范，U妹觉得关键是在于团队能够有一个统一的规则，所以这里只介绍一种通用的命名规则，当然大家也可以根据自己的实际情况去制定，这里只提供一种方法与思路，仅供参考。
规范的命名方式可以提高开发人员的的开发效率和整个开发团队的友好合作。U妹觉得要尽可能用最少的字符而又能完整的表达标识符的含义。
一、切图命名英文缩写的3个原则
1.较短的单词可以通过去掉“元音”形成缩写
2.较长的单词可去单词的头部几个字母形成缩写
3.还有一些约定成俗的英文单词缩写
二、命名规则
模块_类别_功能_状态.png
U妹举个例子：nav_button_search_default.png
释义为：导航_按钮_搜索_默认.png
启动界面
启动图片 default.png
启动logo default.png
如：default.png\defoult@2x.png\default-568@2x.png
登录界面
登录背景 login_bg.png
登录logo login_logo.png
输入框 login_input.png
输入框选中状态 login_input_pre.png
登录按钮 login_btn.png
登录按钮选中状态 login_btn_pre.png
导航栏按钮 (nav) 命名
nav_功能描述.png
如：nav_menu.png\nav_menu_pre.png（同按钮选中前后两种状态命名 ）
按钮命名（btn可重复使用按钮)
一般 normal btn_xxx_normal.png
点击 highlight btn_xxx_highlight.png
不能点击 disabled btn_xxx_disable.png
按下 pressed btn_xxx_pressed.png
选中 selected btn_xxx_selected.png 做为复数选择出现机会不高
btn_功能属性或色彩均可.png
如：btn_blue.png\btn_blue.9.png 蓝色按钮
其他命名
图标 icon_xxx.png
图片 pic_xxx.png或是img_xxx.png
照片 pho_xxx.png
左侧导航 命名 leftbar_功能描述.png
如：leftbar_info.png\leftbar_info_pre.png 个人中心
底部选项卡按钮（TabBar）
命名 Tab_功能描述.png
如：tab_set.Png\nav_set_pre.png 设置
主页命名
命名 home_功能属性＋描述.png
如：home_menu_recommended.png 热门推荐
ps：描述可用英文或拼间开头字母组合等
列表页命名规则
命名 List_功能属性＋描述.png
如：list_menu_collect.png 列表页收藏按钮
UI文件命名规范常用词
常用状态
正常 normat
按下 pressed
选中 selected
禁用 disabled
已访问 visited
悬停 hover
控件＆部件
控件：较独立的可操作界面元素
部件：描述属于某控件一部分
按钮（可点） Btn
图标 Icon不可点、非点击主体、图案部件
标记 Sign 列表
List 菜单 Menu
视图 View
面板 Panel
薄板 Sheet
底部弹出菜单 栏 Bar
状态栏 StatusBar
导航栏 NaviBar
标签栏 TabBar
工具栏 ToolBar
切换开关 Switch
滑动器 Slider
单选框 Radio
复选框 CheckBox
背景 Bg
蒙版、遮罩 Mask
收藏 collect
评论 comment
广告 ad
时间 time
音频 audio
视频 viedio
不喜欢 dilike
用户 user
首页 hone
排名 ranked
搜索 search
标志 logo
进度条 progress bar
默认图片 def_
分隔图片 seg_
选择 sel_
关闭 close
返回 back
编辑 eidt
内容 content
左 中 右 left center right
提示信息 msg
个人资料 porfile
弹出 pop
删除 delete
下载 download
登录 login
注册 regsiter
标题title
注释 note
链接 link
图片 image（img)
刷新 refresh
常用补充描述
顶部 Top
中间 Middle
底部 Bottom
第一 First
第二 Second
最后 Last
页头 Header
页脚 Footer
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
出于安全考虑，浏览器有一个同源策略。浏览器中，异步请求的地址与目标地址的协议、域名和端口号三者与当前有不同，就属于跨域请求。
限制跨域访问是浏览器的一个安全策略，因为如果没有这个策略，那么就有被跨站攻击的危险。比如，攻击者在自己的网站A放置一个表单，这个表单发起DELETE请求，删除某个用户在B网站上的个人资料。如果没有同源策略保护，那么在同一个浏览器内，如果用户已经登录了B网站，这个删除的请求就会被接受，导致在用户不知情的情况下自己在B网站中的资料被删除。
浏览器的同源策略提升了安全性，但是给需要在不同域名下开发的开发者带来了跨域问题。
解决跨域的问题主要有：
jsonp和cors。jsonp是利用 script 标签可以跨域加载的特性而创造出来的一种非正式的跨域解决方案。在实际开发中，推荐使用cors，即在服务端返回时加入允许跨域的请求头，允许指定域名的跨域访问。
千万要小心！这种直接加 * 号的做法是相当危险的，千万别这么做！
response.addHeader("Access-Control-Allow-Origin", "*");
正确的做法：
/**
* 使用Filter的方式解决跨域问题
*/ public class CorsFilter implements Filter { private static final List<String> ALLOW_ORIGINS = Config.getListString("allowOrigins", ","); private static final String REQUEST_OPTIONS = "OPTIONS"; @Override public void init(FilterConfig filterConfig) throws ServletException {
} @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) servletRequest;
HttpServletResponse response = (HttpServletResponse) servletResponse;
String orgHeader = request.getHeader(HttpHeaders.ORIGIN); if (orgHeader != null && ALLOW_ORIGINS.contains(orgHeader)) { // 允许的跨域的域名 response.addHeader("Access-Control-Allow-Origin", orgHeader); // 允许携带 cookies 等认证信息 response.addHeader("Access-Control-Allow-Credentials", "true"); // 允许跨域的方法 response.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PATCH, PUT, HEAD"); // 允许跨域请求携带的请求头 response.addHeader("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With"); // 返回结果可以用于缓存的最长时间，单位是秒。-1表示禁用 response.addHeader("Access-Control-Max-Age", "3600"); // 跨域预检请求，直接返回 if (REQUEST_OPTIONS.equalsIgnoreCase(request.getMethod())) { return;
}
}
filterChain.doFilter(request, response);
} @Override public void destroy() {
}
}
<filter> <filter-name>corsfilter</filter-name> <filter-class>com.bj58.crm.plus.filter.CorsFilter</filter-class> </filter> <filter-mapping> <filter-name>corsfilter</filter-name> <url-pattern>/*</url-pattern> <dispatcher>REQUEST</dispatcher> </filter-mapping>
http-util.js
let axios = require("axios"); let qs = require("qs");
axios.defaults.withCredentials = true;
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; function post(url, param) { return axios.post(url, qs.stringify(param))
} function get(url, param) { axios.get(url, {params: param})
}
export default {
get,
post
};蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
web前端开发工程是是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过五年。web前端开发，是从网页制作演变而来的，名称上有很明显的时代特征。随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。
早期的前端其实就是table布局，后来发展到所谓的div+css网站重构，再到现在的让人眼花缭乱的各种各样的新技术，web前端技术发展是非常快速的，因此选择了前端这个行业就意味着不停的学习吧。让我们先看看张克军绘制的前端知识体系结构：
前端开发的核心是HTML+CSS+JavaScript。本质上他们构成了一个MVC框架，即HTML作为信息模型（Model），css控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。
HTML
1.标签的分类，
2.标签表示一个元素
3.按性质分类：block-level 和 inline-level
4.按语义分类：
Headings:h1,h2,h3,h4,h5,h6
paragraphs:p
Text formatting:em,strong,sub,del,ins,small
Lists:ul,li,ol,dl,dt,dd
Tables:table,thead,tbody,tr,th,td
Forms and input: form,input,select,textarea
Others:div,span,a,img,<!---->
HTML5:header,footer,article,section
XHTML
XHTML于2000年的1月26日成为W3C标准。W3C将XHTML定义为的HTML版本，XHTML将逐渐取代HTML。XHTML是通过把HTML和XML各自的长处加以结合形成的。XHTML语法规则如下：
属性名和标签名称必须小写
属性值必须加引号
属性不能简写
用ID属性代替name属性
XHTML元素必须被正确地嵌套
XHTML元素必须被关闭
标签语义化
为表达语义而标记文档，而不是为了样式，结构良好的文档可以向浏览器传达尽可能多的语义，不论是浏览器位于掌上电脑还是时髦的桌面图形浏览器。结构良好的文档都能向用户传达可视化的语义即使是在老的浏览器，或是在被用户关闭了CSS的现代浏览器中。同时结构良好的HTML代码也有助于搜索引擎索引你的网站。
不要使用table布局，table是用来表格显示的。
不要到处滥用div标签，div是用来分块用的。
不要使用样式标签，如font，center，big，small，b，i，样式可以用CSS来控制，b和i可以用strong和em来代替。
不要使用换行标签<br />和空格来控制样式，请用CSS。
尽量不要使用内联CSS
CSS
1.css基础知识
层叠和继承
优先级
盒模型
定位
浮动
2.css进阶
css sprite
浏览器兼容性
IE haslayout和block format content
css frameworks
css3
css性能优化
less and sass
css sprite主要用于前端性能优化的一种技术，原理是通过多张背景图合成在一张图片上从而减少http请求，加快载入速度。
浏览器兼容性
绝大部分情况下，我们需要考虑浏览器的兼容性，目前正在使用的浏览器版本非常多，IE6，IE7，IE8，IE9，IE10，Chrome，Firefox，Safari。
IE haslayout和block format content
IE haslayout是一个Internet explore for Windows的私有概念，他决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。而有些HTML元素则默认就有layout。目前只有IE6和IE7有这个概念。BFC是W3C css2.1规范中的一个概念，他决定了元素如何应对其内容进行定位。以及与其他元素的关系和相互作用。这个其实和浏览器的兼容性有关，因为决大部分的兼容性问题都是他们引起的。参考：css BFC和IE haslayout介绍。
css framework
css框架是一系列css文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式，通用规则等代码块，用于简化web前端开发的工作，提高工作效率。目前常见框架有：
960 grid system
blueprint css
bluetrip
minimum page
还是一个比较出名的和特殊的框架是Twitter的bootstrap，bootstrap是快速开发web应用程序前端的工具包。它是一个css和HTML的集合，它使用了的浏览器技术，给你的web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。它是基于less开发的，不支持IE6，在IE7和IE8里效果也不咋地。
css3
虽然css3还没有正式成为标准，但是IE9+，Chrome，Firefox等现代浏览器都支持css3。css3提供了好多以前需要用JavaScript和切图才能搞定的功能，目前主要功能更有：圆角、多背景、@font-face、动画与渐变、渐变色、box阴影、RGBa-加入透明色、文字阴影。
css性能优化
css代码是控制页面显示样式与效果的最直接“工具” ，但是在性能调优时他们通常会被web开发工程师所忽略，而事实上不规范的css会对页面渲染的效率有严重影响，尤其是对于结构复杂的web2.0页面，这种影响更是不可磨灭的。所以，写出规范的、高性能的css代码会极大地提高应用程序的效率。
less and sass
less和sass都是css预处理器，用来为css增加一些编辑的特性，无需考虑浏览器的兼容问题，例如你可以在css中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的css更加简洁。适应性更强，代码更直观等诸多好处。
sass基于ruby开发，less既可以在客户端运行，也可以借助node.js或者rhino在服务器端运行。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
1.效果如上，官方示例简化
2.force1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ECharts"> <meta name="author" content="kener.linfeng@gmail.com"> <title>ECharts · Example</title> <script src="./js/echarts.js"></script> </head> <body> <div id="main" class="main" style="width: 800px;height: 800px"></div> <script src="./echartsExample.js"></script> </body> </html>
3.echartsExample.js
var myChart; var domMain = document.getElementById('main'); function requireCallback (ec) { echarts = ec; if (myChart && myChart.dispose) { myChart.dispose();
} myChart = echarts.init(domMain); window.onresize = myChart.resize; myChart.setOption(option, true); window.onresize = myChart.resize;
} var option = { title : { text: '人物关系：乔布斯', subtext: '数据来自人立方', x:'right', y:'bottom' }, tooltip : { trigger: 'item', formatter: '{a} : {b}' }, toolbox: { show : true, feature : { restore : {show: true}, magicType: {show: true, type: ['force', 'chord']}, saveAsImage : {show: true}
}
}, legend: { x: 'left', data:['家人','朋友']
}, series : [
{ type:'force', name : "人物关系", ribbonType: false, categories : [
{ name: '人物' },
{ name: '家人' },
{ name:'朋友' }
], itemStyle: { normal: { label: { show: true, textStyle: { color: '#333' }
}, nodeStyle : { brushType : 'both', borderColor : 'rgba(255,215,0,0.4)', borderWidth : 1 }, linkStyle: { type: 'curve' }
}, emphasis: { label: { show: false // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE }, nodeStyle : { //r: 30 }, linkStyle : {}
}
}, useWorker: false, minRadius : 15, maxRadius : 25, gravity: 1.1, scaling: 1.1, roam: 'move', nodes:[
{category:0, name: '乔布斯', value : 10, label: '乔布斯\n（主要）'},
{category:1, name: '丽萨-乔布斯',value : 2},
{category:1, name: '保罗-乔布斯',value : 3},
{category:1, name: '克拉拉-乔布斯',value : 3},
{category:1, name: '劳伦-鲍威尔',value : 7},
{category:2, name: '史蒂夫-沃兹尼艾克',value : 5},
{category:2, name: '奥巴马',value : 8},
{category:2, name: '比尔-盖茨',value : 9},
{category:2, name: '乔纳森-艾夫',value : 4},
{category:2, name: '蒂姆-库克',value : 4},
{category:2, name: '龙-韦恩',value : 1},
], links : [
{source : '丽萨-乔布斯', target : '乔布斯', weight : 1, name: '女儿'},
{source : '保罗-乔布斯', target : '乔布斯', weight : 2, name: '父亲'},
{source : '克拉拉-乔布斯', target : '乔布斯', weight : 1, name: '母亲'},
{source : '劳伦-鲍威尔', target : '乔布斯', weight : 2},
{source : '史蒂夫-沃兹尼艾克', target : '乔布斯', weight : 3, name: '合伙人'},
{source : '奥巴马', target : '乔布斯', weight : 1},
{source : '比尔-盖茨', target : '乔布斯', weight : 6, name: '竞争对手'},
{source : '乔纳森-艾夫', target : '乔布斯', weight : 1, name: '爱将'},
{source : '蒂姆-库克', target : '乔布斯', weight : 1},
{source : '龙-韦恩', target : '乔布斯', weight : 1},
{source : '克拉拉-乔布斯', target : '保罗-乔布斯', weight : 1},
{source : '奥巴马', target : '保罗-乔布斯', weight : 1},
{source : '奥巴马', target : '克拉拉-乔布斯', weight : 1},
{source : '奥巴马', target : '劳伦-鲍威尔', weight : 1},
{source : '奥巴马', target : '史蒂夫-沃兹尼艾克', weight : 1},
{source : '比尔-盖茨', target : '奥巴马', weight : 6},
{source : '比尔-盖茨', target : '克拉拉-乔布斯', weight : 1},
{source : '蒂姆-库克', target : '奥巴马', weight : 1}
]
}
]
}; var echarts; require.config({ paths: { echarts: './js' }
}); launchExample(); var isExampleLaunched; function launchExample() { if (isExampleLaunched) { return;
} // 按需加载 isExampleLaunched = 1; require(
[ 'echarts', 'echarts/chart/force', 'echarts/chart/chord',
], requireCallback );
}
4.目录文件结构
话不多说，先上代码：
for(var j=0;j<10;J++){
setTimeout(function(){console.log(j);},5000)
}
看到这三行代码，你也许会不耐烦道：又要讲闭包？要吐槽了好么？别急，让我们先来思考一下，这段代码在浏览器中的执行结果是什么？
<!-- more -->
甲：顺序打印0到9？
乙：这题我见过，打印十个10！
哪个答案正确？
执行结果显示，浏览器打印出十个10，貌似乙对了，但是如果你足够细心，你会发现几个问题：为什么会循环打印十个10,而不是0到9？
从结果来看，for循环执行完跳出之后，才开始执行setTimeout（所以j才等于10），为什么不是每次迭代都执行一次setTimeout呢？
1、为什么会循环打印十个10？
许多人习惯用第二个问题中的执行结果来回答这个问题：“for循环执行完毕跳出之后才开始执行setTimeout，所以才打印了十个10”。这样的答案，只能说是既应付了自己，又应付了别人。其实，要解答第一个问题，首先要解答第二个问题。
2、为什么不是每一次迭代都执行一次setTimeout？
大家都知道，JavaScript在ES6出现以前，是没有块状作用域的，这就意味着，在for循环中用var定义的变量j，其实是属于全局的，那其实整个全局作用域中只有一个j，每次for循环都是更新这个j。
那么现在的关键问题在于，为什么整个for循环会先于setTimeout执行，而不是我们正常理解的，一次迭代执行一次。这就涉及到了JavaScript的核心特性：单线程。
JavaScript设计的初衷，是浏览器用来与用户进行交互和DOM操作的，这就决定了它必须是单线程的。设想JavaScript同时有两个线程，一个线程在DOM节点内添加内容，一个线程删除该节点，浏览器就会出现混乱。所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成为了这门语言的核心特征，将来也不会改变。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行下一个任务，如果前一个任务耗时很长，后一个任务就不得不一直等着。
为了优化单线程的性能，JavaScript将任务分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程，而进入“任务队列（task queue）”的任务，只用主线程中的同步任务执行完毕，异步任务才会进入执行队列执行。只要主线程空了，就会去读取“任务队列”，这就是JavaScript的运作机制。这个过程会不断重复。
而setTimeout就被JavaScript定义为异步任务。每次for循环的迭代，都将setTimeout中的回调函数加入任务队列等待执行。也就是说，只有同步任务中的for循环完全结束，主线程中才会去任务列表中找到尚未执行的十个setTimeout（十次迭代）回调函数并顺序执行（先进先出）。而此时，j已经经过循环结束变成了10，所以此时主线程执行的，是十个一模一样的打印i的回调函数，即打印十个10,。至此完美回答了第一和第二个问题，文章开头的代码与下面的代码其实是等价的：
for(var i=0;i<10;i++){
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
}
小小的一个setTimeout，牵扯出了很多JavaScript的深层次问题，可见JavaScript还有许多地方是值得深入探究的。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
注释内容以样式为例，如下：
<!--[if IE]>
<link rel="stylesheet" href="all-ie-only.css" type="text/css"/>
<![endif]-->
<!--[if !IE]>
<link rel="stylesheet" href="not-ie.css" type="text/css"/>
<![endif]-->
上面是除了IE浏览器外所有浏览器都识别这个样式，另外CSS-TRICKS的《How To Create an IE-Only Stylesheet》一文中提供了另一种写法：
<!--[if !IE]><!--> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]-->
<!--[if IE 10]>
<link rel="stylesheet" type="text/css" href="ie10.css">
<![endif]-->
这种方法是样式表使用在低于IE10的浏览器,换句话说除了IE10以外的所有IE版本都将被支持。
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]-->
也可以写成
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]-->
前面我们也说过了lt和lte的区别,lt表示小于版本号，不包括条件版本号本身；而lte是小于或等于版本号，包括了版本号自身。
上面这几种方法，使用的是低于（lt）和低于或等于（lte）的方法来判断，我们也可以使用大于gt和大于或等于gte达到上面的效果：
<!--[if gt IE 9]>
<link rel="stylesheet" type="text/css" href="ie10-and-up.css">
<![endif]-->
或
<!--[if gte IE 10]>
<link rel="stylesheet" type="text/css" href="ie10-and-up.css">
<![endif]-->
<!--[if (IE 6)|(IE 7)|(IE 8)]>
<link rel="stylesheet" type="text/css" href="ie6-7-8.css">
<![endif]-->
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
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;
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
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");
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
本篇文章基本介绍了学习HTML的一些基础的语法与标签，标签包括换行</br>，加粗<b>,下划线<hr/>斜体字<i>,字体<h1....6>，标题<title>......
<small>
<small> 标签呈现小号字体效果
。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。
<small> 标签也可以嵌套，从而连续地把文字缩小。每个 <small> 标签都把文本的字体变小一号，直到达到下限的一号字。
<sub>表示下标<sup>表示上标。
<p>与<pre>有些类似
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
p 元素会自动在其前后创建一些空白。
<ul>与<ol>
两者都指列表，前者是无序的，后者是有序的。
效果：
其中<title>体现在最上方的搜索栏中。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
例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} />
蓝蓝设计的小编 http://www.lanlanwork.com