整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
文分享自华为云社区《JavaScript代码之美—代码优化，减少if-else冗余的技巧-云社区-华为云》，作者：黛琳ghz。
前言
if-else 语句对于程序员来说，是非常非常熟悉的一个判断语句，我们在日常开发和学习中都经常看见它，if-else语句主要用于需要做出选择的地方进行判断，这里就不再赘述if-else语法和特点了。
我们在写代码（如图下，是我以前写的计算器项目）或看项目的时候或多或少都接触过拥有大量if语句（简称“屎山”）的项目代码，多重嵌套的if-else在维护和修改的时候真的让人崩溃（特别是看被人的项目的时候），有时候一个 bug 排查下来，整个人都麻木了。
如图下的计算器项目的代码就是多重if-else的一个例子，一眼看过去就觉得很冗余了，在功能不完善时，需要添加代码很不方便。维护时，可读性很差，而且很多bug。
关于R星公司（Rockstar Games游戏公司）的屎山代码，相信很多人都有所耳闻，据说公司旗下的GTA 5游戏中循环19.8亿次的if语句，可想而知加入游戏要多久啊。
因此，接下来我们将了解和学习一些优化的小技巧，来优化自己的代码。
什么是短路运算，顾名思义，就是触发到特定条件就短路，只要短路了就不会继续往后执行。短路运算可以分为两种逻辑运算符，分别是&&（与）和||（或）。
1.1.1运算规则
表达式1 && 表达式2，只有所有表达式都为true，则整个表达式的运算结果才为true。根据集合的补集的思想，只要任意表达式为false，则整个表达式的运算结果为false。
只要碰到了false或者等价于false的条件就短路，只要短路了就不会继续往后执行了，然后得到造成短路的这个值，如果不短路，得到的是第二个值
1.1.2 代码测试
console.log( true && true ); // true
console.log( false && true ); // false
console.log( true && false); // false
console.log(1 && 0); // 0
console.log( undefined && 0); // undefined
console.log(null && 1); // null1.2.1运算规则
表达式1 || 表达式2，只要任意表达式为true，则整个表达式的运算结果为true。
只要碰到了true或者等价于true的条件就短路，只要短路了就不会继续往后执行了，然后得到造成短路的这个值，如果不短路，得到的是第二个值
1.2.2代码测试
?console.log( true || true ); // true
console.log( false || true ); // true
console.log( true || false); // true
console.log(1 || 0); // 1
console.log( undefined || 0); // 0
console.log(null || 1); // 1三元运算符是一种需要三个操作数的运算符，运算的结果根据给定条件决定，有时候可以用三元运算符代替简单的if-else判断，但是三元运算符不建议多层嵌套，可读性较差
条件表达式 ? 表达式1 : 表达式2先求条件表达式的值，如果为true，则返回表达式1的执行结果；如果条件表达式的值为false，则返回表达式2的执行结果。
//三元表达式来判断
var age=prompt('请输入需要判断的年龄：')
var status=age >=18 ? '已成年' : '未成年'
console.log(status)
//if-else来判断
var age=prompt('请输入需要判断的年龄：')
if(age>=18){
console.log('已成年')
}else{
console.log('未成年')
}swtich(n) {
case 常量1 :
要执行的语句;
break;
case 常量2 :
要执行的语句;
break;
case 常量3 :
要执行的语句;
break;
default:
要执行的语句;
break;
}switch 后面的 (n) 可以是表达式，也可以（并通常）是变量。然后表达式中的值会与 case 中的数字作比较，如果与某个 case 相匹配，那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行。
switch 语句和具有同样表达式的一系列的if语句相似。很多场合下需要把同一个变量（或表达式）与很多不同的值比较，并根据它等于哪个值来执行不同的代码。
面对多层嵌套的if-else判断时，可以选择使用switch语句来写，这样代码可读性更好
3.1.1PS：有时候简单的if判断比switch语句更加简洁
在写让数字1-9前面加上0时的效果，我就用过switch语句来写，发现非常冗余
其实一句if判断就解决了，就是判断这个是否小于10，如果是就在数字前加上0
策略模式是指有一定行动内容的相对稳定的策略名称，策略模式作为一种
软件设计模式，指对象有某个行为，但是在不同的场景中，该行为有不同的实现算法。
策略模式是一种行为设计模式，定义一系列算法，将每一个算法封装起来，并让它们可以相互替换。目的是实现方法的使用和实现分开。
文章开头我也说过，我在写计算器项目的时候，在编写计算器的功能时，我写了大量的if-else语句来实现这些功能，但是这样操作了代码的冗余，并且可读性差、bug很多，因此我亲切的称呼其为“8噶机”。如下图可以看到代码非常冗余，嵌套了大量的if-else来进行判断，导致项目越写bug越多
于是我选择用JavaScript设计模式-策略模式来重新编写封装这些功能函数，使用之前我们要分清楚策略模式的两个组成部分，一个是策略类，一个是环境类
策略类（可变）：封装了具体的方法，并且负责方法的实现。
环境类（不可变）：接受调用，并把请求委托给某个方法，最终被客户端调用。
一些功能图如下，由此可知图一为策略类，图二为环境类
图一
图二
4.3.1代码如下
let strategy={
"A": function ( salary ){
return salary*4;
},
"B": function ( salary ) {
return salary*3;
},
"C": function ( salary ) {
return salary*2;
}
}
let calculateBonus=function ( level, salary ) { //level是指 A B C这三个对象
return strategy[ level ]( salary );
}
console.log(calculateBonus('A', 10)) // 40JavaScript的对象可以直接创建，将函数封装进去，这样一来就可以减少if-else语句进行多层嵌套了，代码显得清晰简洁，可读性更好。而且代码的维护和修改更加清晰。
点击下方，第一时间了解华为云新鲜技术~
华为云博客_大数据博客_AI博客_云计算博客_开发者中心-华为云
击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
为了解决不同浏览器之间的一些行为差异，前端都会在代码里加一段CSSReset代码，来将所有的元素设置统一的样式，从而保证我们能在一个统一的样式下开始开发项目。
大多数人，这部分代码都不愿意手动去写，经常会用一些现有的库来处理这部分工作，如normalize.css，minireset等等。其实这里面有好多冗余的CSS代码。我一般不太喜欢这么搞。
然而，如果你也是和我一样，是自己去写这部分代码的话，我建议你往里加一行代码，如下所示：
如上面代码所示，margin和padding没什么奇怪的，主要注意box-sizing我设置了border-box。
对的，所有的DOM的都应该为border-box。如果有人对box-sizing不是很了解的话，那么，下面，接下来我就给大家理清一下它的用法。（之前，我的文章里有写过它的详细用法，可以参考）
它主要有两种取值：
1、content-box
当设置某个元素的宽高（width/height）时，仅仅会作用于其内容尺寸。其它，所有的padding和margin都是在其之上的累加。
比如：有个DIV设置width=80，padding=10，那么最终元素占用100（80+2*10）像素。
2、border-box
记住，padding和margin是包含在了宽高之内的。
比如，有个DIV设置width=80，padding=10，marign=10那么最终元素占用80（40+2*10+2*10）像素。
总结一下：
在重置代码里将元素设置为border-box会很方便我们进行样式布局。比如可以在父元素设置高度限制而不担心子元素的内边距或者边框来打破这种限制。
众号【传智播客博学谷】回复关键词：前端 PS Java(100G) Python(80G) 大数据 区块链 测试 PPT JS(40g+300教程) HTML 简历 领取相关学习资料！
一、HTML
1、<image>标签上title属性与alt属性的区别是什么？
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。参考《alt和title属性的区别及应用》
2、分别写出以下几个HTML标签：文字加粗、下标、居中、字体
加粗：<b>、<strong>
下标：<sub>
居中：<center>
字体：<font>、<basefont>、参考《HTML标签列表》
3、请写出至少5个html5新增的标签，并说明其语义和应用场景
section：定义文档中的一个章节
nav：定义只包含导航链接的章节
header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
参考《HTML5 标签列表》
4、请说说你对标签语义化的理解？
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
5、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
6、你知道多少种Doctype文档类型？
标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，
Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
7、HTML与XHTML——二者有什么区别
a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。
参考《XHTML 与 HTML 之间的差异》
8、html5有哪些新特性、移除了那些元素？
a. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
b. 拖拽释放(Drag and drop) API
c. 语义化更好的内容标签（header,nav,footer,aside,article,section）
d. 音频、视频API(audio,video)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
h. sessionStorage 的数据在页面会话结束时会被清除
i. 表单控件，calendar、date、time、email、url、search
j. 新的技术webworker, websocket等
移除的元素：
a. 纯表现的元素：basefont，big，center, s，strike，tt，u；
b. 对可用性产生负面影响的元素：frame，frameset，noframes；
9、iframe的优缺点？
优点：
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点：
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的http请求
d. 会产生很多页面，不容易管理。
参考《iframe的一些记录》
10、Quirks模式是什么？它和Standards模式有什么区别？
在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。
区别：总体会有布局、样式解析和脚本执行三个方面的区别。
a. 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
b. 设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
c. 设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用
d. 设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。
11、请阐述table的缺点
a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
e. 不够语义
参考《为什么说table表格布局不好？》
12、简述一下src与href的区别
src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接
公众号【传智播客博学谷】回复关键词：前端 PS Java Python 大数据 区块链 测试 PPT JS HTML 简历 领取相关学习资料！
*请认真填写需求信息，我们会在24小时内与您取得联系。
