CODEWITHSUNDEEP
javascriptjslintjshint
nandaloo
nandaloo

Reputation: 1027

How to use jshint efficiently in a project consisting of interdependent javascript files?

I'm new to javascript (coming from C/C++/Java), so please bear with me.

It seems to me that linting is a good thing to do. However, I'm getting a lot of "undefined variable/reference" errors, and I don't see how to solve that problem in a 'good/efficient way'.

Let's say I have a larger project written in Html/Javascript. So I want to split it into js-modules that depend on each other, e.g.:

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)

First there is no way of including/referencing commmon_utils.js into/to app1.js, right? I can only use dynamic loading from the html file, right?

(I mean, isn't that kind of weird? Seems like the most normal thing to do...!! (again: I'm coming from C++/Java))

Ok, fair enough, so there is no way for jslint/hint to figure out that common_utils.js will only be used when d3.js is loaded. No problem, I add

global d3

to my jshint configuration, since everything is under that 'namespace'. Not pretty, but all right.

But what about my common_utils.js? I don't want to manually add linter exceptions for every single function definition in that file.

Do I get something entirely wrong about how to organize and develop projects in javascript?

Thanks a lot for your time!

Upvotes: 3

Views: 367

Answers (1)

ruffin
ruffin

Reputation: 17453

Do I get something entirely wrong about how to organize and develop projects in javascript?

No, you're on the money.

It sounds like common_utils.js is in your control, correct? That is, it's your code? I'm going to assume it is for now.

If you find that you're adding exceptions for every function, then you're not namespacing, which will make linting lots easier.

Note that this is what d3js is doing, give or take. Here's an example of d3 usage with the d3 namespace from their website:

D3 employs a declarative approach, operating on arbitrary sets of nodes called selections. For example, you can rewrite the above loop as:

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

See that d3 object? You need to do the same thing.

You should declare a single "parent" object in common_utils.js and attach every function to it. Then you only need to declare one global in your JSL/Hint settings to get all of common_util.js's functions.

Here are two quick, non-OO examples. The first is probably the most straightforward.

Note that you do need the (space) between the function keyword and its first parens. That is, var spam = function () is correct in JSLint and var spam = function() is not. JSLint thinks the second looks like a typical named function, not an assignment. Fair enough.

/*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);
};

... or -- and this is a little more common, I think -- you can use JSON notation, which is easy enough to understand once you've got the above example down:

/*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);
    }
};

You can also go full object oriented, if that's important, but it doesn't sound like it's required for you now. Namespacing should do the trick.

Now you can invoke with code like this...

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

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

The only item in your globals list is commonUtils, no matter how many functions you have in its namespace. Voila.

Upvotes: 1

Related Questions