如何在jQuery链式调用中添加条件判断，精简冗余重复代码

优化实现方案 #

你可以利用jQuery方法的特性实现不打断链式调用，完全消除重复逻辑，这里提供两种适配不同场景的写法：

写法1：利用.css()方法特性（最适配当前场景） #

jQuery的.css()方法接收样式对象作为参数时，如果传入空对象，不会对元素做任何样式修改，且会原样返回当前jQuery对象，刚好可以无缝插入条件判断：

function startBlinking(el, speed = 100, inlineDisplay = true) {
  el
    .css(inlineDisplay ? { display: 'inline' } : {})
    .fadeToggle(speed, function() {
      startBlinking(el, speed)
    });
}

写法2：通用条件链式写法（适配所有jQuery方法） #

如果后续需要判断插入的是其他jQuery方法，可以用三元表达式直接返回对应链路的对象，不需要拆分逻辑：

function startBlinking(el, speed = 100, inlineDisplay = true) {
  (inlineDisplay ? el.css('display', 'inline') : el)
    .fadeToggle(speed, function() {
      startBlinking(el, speed)
    });
}

两种写法都可以做到只写一次fadeToggle和递归逻辑，没有冗余代码，维护性更高。

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