如何在由相互依賴的javascript文件組成的項目中有效地使用jshint？

Question

我是javascript（來自C / C ++ / Java）的新手，所以請耐心等待。

在我看來，linting是一件好事。 但是，我得到了很多“未定義的變量/引用”錯誤，我沒有看到如何以“好/有效的方式”解決這個問題。

假設我有一個用Html / Javascript編寫的更大的項目。 所以我想將它拆分為相互依賴的js模塊，例如：

common_utils.js (depends on external lib d3.js)
app1.js (depends on common_utils.js)
app2.js (depends on common_utils.js as well)

首先，沒有辦法將commmon_utils.js包含/引用到app1.js中，對吧？ 我只能使用html文件中的動態加載，對嗎？

（我的意思是，這不是那種奇怪嗎？似乎是最正常的事情...... !!（再次：我來自C ++ / Java））

好吧，公平，所以jslint / hint無法確定只有在加載d3.js時才會使用common_utils.js。 沒問題，我補充道

全球d3

到我的jshint配置，因為一切都在'命名空間'下。 不漂亮，但沒關系。

但是我的common_utils.js怎么樣？ 我不想為該文件中的每個函數定義手動添加linter異常。

關於如何在javascript中組織和開發項目，我是否完全錯了？

非常感謝你的時間！

Answer 1

關於如何在javascript中組織和開發項目，我是否完全錯了？

不，你是錢。

聽起來像common_utils.js在你的控制之下，對嗎？ 也就是說，這是你的代碼？ 我現在假設它是現在。

---

如果您發現要為每個函數添加例外，那么您不是命名空間 ，這將使linting lot更容易。

請注意，這就是d3js正在做的，給予或接受的。 以下是來自其網站的d3命名空間的d3用法示例：

D3采用聲明式方法，在稱為選擇的任意節點集上運行。 例如，您可以將上面的循環重寫為：

d3.selectAll("p").style("color", "white");

看到那個d3對象？ 你需要做同樣的事情。

您應該在common_utils.js聲明一個“父”對象，並將每個函數附加到它。 然后，您只需要在JSL / Hint設置中聲明一個全局，以獲取所有 common_util.js的函數。

這是兩個快速，非OO的例子。 第一個可能是最直接的。

請注意，您確實需要 function關鍵字與其第一個parens之間的（空格）。 也就是說， var spam = function ()在JSLint中是正確的，而var spam = function()則不是。 JSLint認為第二個看起來像一個典型的命名函數，而不是賦值。 很公平。

/*jslint browser: true, devel: true, sloppy: true, white: true */
var commonUtils = {};   // create the "parent" object.

// then add your functions to it, one by one.
commonUtils.test1 = function (myString) {
    if (console.log) { console.log("myString is: " + myString); }
};

commonUtils.test2 = function (myString) {
    window.alert("myString is: " + myString);
};

...或 - 這是一個更常見的，我認為 - 你可以使用JSON表示法，一旦你得到上面的例子，這很容易理解：

/*jslint browser: true, devel: true, sloppy: true, white: true */
var commonUtils = {
    test1: function (myString)    {
        if (console.log) { console.log("myString is: " + myString); }
    },
    test2: function (myString)    {
        window.alert("myString is: " + myString);
    }
};

你也可以完全面向對象 ，如果這很重要，但現在聽起來並不像你需要的那樣。 命名空間應該可以解決問題。

現在您可以使用這樣的代碼調用...

/*jslint browser: true, devel: true, sloppy: true, white: true */
/*global commonUtils */

commonUtils.test1("console write");
commonUtils.test2("alert write");

無論您在命名空間中有多少函數，全局列表中唯一的項目是commonUtils 。 瞧。