共计 4581 个字符,预计需要花费 12 分钟才能阅读完成。
作者:Damian Ciplat
译者:前端小智
起源:dev
点赞再看 ,微信搜寻【大迁世界】 关注这个没有大厂背景,但有着一股向上踊跃心态人。本文
GitHub
https://github.com/qq44924588… 上曾经收录,文章的已分类,也整顿了很多我的文档,和教程材料。**
最近开源了一个 Vue 组件,还不够欠缺,欢送大家来一起欠缺它,也心愿大家能给个 star 反对一下,谢谢各位了。
github 地址:https://github.com/qq44924588…
双 12 阿里服务器 27
块,通用点击这里购买能够找我返现 30,等于 27
块就能买到了,只限新用户,能够用家人的手机号购买!
最近在重构代码时,我发现晚期的代码应用太多的 if
语句,其水平是我从未见过的。这就是为什么我认为分享这些简略的技巧是十分重要的,这些技巧能够帮忙咱们防止过多的应用 if
语句。
接下来会介绍 6
种形式来代替 if
的应用,这样做不是坚定不应用 if
偏执狂,而是换个形式思考咱们的编码思路。
1. 三元运算符
事例 1
带有 IF 的代码:
function saveCustomer(customer) {if (isCustomerValid(customer)) {database.save(customer)
} else {alert('customer is invalid')
}
}
重构后代码:
function saveCustomer(customer) {return isCustomerValid(customer)
? database.save(customer)
: alert('customer is invalid')
}
应用 ES6
const saveCustomer = customer =>
isCustomerValid(customer)?
database.save(customer) : alert('customer is invalid')
事例 2
带有 IF 的代码:
function customerValidation(customer) {if (!customer.email) {return error('email is require')
} else if (!customer.login) {return error('login is required')
} else if (!customer.name) {return error('name is required')
} else {return customer}
}
重构后代码:
const customerValidation = customer =>
!customer.email ? error('email is required')
: !customer.login ? error('login is required')
: !customer.name ? error('name is required')
: customer
事例 3
带有 IF 的代码:
function getEventTarget(evt) {if (!evt) {evt = window.event;}
if (!evt) {return;}
const target;
if (evt.target) {target = evt.target;} else {target = evt.srcElement;}
return target;
}
重构后代码:
function getEventTarget(evt) {
evt = evt || window.event;
return evt && (evt.target || evt.srcElement);
}
2. 短路运算符
事例 1
带有 IF 的代码:
const isOnline = true;
const makeReservation= ()=>{};
const user = {
name:'Damian',
age:32,
dni:33295000
};
if (isOnline){makeReservation(user);
}
重构后代码:
const isOnline = true;
const makeReservation= ()=>{};
const user = {
name:'Damian',
age:32,
dni:33295000
};
isOnline&&makeReservation(user);
事例 2
带有 IF 的代码:
const active = true;
const loan = {
uuid:123456,
ammount:10,
requestedBy:'rick'
};
const sendMoney = ()=>{};
if (active&&loan){sendMoney();
}
重构后代码:
const active = true;
const loan = {
uuid:123456,
ammount:10,
requestedBy:'rick'
};
const sendMoney = ()=>{};
active && loan && sendMoney();
3. 函数委托:
事例 1
带有 IF 的代码:
function itemDropped(item, location) {if (!item) {return false;} else if (outOfBounds(location) {
var error = outOfBounds;
server.notify(item, error);
items.resetAll();
return false;
} else {animateCanvas();
server.notify(item, location);
return true;
}
}
重构后代码:
function itemDropped(item, location) {const dropOut = function() {server.notify(item, outOfBounds);
items.resetAll();
return false;
}
const dropIn = function() {server.notify(item, location);
animateCanvas();
return true;
}
return !!item && (outOfBounds(location) ? dropOut() : dropIn());
}
大家都说简历没我的项目写,我就帮大家找了一个我的项目,还附赠【搭建教程】。
我和阿里云单干服务器,折扣价比拟便宜:89/ 年,223/ 3 年,比学生 9.9 每月还便宜,买了搭建个我的项目,相熟技术栈比拟香(老用户用家人账号买就好了,我用我妈的)举荐买三年的划算点,点击本条就能够查看。
4. 非分支策略
此技巧尝试防止应用 switch
语句,相同是用键 / 值创立一个映射并应用一个函数拜访作为参数传递的键的值。
事例 1
带有 switch
的代码:
switch(breed){
case 'border':
return 'Border Collies are good boys and girls.';
break;
case 'pitbull':
return 'Pit Bulls are good boys and girls.';
break;
case 'german':
return 'German Shepherds are good boys and girls.';
break;
default:
return 'Im default'
}
重构后代码:
const dogSwitch = (breed) =>({
"border": "Border Collies are good boys and girls.",
"pitbull": "Pit Bulls are good boys and girls.",
"german": "German Shepherds are good boys and girls.",
})[breed]||'Im the default';
dogSwitch("border xxx")
5. 作为数据的函数
咱们晓得在 JS 中函数是第一个类,所以应用它咱们能够把代码宰割成一个函数对象。
带有 IF 的代码:
const calc = {run: function(op, n1, n2) {
const result;
if (op == "add") {result = n1 + n2;} else if (op == "sub") {result = n1 - n2;} else if (op == "mult") {result = n1 * n2;} else if (op == "div") {result = n1 / n2;}
return result;
}
}
calc.run("sub", 5, 3); //2
重构后代码:
const calc = {add : function(a,b) {return a + b;},
sub : function(a,b) {return a - b;},
mult : function(a,b) {return a * b;},
div : function(a,b) {return a / b;},
run: function(fn, a, b) {return fn && fn(a,b);
}
}
calc.run(calc.mult, 7, 4); //28
6. 多态性
多态性是对象具备多种形式的能力。OOP 中多态性最常见的用法是应用父类援用来援用子类对象。
带有 IF 的代码:
const bob = {
name:'Bob',
salary:1000,
job_type:'DEVELOPER'
};
const mary = {
name:'Mary',
salary:1000,
job_type:'QA'
};
const calc = (person) =>{if (people.job_type==='DEVELOPER')
return person.salary+9000*0.10;
if (people.job_type==='QA')
return person.salary+1000*0.60;
}
console.log('Salary',calc(bob));
console.log('Salary',calc(mary));
重构后代码:
const qaSalary = (base) => base+9000*0.10;
const devSalary = (base) => base+1000*0.60;
//Add function to the object.
const bob = {
name:'Bob',
salary:1000,
job_type:'DEVELOPER',
calc: devSalary
};
const mary = {
name:'Mary',
salary:1000,
job_type:'QA',
calc: qaSalary
};
console.log('Salary',bob.calc(bob.salary));
console.log('Salary',mary.calc(mary.salary));
代码部署后可能存在的 BUG 没法实时晓得,预先为了解决这些 BUG,花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
原文:https://dev.to/damxipo/avoid-…
交换
文章每周继续更新,能够微信搜寻「大迁世界」第一工夫浏览和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录,整顿了很多我的文档,欢送 Star 和欠缺,大家面试能够参照考点温习,另外关注公众号,后盾回复 福利,即可看到福利,你懂的。