技术问询：单事件绑定多函数与多事件绑定单函数哪个更优？

先聊聊两种绑定思路的优劣 #

首先得明确你说的两种方式分别是什么：

• 「单个事件绑定多个函数」：比如在同一个click事件里调用多个函数，像你提到的<a (click)="f1(); f2()">
• 「多个事件绑定单个函数」：这里应该是指给同一个事件类型（比如click）绑定多个独立的处理函数，也就是<a (click)="f1()" (click)="f2()">

这两种方式没有绝对的「更好」，得看你的需求场景：

• 前者的优势是直观简洁，所有关联逻辑集中在一处，别人看模板的时候一眼就知道这个点击事件触发了哪些操作，适合逻辑简单、两个函数关联性强的场景；缺点是如果后续要调整其中一个函数的触发条件，得修改这个绑定语句，灵活性稍弱。
• 后者的优势是解耦性更好，每个函数的绑定是独立的，比如后续你想通过*ngIf控制某个函数是否触发，直接给对应的(click)加条件就行；缺点是模板里会重复写事件属性，显得有点冗余，而且不同框架对同一事件的多个绑定执行顺序可能有不同的处理逻辑（不过你说不关心顺序，这点可以忽略）

针对你的具体需求，该怎么选？ #

你提到不关心函数执行顺序，也不想新增一个包装函数来调用f1和f2，那这两种写法在Angular里都是可行的，但我更推荐<a (click)="f1(); f2()">：

1. 它的写法更紧凑，模板不会因为重复的(click)属性显得杂乱；
2. 这种方式是Angular里更常规的写法，团队协作时其他人更容易理解；
3. 如果你后续要调整逻辑，比如在f1和f2之间加个判断，直接在这个语句里修改就行，比如(click)="if(condition) {f1(); f2()}"，也很方便。

当然，如果你有后续可能需要单独控制其中一个函数是否触发的需求，那<a (click)="f1()" (click)="f2()">也是完全可以用的，Angular会按模板里的顺序依次执行这两个函数，只是看起来稍微啰嗦一点。

额外提个小建议 #

不管选哪种方式，尽量保证f1和f2都是职责单一的函数，比如f1负责提交数据，f2负责更新UI，这样即使后续逻辑变化，维护起来也会轻松很多～

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