Question

无论用户是否刚刚登录，HTML都是这样生成的：

用户刚刚登录：

<body>
   <div id="welcomemessage">
   <div id="content>
</body>

用户不只是登录：

<body>
   <div id="content>
</body>

jQuery代码：

$("div#welcomemessage").fadeIn(500,function(){
   //COMPLEX CODE
})

由于内部代码非常复杂，我不想写两次。那么有没有一种方法可以在没有if语句的情况下执行此代码？

Answer 1

您可以在函数中编写复杂代码，只重复函数调用：

var runComplexCode = function () {
    //COMPLEX CODE
};

if (/* exists element */) {
    $("div#welcomemessage").fadeIn(500, runComplexCode);
} else {
    runComplexCode();
}

Answer 2

为什么不将逻辑包装在你自己的函数中？

如果你疯了，你可以宣传整个事情并引入一些不必要的复杂性：

function $if(e) {
    $e = $(e)
    if($e.length) return Promise.resolve($e)
    return Promise.reject(e)
}

$if('#welcomemessage')
    .then(e => e.fadeIn(500, ...))
    .catch(/* do something else */)

虽然这有效，但请不要使用它。不要让事情比他们需要的更复杂。（除非你在这种方法中看到任何实际用途。）

Answer 3

实现这一目标的最简单方法是将复杂的逻辑提取到自己的函数中。然后，您可以使用if语句（或三元表达式，如下所示）根据DOM中是否存在#welcomemessage元素来指导您的逻辑流程。试试这个：

＆＃13;

var foo = function() {
  console.log('complex code here...');
}

var $welcome = $('#welcomemessage');
$welcome.length ? $welcome.fadeIn(500, foo) : foo();

＆＃13;

#welcomemessage { display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="welcomemessage">Welcome!</div>

＆＃13;

运行回调函数是否存在元素

3 个答案: