3

I'm wondering if there is a static checker that will look at my javascript sources and tell me which native functions I should not use or use differently if I want my scripts to work across browsers.

For example Chrome does not know String.contains() but Firefox does. I would want to be warned that I should avoid String.contains() completely.

Another example would be the usage of Array.sort(), which only works correctly across browsers if your compare function returns a Number. All browsers will also accept boolean values but not behave consistently in this case. A warning about the return type would be great. (Analysis would be much more complex and maybe not even possible.)

Does somebody know about a static checker that warns about "non-ECMA" usage of native functions. I searched but did not find anything.

flasinger
  • 31
  • 3
  • Imho, you should be using jQuery and it's APIs for anything Javascript related as they will ensure you will have cross browser compatibility. The tip is to never try to re-invent what has been already invented and deeply tested. Hope I could help. – renatoaraujoc Oct 23 '14 at 14:57
  • @Renatinn : Javascript != jQuery. There are many standard Javascript features that don't have universal browser support... For instance, I can't see how jQuery might help you `String.trim` in IE8. – spender Oct 23 '14 at 15:23
  • http://api.jquery.com/jQuery.trim/ – renatoaraujoc Oct 23 '14 at 15:29
  • Notice that there is no "correct way" to deal with [comparisons that return booleans](http://stackoverflow.com/q/24080785/1048572); *every* browser will screw up (there are no "inconsistencies", it's just plain wrong). – Bergi Oct 23 '14 at 17:33
  • That is correct. By the spec the comparison must return a Number, otherwise the behavior is undefined. Since no browser will throw an exception in this case it is hard to detect that you are even doing something wrong. – flasinger Oct 24 '14 at 07:48
  • 1
    @Renatinn : bad example... how about ES6 generators, or many of the other features that **can't** be emulated by jQuery? – spender Oct 24 '14 at 13:27
  • There isn't any real library that solves every cross-browser problem as there are just way to many of them... but jQuery solves all of the DOM manipulation problems and haves some nice utility functions but if you want to move to something like prototypes like String.Contains it's getting into a league of where jQuery cant help so the best way is for you to check if it's a valid function and then if it's not just implement it your self.. or find a library that does all the poly-fills you want/need – ryanc1256 Nov 14 '14 at 23:41
  • I just noticed that auto-completion of the Firefox Javascript Scratchpad does not offer everything that Firefox understands. For example it does not offer String.contains. I assume it only shows standard methods. Furthermore, it offers interface description for every method including expected types. For Array.sort the description makes clear that the expected return value is a Number. This is no static code checker and is not applicable to existing code, but during development this can really help. – flasinger Nov 20 '14 at 08:55

1 Answers1

1

What you are looking for it is called a polyfill or polyfiller. It is code that checks for existing behaviors or functions on the browser. If the feature is not present, the polifill implements it.

http://en.wikipedia.org/wiki/Polyfill

An example of this implementation is Modernizr. https://github.com/Modernizr/Modernizr

Example of the String.contains method on https://github.com/robertkowalski/contains.js/blob/master/contains.js

if (typeof String.prototype.contains == 'function') {
  return;
}
String.prototype.contains = function(value, pos) {
   var string = this;
   ... implementation ...
}
jordiburgos
  • 5,964
  • 4
  • 46
  • 80
  • Polyfilling might be the way to go. I'd still have to make sure I only use functions that I have polyfilled and somehow keep a list of things that are ok to use... – flasinger Nov 17 '14 at 06:03
  • That is what a library does, keep track of that so you do not need to do it. – jordiburgos Nov 17 '14 at 10:47
  • We use Angular, which has polyfills for most things, but we still run into some compatibility issues in IE and Edge. E.g. `URLSearchParams`. – Barmar May 02 '19 at 17:18
  • Does Modernizr actually provide the polyfills? The documentation just says it's for detecting whether a feature is available, you still have to work around the missing features. – Barmar May 02 '19 at 17:25