JavaScript中onclick调用多个函数的该写法是否符合最佳规范？

你贴的写法可以运行，但绝对不是符合规范的最佳实现，存在几个明显的不规范问题。

现有写法的问题 #

• 用逗号运算符,串联调用多个函数属于取巧用法：JavaScript里逗号运算符确实会从左到右执行每一段表达式，最终返回最后一个表达式的结果，功能上能实现依次调用三个函数的效果，但这种写法可读性极差，几乎所有主流前端代码规范都会禁止这种用法——其他开发者看到很容易误以为是手误把分号打成了逗号，后续维护很容易出问题。
• 内联onclick事件本身属于过时的写法：把事件逻辑直接写在HTML属性里，会造成页面结构和业务逻辑强耦合，既不方便后续统一维护事件逻辑，也无法灵活做事件解绑、多事件绑定等操作，还会强制要求事件处理函数必须挂在全局作用域下，容易造成全局变量污染。
• 现有逻辑存在遗漏：非空校验失败时只给提示文本，没有在校验通过时清空旧的错误提示；取值时没有处理用户输入的首尾空格，用户输入全空格会直接绕过校验；如果按钮是表单提交按钮，当前写在函数里的return false也无法正常阻止默认提交行为。

推荐的规范写法 #

第一步：去掉HTML里的内联事件，把结构和逻辑分离 #

<button type="button" id="submitBtn">Submit</button>

第二步：JS中用addEventListener绑定事件，多函数调用单独换行写分号 #

function validateForm () {
    // 取输入值时加trim处理首尾空白，避免全空格绕过校验
    const inputVal = document.forms["myForm"]["myInput"].value.trim();
    const tipNode = document.getElementById("noName");
    if (!inputVal) {
        tipNode.innerHTML = "Please Enter Name";
        return false;
    }
    // 校验通过清空旧提示
    tipNode.innerHTML = "";
    // 多个函数调用单独换行、用分号结尾，不要用逗号串联
    getInputValue();
    getHoliday();
    hello();
    return true;
}
// 绑定点击事件
document.getElementById("submitBtn").addEventListener("click", validateForm);

额外的规范建议 #

• 如果你暂时因为历史原因必须保留内联onclick的写法，也绝对不要用逗号串联函数，把else块里的代码改成每个函数单独占一行、分号结尾即可。
• 不要依赖逗号运算符做多语句执行，这种写法除了炫技没有任何实际收益，只会提升代码的理解成本。
• 表单校验场景不要只监听按钮点击，最好同时绑定表单的submit事件，覆盖用户按回车提交的场景。

内容的提问来源于stack exchange，提问作者Dean Dunning