Functional Parameters – a neat JavaScript Design Pattern - Joss Crowcroft. If your JavaScript application / library / plugin has default and settable parameters or options, for example a url or a color, and your code expects a string, what happens if the user (the developer) wants to pass in a function that returns a string, instead? The url / url() parameter in Backbone.js ‘Collections’ in Backbone.js have a url parameter, from where the data is fetched. It can either be a string, or a function that returns a string. In Backbone, when defining your collection, all of these are valid: In the first example, the object’s URL is defined as a string, whereas in the second and third, the URL is a function that returns a string. Backbone’s source code uses Underscore.js‘s _.isFunction() to test whether the URL was a string or a dynamic function, and thus returns either object.url or object.url(): Functional Parameters in jQuery Plugins This could also apply to jQuery plugins, which often feature a defaults or options object that’s passed in like so: One example.
jQuery: The Write Less, Do More, JavaScript Library. Metaprogramming javascript. Learning Advanced JavaScript. Dive into 2010 [dive into mark] W3Fools – A W3Schools Intervention. Canvas vs SVG: How to Choose the Right Format. ToDataURL, Canvas, and SVG. Monday, October 5th, 2009 <p>I’m a fan of all the new ways of drawing on the web. I consider myself a Canvas evangelist, an SVG evangelist, and an evangelist for the new CSS Animation work going on. When asked “SVG or Canvas” I’ve long felt the right answer is: “Yes” :) Canvas is great at pixels, SVG is great at vectors, ’nuff said.
Give me my scriptable image tag (Canvas) AND my easy scene graph (SVG). Along these lines, I was delighted to attend a recent presentation by Samuli Kaipiainen and Matti Paksula from the University of Helsinki at SVG Open 2009. In their paper (which I recommend reading) they show all sorts of cool results concerning Canvas and SVG, but two results jumped out at me in particular. First, they showed apps built with SVG that should have used Canvas and vice versa to identify when to use one or the other. Second, both developers point out a nifty trick and snippet of code that I’m sure will become a regular part of peoples’ work.
Adequately Good - JavaScript Module Pattern: In-Depth - by Ben Cherry. The module pattern is a common JavaScript coding pattern. It's generally well understood, but there are a number of advanced uses that have not gotten a lot of attention. In this article, I'll review the basics and cover some truly remarkable advanced topics, including one which I think is original. The Basics We'll start out with a simple overview of the module pattern, which has been well-known since Eric Miraglia (of YUI) first blogged about it three years ago. If you're already familiar with the module pattern, feel free to skip ahead to "Advanced Patterns". Anonymous Closures This is the fundamental construct that makes it all possible, and really is the single . (function () { // ... all vars and functions are in this scope only // still maintains access to all globals }()); Notice the () around the anonymous function.
Global Import JavaScript has a feature known as . Luckily, our anonymous function provides an easy alternative. Module Export Advanced Patterns Augmentation Sub-modules. Using Objects to Organize Your Code - rmurphey. Asynchronous CommonJS Modules for the Browser (and Introducing Transporter) | SitePen Blog. Modules are an integral architectural piece of robust application development since they allow individual components to be developed with proper dependency management. Modules can specify dependencies and these can be automatically resolved and loaded to bring various pieces together automatically.
In application development this is vastly more scalable and easier than having to track all the different dependencies and manually load modules or insert script tags. The CommonJS module format is increasingly ubiquitous as the de facto module format for JavaScript. However, if CommonJS modules, by themselves, are directly executed, they require synchronous loading of modules. Synchronous loading is known to be very problematic in the browser since it locks the browser user interface, requires eval-based compilation of scripts which confuses debuggers, and is less efficient than using standard script tags. Automated Module Wrapping Dojo, RequireJS, CommonJS.
RequireJS. Usage§ 1 Load JavaScript Files§ 1.1 RequireJS takes a different approach to script loading than traditional <script> tags. While it can also run fast and optimize well, the primary goal is to encourage modular code. As part of that, it encourages using module IDs instead of URLs for script tags. RequireJS loads all code relative to a baseUrl. The baseUrl is normally set to the same directory as the script used in a data-main attribute for the top level script to load for a page.
Or, baseUrl can be set manually via the RequireJS config. RequireJS also assumes by default that all dependencies are scripts, so it does not expect to see a trailing ".js" suffix on module IDs. There may be times when you do want to reference a script directly and not conform to the "baseUrl + paths" rules for finding it. Ends in ".js".Starts with a "/".Contains an URL protocol, like "http:" or "https:". In general though, it is best to use the baseUrl and "paths" config to set paths for module IDs.
In index.html: