Pro JavaScript for Web Apps pdf - EBook Free Download

CHAPTER 4 USING URL ROUTINGThe new script element in the listing adds the Modernizr library to the web app. Modernizr is afeature-detection library that contains checks to determine whether numerous HTML5 and CSS3features are supported by the browser. You can download Modernizr and get full details of the features itcan detect at http://modernizr.com.I don’t want to call the methods of the History API unless I am sure that the browser implements it,so I check the value of the Modernizr.history property. A value of true means that the History API hasbeen detected, and a value of false means the API isn’t present.You could write your own feature-detection tests if you prefer. As an example, here is the codebehind the Modernizr.history test:tests['history'] = function() {return !!(window.history && history.pushState);};Modernizr simply checks to see whether history.pushState is defined by the browser. I prefer to usea library like Modernizr because the tests it performs are well-validated and updated as needed and,further, because not all of the tests are quite so simple.• Tip Feature-detection libraries such as Modernizr don’t make any assessment of how well a feature has beenimplemented. The presence of the history.pushState method indicates that the History API is present, but itdoesn’t provide any insights into quirks or oddities that may have to be reckoned with. In short, a feature-detectionlibrary is no substitute for thoroughly testing your code on a range of browsers.If the History API is present, then I call the replaceState method to associate the value of the viewmodel items array with the current URL. I can perform no action if the History API isn’t availablebecause there isn’t an alternative mechanism for storing state in the browser (although I could haveused a polyfill; see the sidebar for details).USING A HISTORY POLYFILLA polyfill is a JavaScript library that provides support for an API for older browsers. Pollyfilla, from whichthe name originates, is the U.K. equivalent of the Spackle home-repair product, and the idea is that apolyfill library smoothes out the development landscape. Polyfill libraries can also work around differencesbetween browser implementation features. The History API may seem like an ideal candidate for a polyfill,but the problem is that the browser doesn’t provide any alternative means of storing state objects. Themost common workaround is to express the state as part of the URL so that we might end up withsomething like this:http://cheeselux.com/#select/Banana?items=Apple,Orange,Banana,CherryI don’t like this approach because I don’t like to see complex data types expressed in this way, and I thinkit produces confusing URLs. But you might feel differently, or a stateful history feature may be critical toyour project. If that’s the case, then the best History API polyfill that I have found is called History.js and isat http://github.com/balupton/history.js.98www.it-ebooks.info