首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
pinews
V2EX  ›  程序员

JavaScript 这样写,不知道为什么,总觉有点别扭

  •  
  •   pinews · 211 天前 · 3499 次点击
    这是一个创建于 211 天前的主题,其中的信息可能已经有所发展或是发生改变。
    if (xxx) {
    ele.onclick = funA;
    } else {
    ele.onclick = funB;
    }

    总感觉哪里有问题。
    第 1 条附言  ·  211 天前
    我指的是 onclick 还能变来变去,总感觉应该是唯一的。
    33 回复  |  直到 2019-06-27 15:49:06 +08:00
    yxcoder
        1
    yxcoder   211 天前
    xxx?funA:funB
    jowan
        2
    jowan   211 天前
    ele.onclick = () => {
    fn(xxx);
    }
    sutang
        3
    sutang   211 天前   ♥ 4
    ele.onclick = xxx ? funA : funB
    azh7138m
        4
    azh7138m   211 天前
    没有缩进肯定别扭。
    Mitt
        5
    Mitt   211 天前 via iPhone
    能用语法糖解决的问题都不是问题,"编译器"可以帮你优化掉的
    zjsxwc
        6
    zjsxwc   211 天前
    function Condition1(){/*do sth when condition1*/}
    function Condition2(){/*do sth when condition2*/}

    xxx = "Condition1";
    ele.onclick = window[xxx];
    uxstone
        7
    uxstone   211 天前
    动态类型嘛 习惯就好
    tinycold
        8
    tinycold   211 天前   ♥ 1
    你的直觉是对的,对一个 DOM 元素动态地绑定 /移除事件监听是很蠢的事情,编译器到底能不能优化到那一步我不知道,不过你的同事肯定是还没优化到那个地步。

    如果你实在是有这么两个函数要重用,这个代码会写成:
    ```
    el.onclick = clickHandler

    // clickHandler
    if (xxx) {
    funA()
    } else {
    funB()
    }
    ```
    banricho
        9
    banricho   211 天前   ♥ 2
    写的什么鬼……

    ```JS
    const fnA = () => {}
    const fnB = () => {}
    const handle = () => {
    isA ? fnA() : fnB()
    }

    ele.addEventListener('click', handle)
    ```
    wenzhoou
        10
    wenzhoou   211 天前 via Android
    @tinycold 这两种写法明显不等价。
    tinycold
        11
    tinycold   211 天前
    @wenzhoou 我理解的「等价」是运行结果一样,不知道你说的「等价」是哪一层意思。
    pinews
        12
    pinews   211 天前
    @wenzhoou 是的,当 click 发生的时候,xxx 判断的结果可能已经变了
    hackfly
        13
    hackfly   211 天前
    函数在 js 属于第一类值,和 c 之类的有点不一样
    no1xsyzy
        14
    no1xsyzy   211 天前
    Qt 信号槽,handler 就是可以变的,甚至两个的。
    no1xsyzy
        15
    no1xsyzy   211 天前   ♥ 2
    @pinews #12 也有可能需要保留那时的判断结果
    单独存一个变量不如还是直接传函数。

    不过如果这些个 funA funB 还会在其他地方用,我想还是存变量好,方便调试,知道是点击事件触发的。
    pinews
        16
    pinews   211 天前
    @no1xsyzy 感谢,解答了我的疑惑
    emeab
        17
    emeab   211 天前
    ele.onclick: (() => {
    if(xxx) {
    funA()
    } else {
    funB()
    }
    })
    lraining
        18
    lraining   211 天前 via Android
    onclick 本质上是一个函数指针,直接指定函数指针或者在一个函数中指定,两者没有本质上的差别,但是有的时候给 onclick 赋值的时候要去掉之前的赋值,否则有可能 onclick 会指向多个函数
    markyun
        19
    markyun   211 天前
    // handleClick
    let handleClick;
    if (field === 'a') {
    handleClick = () => {
    this.a(row);
    };
    } else if (field === 'b') {
    handleClick = () => {
    this.b(row);
    };
    }
    learnshare
        20
    learnshare   211 天前
    理论上不建议 onclick,因为只能关联一个函数。应该是

    target.addEventListener('click', () => {
    xxx ? funA : funB;
    });
    tofishes
        21
    tofishes   211 天前
    你对 if-else 是不是有什么误解?两个条件分支是不假,但同时只会执行其中一条分支,只执行一条分支的话,哪里来的变来变去?

    ok,就算变来变去,同一个元素的 onclick 被覆盖一下不行么,跟变量重新赋值一样,有什么不能接受的?
    mooncakejs
        22
    mooncakejs   211 天前
    没问题啊,上面给 ternary 的,感觉还不如 if
    mooncakejs
        23
    mooncakejs   211 天前
    不过确实 onclick 不如 addEventListener,逻辑可以在两个里面实现
    libook
        24
    libook   211 天前
    不如试试在内部判断分流?

    ele.onclick = ()=>{
    if(xxx) _funcA() else _funcB();
    };
    Trim21
        25
    Trim21   211 天前 via iPhone
    onclick 这里只被赋值了一次 也没有变来变去的啊
    overflow99
        26
    overflow99   211 天前
    这样写不合理,函数有声明提升,建议把判断卸载函数里
    aleen42
        27
    aleen42   211 天前 via Android
    小心點,可能會內存洩漏
    Sparetire
        28
    Sparetire   211 天前 via Android
    楼上一群说不合理,讲道理合不合理也要具体情况具体分析吧,这里 if 写里面和写外面明显不等价,而如果 if 的判断条件 xxx 是一个开销很大的函数调用,写外面甚至还算得上是一个小优化
    jingyulong
        29
    jingyulong   211 天前 via iPhone
    if 里面写函数怪怪的,感觉哪里有问题
    Mutoo
        30
    Mutoo   211 天前
    1) 函数在 JS 里是第一公民( first class ),与变量可以被赋值传递。
    2) onclick 是 DOM LEVEL 0 的事件机制,非常原始。如果开发现代应该建议直接上 DOM LEVEL 3 的事件机制 dom.addEventListener()
    dzm
        31
    dzm   211 天前
    还没这样写过 onclick...总感觉这样写有点理解障碍?
    purelanren
        32
    purelanren   210 天前
    前提:这个判断应该是个业务逻辑,业务逻辑是客观存在的,这个判断是难以避免的
    所以这个判断不是以现在的写法,就是统一写在一个函数里面,在新的函数里面进行判断

    那么就要分两种情况:
    1. 这段代码是需要多次执行的,那些外面和写里面性能没区别
    2. 这段代码是一次性执行的,那写在外面在性能上而言甚至优于写里面

    至于 onClick 还是 addEventListener,看业务情况:
    1. 需要兼容 ie 较低版本,或者这个 dom 只需要绑定一个 click 回调,onClick 无疑是最方便的,既不需要兼容也不需要在再次绑定时卸载事件
    2. 多个点击回调,肯定用 addEventListener,不过就上面这段代码已经存在而言,应该不是这类情况

    结论:目前业务逻辑下没啥问题,但是你改成自己喜欢的写法也没问题。只能说对业务和性能没啥产出,不过自己维护的代码让自己舒服这点很重要~
    meepo3927
        33
    meepo3927   210 天前
    好久不写 onclick 了, 都是 addEventListener 或者 attachEvent
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1712 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 26ms · UTC 02:50 · PVG 10:50 · LAX 18:50 · JFK 21:50
    ♥ Do have faith in what you're doing.