JSLint Type Confusion: function and object with jQuery .css()

问题

I am having difficulty getting these lines to validate using JSLint. I'm assuming (perhaps incorrectly) that they are actually valid. Here is the relevant code:

var shadowBox = $('<div/>').appendTo($(document.body));

// ...

shadowBox.css({
    left: (e.originalEvent.clientX + 10).toString() + 'px',
    top: e.originalEvent.clientY.toString() + 'px' 
});

The validation errors I am getting are:

Problem at line 492 character 22: Type confusion: function and .css: object.

shadowBox.css({

and

Problem at line 494 character 57: Type confusion: number and '+': string.

top: e.originalEvent.clientY.toString() + 'px'

I'm troubled more by the first one as that is a rather common jQuery syntax. The second seems like a false positive since I am concatenating string with string.

Thanks

EDIT

Figured out the problem:

Turns out JSLint is not happy with these two syntax patterns existing in the same document:

var $var = $('<div/>', {css: {width: '15px'}}); // ONE
$var.css({width : '20px'}); // TWO

回答1:

from jslint: Type Confusion

JSLint can do type inference. It can report cases were variables and properties are used to house multiple types. The warning is Type confusion: {a} and {b}. where the {a} and {b} will be replaced with the names of types.

It is usually easy to see what caused the warning. In some cases, it can be very puzzling. In the puzzling cases, try initializing your vars with typed values. For example, if you expect that n will contain numbers, then write

var n = 0;

That should produce clearer warnings.

Type confusion is not necessarily an error, particularly in a language that provides as much type freedom as this one does. But some inconsistencies are errors, so type discipline might be something to consider adding to your programming style. Also, the fastest JavaScript engines will slow down in the presence of type confusion. To turn off these warnings, turn on the Tolerate type confusion option.

var shadowBox = $('<div/>').appendTo($(document.body));

// ...

$(shadowBox).css({
    left: String.concat(e.originalEvent.clientX + 10).toString(), 'px'),
    top: String.concat(e.originalEvent.clientY.toString(), 'px') 
});

For the second error, you can use string.concat(e.originalEvent.clientY.toString(), 'px') or just ignore the error. jslint is a tool to detect bad practices, but is far from a perfect tool.

By the way, there is a js validator better than jslint: jshint. It does not have the rules that mr. crockford likes, it has the rules to better javascript.

回答2:

Turns out that JSLint has increased their "type confusion" rules.

Whereas I thought type confusion was defined purely as this:

var a = 1;
var b = a + 'string';

Turns out this is also considered type confusion by Mr. Crockford (I don't particularly agree with him)

function MyObject () {
    this.top() {
        return '15px';
    }
}

var anonObject = {top: '15px'};
var myObject = new MyObject();
var testString = myObject.top();

or a much simpler example in the context of jQuery

var $b = $('<div/>').css({top: '15px'}),
    a = $b.offset().top + 15;

I was under the impression that type confusion referred solely to identifiers changing value within scope. Though Mr. Crawford seems to think:

From: Douglas Crockford

Subject: Re: JSLint Type Problems

To: "Anthony S."

Date: Thursday, June 23, 2011, 11:44 AM

You seem to be confused about what type confusion is. If you don't want to see the warnings, then you don't have to.

回答3:

Regarding the first, is shadowBox.css actually a function? You're calling it as though it is. EDIT: Yes, since that's a regular jQuery object, you're using .css correctly. /EDIT

Regarding the second, that looks valid to me, though you don't give any context.

Note that jslint doesn't understand valid JS very well, and I always recommend not using it.

来源：https://stackoverflow.com/questions/6454446/jslint-type-confusion-function-and-object-with-jquery-css

标签

javascript

jquery

jslint