将JS表达式转为函数及修复domReady函数语法错误求助

Hey there! Let's tackle your two needs: fixing the error in your domReady code, and understanding how to convert expressions into proper functions.

First, Why the Error Happens #

Your current code uses a ternary operator as a standalone statement:

domReady: function(callback) {
  (document.readyState === "interactive" || document.readyState === "complete") ? callback() : this.addEvent(document, "DOMContentLoaded", callback);
},

Linting tools (like ESLint) or strict mode checks will flag this because a standalone ternary expression doesn’t perform an explicit assignment or intentional function call. The ternary operator is designed to return a value, so using it solely for side effects (calling callback() or addEvent) is considered unidiomatic and triggers that error.

Fixing the Code #

The simplest and most readable fix is to replace the ternary operator with an explicit if/else statement, which makes your intent clear and avoids the linting error:

domReady: function(callback) {
  if (document.readyState === "interactive" || document.readyState === "complete") {
    callback();
  } else {
    this.addEvent(document, "DOMContentLoaded", callback);
  }
},

If you really want to keep using a ternary (though it’s unnecessary here), you can assign its result to a throwaway variable to satisfy the lint rule—though this is less intuitive:

domReady: function(callback) {
  // Assign to a dummy variable to resolve the expression error
  const _ = (document.readyState === "interactive" || document.readyState === "complete") ? callback() : this.addEvent(document, "DOMContentLoaded", callback);
},

The if/else version is always preferred here, as it’s easier for other developers (and future you!) to parse.

Converting Expressions to Functions #

Since you mentioned wanting to convert JavaScript expressions to functions, let’s tie this to your example. The ternary expression you used is a conditional expression—turning it into a function means wrapping it in a structure that explicitly handles executable logic, rather than just returning a value.

For example, you could extract the ready-state check into a reusable helper function:

// Helper function that converts the state-check expression into a reusable tool
function isDomReady() {
  return document.readyState === "interactive" || document.readyState === "complete";
}

domReady: function(callback) {
  if (isDomReady()) {
    callback();
  } else {
    this.addEvent(document, "DOMContentLoaded", callback);
  }
},

This makes your code more modular, easier to test, and aligns with the goal of converting standalone expressions into purpose-built functions.

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