时间戳

首页 > 解决方案 > 如何使用严格模式而不在 JSlint 中出错

javascript - 如何使用严格模式而不在 JSlint 中出错

问题描述

查看 JSlint 上的所有信息（例如此处或此处），讨论如下

始终使用严格模式，因为它会捕获更多错误。您所要做的就是将“使用严格”放在代码的顶部。就是这样！再简单不过了...除非 JSlint 抱怨并告诉您将其放入函数范围内，否则您必须将所有代码放入一个巨大的函数中。

我有数百个用 javascript 编写的函数，并且至少<body>在加载时调用回调函数，所以我试图围绕我应该如何将我的所有函数放在另一个函数中，但仍然确保元素<body>仍然可以刺穿外部函数并在内部范围内调用我的函数。

有人可以告诉我如何为这样的事情实施严格模式

function foo(){
    "use strict"; /* Approach 1: Putting inside every function */
                  /* Extremely tedious and ugly */
    $('#example').text('Hello '+ bar());
}

function bar(){
    "use strict"; /* Approach 1: Putting inside every function */
                  /* Extremely tedious and ugly */
    return 'Beautiful';
}

function fooBar (){
    "use strict"; /* Approach 2: Putting once at the top of an outer function */
    
    /* But now how does <body> call this function? */
    function foo(){
        "use strict";
        $('#example').text('Hello '+ bar());
    }

    function bar(){
        "use strict";
        return 'Beautiful';
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload="foo();">
<p id='example'>
</p>
</body>

标签： javascriptecmascript-6scopejshint

解决方案

在现代 JavaScript 中，应尽可能避免内联处理程序，因为它们需要全局污染，需要使用一些参数转义难看的引号，并且具有荒谬的范围链规则。因此，请尝试删除内联处理程序并将您的 JavaScript 放入 IIFE，这可以变得严格：

(() => {
  "use strict";

  function foo() {
    $('#example').text('Hello ' + bar());
  }

  function bar() {
    return 'Beautiful';
  }
  window.addEventListener('DOMContentLoaded', foo);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <p id='example'>
  </p>
</body>

如果您有任何其他类似的内联处理程序<body onload="foo();">，我强烈建议您重构它们。

推荐阅读