在js开发中,如何减少if else语句的使用

发布于 2022-09-01 22:30:51 字数 93 浏览 27 评论 0

和朋友聊,面向过程的开发中代码有大量的IF ELSE,在java中可以用一些设计模式替换掉这些逻辑。不过我还没用很明白。 是否在js中也有类似的方法减少if else的使用

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

屋顶上的小猫咪 2022-09-08 22:30:51

if else多就多呗,只要可读性强,维护起来方便。jQuery.fn.init里就是一堆if else判断,难道要质疑jQuery作者的水平了?
并不是说if else多就不好,关键是看用的地方,jQuery.fn.init里除了if else判断简洁点,难道要改成switch?就算用工厂模式,还不是得做大量的if判断。

举个简单的例子,后端返回数据,前端根据状态进行不同操作

$.ajax().done(function (res) {
    if (res.state === 'SUCCESS') {
        //TODO
    } else if (res.state === 'FAIL') {
        //TODO
    } else {
        //TODO
    }
});

这里用if else不挺好的么,有啥问题么?不过我个人倾向于switch

$.ajax().done(function (res) {
    switch (res.state) {
        case 'SUCCESS':
            //TODO
            break;
        case 'FAIL':
            //TODO
            break;
        default :
            //TODO
    }
});

在比如我有一个方法根据类型获取名称,用if else会这样

function getName(type) {
    if (type === 'monkey') {
        return 'monkey name';
    } else if (type === 'cat') {
        return 'cat name';
    } else {
        return 'dog name';
    }
}

要我的话就不会这样写,改成下面的会更好

function getName(type) {
    var data = {
        monkey: 'monkey name',
        cat: 'cat name',
        dog: 'dog name'
    }

    return data[type] ? data[type] : data['dog'];
}

硬要把设计模式添加到JS里不是不可以,但是要看情况。生搬硬套过来的东西然并卵啊。
写代码记住三个字即可,短简易。代码短,读起来简单,维护容易,如果在性能和代码长度上二选一,我肯定选代码短,性能不行,加台服务器就是了。而冗长的代码并不是加个程序员就能搞定的。
保持着这个心态写代码,写出的东西离设计模式也不会差太多了。
多说一句:存在必有其价值,不能说if else多了就不好,凡事无绝对,适合A的未必就适合B,每个东西都有其实现的场景。同理改写设计模式未必就是最棒的,听起来高大上点而已。

溺孤伤于心 2022-09-08 22:30:51

代码整洁强迫症患者必须要来个抛砖引玉:
1.

if(a为真){
    a=a
}else{
    a=b
}

可写成:a = a || b

2.

if(a==b){
    a=c
}else{
    a=d
}

可写成:a = (a==b) ? c : d

3.
后台接口通常会返回这种数据:
fruit: 0 //0=苹果,1=梨子,2=桔子,3=柠檬,4=芒果...
这时写if...else是最痛苦的。我从同事那偷来个方法:

var _f = ['苹果','梨子','桔子','柠檬','芒果'];
shuiguo = _f[fruit];
初见 2022-09-08 22:30:51

我决定先扔一篇王yin的好文:《编程的智慧》

------ 看文上面的文章,下面的回答就不重要了 ------

设计模式跟语言没有多大关系,javascript也可以引入设计模式来解决if else逻辑,举一个例子:

假设现在要做一个登录跳转的逻辑,验证过程是这样三个步骤:(只是假设场景,可能不真实,但是能描述问题)

  1. 验证localStorage

  2. 验证Cookie

  3. 验证Url

场景a:先验证localStorage里有有无authed字段,假如有的话再验证cookie里有无userid字段,如果有,则验证通过。

场景b:先验证localStorage里有有无authed字段,假如有的话再验证cookie里有无userid字段,如果无,则验证Url中有无参数token,如果有token则验证通过,如果没有则不通过

so,我们引入职责链模式:

if(getLocalStorage.after(getCookie).after(getUrl)) {
  // auth success callback
} else {
  // auth fail callback
}

请题主尝试自行实现:

Function.prototype.after = function(fn) {
  // do something
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文