- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章11个Javascript小技巧帮你提升代码质量(小结)由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
本文会不断更新,不足之处欢迎评论区补充.
好处:
代码举例:
实现获取数据,然后操作dom显示数据,最后添加事件 。
函数提炼前 。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 逻辑都写在一起,需要将所有逻辑看完才知道这段代码是干嘛的,局部逻辑无法复用
function
main() {
$.ajax.get(
'/getData'
).then((res) => {
const ul = document.getElementById(
'ul'
);
ul.innerHTML = res.list.map(text => `<li class=
"li"
>${text}</li>`).join(
'\n'
);
const list = document.getElementsByClassName(
'li'
);
for
(let i = 0; i < list.length; i ++) {
list[i].addEventListener(
'focus'
, () => {
// do something
});
}
});
}
|
函数提炼后 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function
getData() {
return
$.ajax.get(
'/getData'
).then((res) => res.data.list);
}
function
showList(list) {
const ul = document.getElementById(
'ul'
);
ul.innerHTML = list.map(text => `<li class=
"li"
>${text}</li>`).join(
'\n'
);
}
function
addEvent() {
const list = document.getElementsByClassName(
'li'
);
for
(let i = 0; i < list.length; i ++) {
list[i].addEventListener(
'focus'
, () => {
// do something
});
}
}
// 逻辑清晰,一眼读懂每一步在做什么,某些提炼出来的函数还可以被复用
async
function
main() {
const list = await getData();
// 获取数据
showList(list);
// 显示页面
addEvent();
// 添加事件
}
|
如果一个函数体内有一些条件分支语句,而这些条件分支语句内部散布了一些重复的代码,那么就有必要进行合并去重工作.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// 合并前
function
main( currPage ){
if
( currPage <= 0 ){
currPage = 0;
jump( currPage );
// 跳转
}
else
if
( currPage >= totalPage ){
currPage = totalPage;
jump( currPage );
// 跳转
}
else
{
jump( currPage );
// 跳转
}
};
// 合并后
function
main( currPage ){
if
( currPage <= 0 ){
currPage = 0;
}
else
if
( currPage >= totalPage ){
currPage = totalPage;
}
jump( currPage );
// 把jump 函数独立出来
};
|
复杂的条件分支语句是导致程序难以阅读和理解的重要原因,而且容易导致一个庞大的函数。有时可以将条件分支语句提炼成语义化的函数,使代码更加直观,逻辑清晰.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// 根据不同季节决定打折力度
function
getPrice( price ){
var
date =
new
Date();
if
( date.getMonth() >= 6 && date.getMonth() <= 9 ){
// 夏天
return
price * 0.8;
}
return
price;
};
// 是否是夏天
function
isSummer(){
var
date =
new
Date();
return
date.getMonth() >= 6 && date.getMonth() <= 9;
};
// 提炼条件后
function
getPrice( price ){
if
( isSummer() ){
return
price * 0.8;
}
return
price;
};
|
如果多段代码实际上负责的是一些重复性的工作,那么可以用循环代替,使代码量更少.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
// 判断是什么浏览器
function
getBrowser(){
const str = navigator.userAgent;
if
(str.includes(
'QQBrowser'
)) {
return
'qq'
;
}
else
if
(str.includes(
'Chrome'
)) {
return
'chrome'
;
}
else
if
(str.includes(
'Safari'
)) {
return
'safri'
;
}
else
if
(str.includes(
'Firefox'
)) {
return
'firefox'
;
}
else
if
(explorer.indexOf(
'Opera'
) >= 0){
return
'opera'
;
}
else
if
(str.includes(
'msie'
)) {
return
'ie'
;
}
else
{
return
'other'
;
}
};
// 循环判断,将对应关系抽象为配置,更加清晰明确
function
getBrowser(){
const str = navigator.userAgent;
const list = [
{key:
'QQBrowser'
, browser:
'qq'
},
{key:
'Chrome'
, browser:
'chrome'
},
{key:
'Safari'
, browser:
'safari'
},
{key:
'Firefox'
, browser:
'firefox'
},
{key:
'Opera'
, browser:
'opera'
},
{key:
'msie'
, browser:
'ie'
},
];
for
(let i = 0; i < list.length; i++) {
const item = list[i];
if
(str.includes(item.key)) {
return
item.browser};
}
return
'other'
;
}
|
让函数变成多出口提前返回,替换嵌套条件分支.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function
del( obj ){
var
ret;
if
( !obj.isReadOnly ){
// 不为只读的才能被删除
if
( obj.isFolder ){
// 如果是文件夹
ret = deleteFolder( obj );
}
else
if
( obj.isFile ){
// 如果是文件
ret = deleteFile( obj );
}
}
return
ret;
};
function
del( obj ){
if
( obj.isReadOnly ){
// 反转if 表达式
return
;
}
if
( obj.isFolder ){
return
deleteFolder( obj );
}
if
( obj.isFile ){
return
deleteFile( obj );
}
};
|
函数参数过长那么就增加出错的风险,想保证传递的顺序正确就是一件麻烦的事,代码可读性也会变差,尽量保证函数的参数不会太长。如果必须传递多个参数的话,建议使用对象代替.
一般来说,函数参数最好不要超过3个 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
function
setUserInfo( id, name, address, sex, mobile, qq ){
console.log(
'id= '
+ id );
console.log(
'name= '
+name );
console.log(
'address= '
+ address );
console.log(
'sex= '
+ sex );
console.log(
'mobile= '
+ mobile );
console.log(
'qq= '
+ qq );
};
setUserInfo( 1314,
'sven'
,
'shenzhen'
,
'male'
,
'137********'
, 377876679 );
function
setUserInfo( obj ){
console.log(
'id= '
+ obj.id );
console.log(
'name= '
+ obj.name );
console.log(
'address= '
+ obj.address );
console.log(
'sex= '
+ obj.sex );
console.log(
'mobile= '
+ obj.mobile );
console.log(
'qq= '
+ obj.qq );
};
setUserInfo({
id: 1314,
name:
'sven'
,
address:
'shenzhen'
,
sex:
'male'
,
mobile:
'137********'
,
qq: 377876679
});
|
三目运算符性能高,代码量少。 但不应该滥用三目运算符,我们应该在简单逻辑分支使用,在复杂逻辑分支避免使用.
1
2
3
4
5
|
// 简单逻辑可以使用三目运算符
var
global =
typeof
window !==
"undefined"
? window :
this
;
// 复杂逻辑不适合使用
var
ok = isString ? (isTooLang ? 2 : (isTooShort ? 1 : 0)) : -1;
|
优点: 链式调用使用简单,代码量少.
缺点: 链式调用带来的坏处就是在调试不方便,如果我们知道一条链中有错误出现,必须得先把这条链拆开才能加上一些调试 log 或者增加断点,这样才能定位错误出现的地方.
如果该链条的结构相对稳定,后期不易发生修改,可以使用链式.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var
User = {
id:
null
,
name:
null
,
setId:
function
( id ){
this
.id = id;
return
this
;
},
setName:
function
( name ){
this
.name = name;
return
this
;
}
};
User
.setId( 1314 )
.setName(
'sven'
);
var
user =
new
User();
user.setId( 1314 );
user.setName(
'sven'
);
|
大型类的分解和函数的提炼很像,类太大会出现逻辑不清晰,难以理解和维护的问题。 合理的大类分解可以使类的逻辑清晰,且子模块可以方便复用.
编程语言计算乘除的性能都不高,但是某些情况使用位操作符可以提升乘除等运算的性能.
纯函数是指不依赖于且不改变它作用域之外的变量状态的函数。 纯函数的返回值只由它调用时的参数决定,它的执行不依赖于系统的状态(执行上下文)。 相同的输入参数,一定会得到相同的输出,也就是内部不含有会影响输出的随机变量.
不属于纯函数的特点:
纯函数的作用:
应用场景:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var
a = 1;
// 非纯函数
function
sum(b) {
return
a + b;
}
// 非纯函数
function
sum(b) {
a = 2;
return
b;
}
// 非纯函数
function
sum(b) {
return
b + Math.random();
}
// 纯函数
function
sum (b, c) {
return
b + c;
}
|
JavaScript设计模式与开发实践 。
到此这篇关于11个Javascript小技巧帮你提升代码质量(小结)的文章就介绍到这了,更多相关Javascript 提升代码质量内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我! 。
原文链接:https://juejin.cn/post/6909638377247604750 。
最后此篇关于11个Javascript小技巧帮你提升代码质量(小结)的文章就讲到这里了,如果你想了解更多关于11个Javascript小技巧帮你提升代码质量(小结)的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
目录 前言 style-loader css-loader sass-loader postcss-loader babel-l
目录 1、简单动态字符串(SDS) 2、链表 3、字典 哈希表 哈希表节点 字典 4、跳跃表
JS运行三部曲 js运行代码共分三步 语法分析 预编译 解释执行 JavaScript代码在运行时,首先会进行语法分析,通篇检查代码是否存在低级错误,然后进行预编译,整理内
目录 +拼接方式 sprintf函数 Join函数 buffer.Builderbuffer.WriteString函数 buffer.B
下面整理下python有哪些方式可以读取数据文件。 1. python内置方法(read、readline、readlines) read() : 一次性读取整个文件内容。推荐使用re
背景 项目中的流程监控,有几种节点,需要监控每一个节点是否超时。按传统的做法,肯定是通过定时任务,去扫描然后判断,但是定时任务有缺点:1,数据量大会慢;2,时间不好控制,太短,怕一
目录 1. 提炼函数 2. 合并重复的条件片段 3. 把条件分支语句提炼成函数 4. 合理使用循环 5. 提前让函数退出代替嵌套条件分支
开始之前,pandas中dataframe删除对象可能存在几种情况 1、删除具体列 2、删除具体行 3、删除包含某些数值的行或者列 4、删除包含某些字符、文字的行或者列 本文就针对这四种情况探讨
setData setData 是小程序开发中使用最频繁的接口,也是最容易引发性能问题的接口。在介绍常见的错误用法前,先简单介绍一下 setData 背后的工作原理。 工作原理 小程序的视图层
下面是五种实现斐波那契数列的方法 循环 ? 1
一,分析代码运行时间 第1式,测算代码运行时间 平凡方法 快捷方法(jupyter环境) 第2式,测算代码多次运行平均时间 平凡方法 快捷方法(jupyter环境) 第
python之成为图像处理任务的最佳选择,是因为这一科学编程语言日益普及,并且其自身免费提供许多最先进的图像处理工具。本文主要介绍了一些简单易懂最常用的python图像处理库。 当今世界充满了各种
流式布局 采用流式布局会将元素按从左到右的顺序排列,如果一个元素在一行中放不下,那这个元素会另起一行依然按照从左到右的顺序排列 示例: 代码 public class Tes
@PropertySource 作用是:对自定义的properties文件加载 使用:@PropertySource(value={"classpath:people.properti
实现消息队列的两种方式 apache activemq官方实例发送消息 直接在apache官网http://activemq.apache.org/download-archives.html下
常用配置 以下配置能使用File -> New Projects Settings -> Settings for New Projects进行配置的尽量用这个配置,因为这个配置是作用
摘要: 开发者开发部署web应用时通常使用tomcat服务器,很多初学者只懂得在开发工具上配置,但离开了开发工具,自己手动配置部署,并让一个项目跑起来,你会了吗。小编也遇到过这样的困扰。网上查找的
1. 字符串的翻转 利用切片 ? 1
cookie和session在java web开发中扮演了十分重要的作用,本篇文章对其中的重要知识点做一些探究和总结。 1.cookie存在于浏览器 随意打开一个网址,用火狐的调试工具,随意选取
1、使用内置的tomcat,通过java -jar的方式启动 比如:java -jar bms.jar 但是这种启动方式 一旦关闭控制台 或者crtl+c 退出 此时应用就关闭了
我是一名优秀的程序员,十分优秀!