CODEWITHSUNDEEP
javascriptbackwards-compatibilityjslintjshintweb-standards
spunka
spunka

Reputation: 31

Detect old Internet explorer Javascript functions ( < ES6)

There is a web online, library or something to detect old IE functions that are not compatible with Chrome/Firefox or just ES6?

Like: document.all, event.returnValue, etc

JsHint/Jslint are not detecting them as deprecated or incompatibles

Upvotes: 1

Views: 284

Answers (1)

ruffin
ruffin

Reputation: 17473

It's not quite fair to say JSLint won't tell you about deprecated properties. Let me explain.

Recall first that JavaScript is a dynamic language. You can assign any property to [almost] any object. You could assign all to window in a browser context if you wanted just by saying window.all = "Muahahaha!!! I'm evil!!!". You could add .all to a string with...

var spam = "a string";
spam.all = "I'm still evil!!!"

Or, worse, some piece of code could have changed the prototype for String (or any other object type) somewhere outside of your file. Try this in a browser console:

String.prototype.all = String.prototype.all || "This is beyond evil.";
// 'This is beyond evil.'
var spam = "spam"
// undefined
spam.all
// 'This is beyond evil.'

So JSLint doesn't, by default, check for properties on objects by names. Especially for objects that could live outside of your file's context (because JSLint lints file-by-file), it simply can't know what's happened to an object's properties and identify what's valid and what isn't.

(That's what TypeScript is for, btw.)

Unless you tell JSLint how!! -- the JSLint property directive ftw

Or you can use the JSLint property directive, which does exactly what you want, if you're willing to do some work.

If you put the property directive at the top of your file, JSLint will show errors for any properties that are used by objects on the page that aren't in that list.

For instance, try this on the official JSLint.com page:

/*property
    log
*/
/*jslint browser, devel */
function mySpam() {
    var spam = document.all;
    console.log(spam);
}

See how I'm using document.all but all isn't in the property directive? It's going to error for me.

1. Unregistered property name 'all'.
    var spam = document.all;

You might be saying, "But it will take me FOREVER to get all the good properties from my 3000 line file I'm linting into that directive!!"

Not so! Here's a tip: Paste your file, even unlinted, into JSLint.com. It will create a property directive for you in its report.

Here's one I made from AngularJS' [sic] route.js in just a few seconds:

/*property
    $$minErr, $evalAsync, $get, angularVersion, caseInsensitiveMatch, create,
    defaultPrevented, eagerInstantiationEnabled, extend, info, isArray,
    isDefined, isObject, isUndefined, length, module, noop, originalPath,
    otherwise, preventDefault, provider, redirectTo, reload, reloadOnSearch,
    reloadOnUrl, routes, run, substr, when
*/

Alphabetical, even.

Now just remove the ones you don't want and presto! You'll catch everything you need.

Is this a little tedious, and will it take a little massaging/training on files that use document properly? Yes, but, again, in a dynamic language, this is close to the best you can hope for with file-by-file linters.

NOTE: If this doesn't solve your issue, however imperfectly, that's when we need to see more of your files and hear more precisely what problem you're trying to solve in practice.

Upvotes: 1

Related Questions