andyfrench.info

Too many JavaScript frameworks. Too little time. This is a list of frameworks for me to keep track. It’s not meant to be exhaustive but contains the frameworks I’m coming across. For a fuller list why not try www.jsdb.io.

Framework	Description	URL
H5F	A JavaScript library that allows you to use the HTML5 Forms chapters new field input types, attributes and constraint validation API in non-supporting browsers.	https://github.com/ryanseddon/H5F
Angular JS	From Google. Somewhat similar to Knockout.	http://angularjs.org/
Backbone	Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.	http://backbonejs.org/
Bootstrap	Sleek, intuitive, and powerful front-end framework for faster and easier web development. Not just JavaScript. Includes HTML and CSS.	http://twitter.github.io/bootstrap
Breeze	Breeze is a JavaScript library that helps you manage data in rich client applications. If you store data in a database, query and save those data as complex object graphs, and share these graphs across multiple screens of your JavaScript client, Breeze is for you.	http://www.breezejs.com/
Durandal	Durandal is a cross-device, cross-platform client framework written in JavaScript and designed to make Single Page Applications (SPAs) easy to create and maintain.	http://durandaljs.com/
Font Awesome	The iconic font designed for Bootstrap. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.	http://fortawesome.github.io/Font-Awesome/
jQuery Mobile	A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.	http://jquerymobile.com/
jQueryUI	jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.	http://jqueryui.com/
jsRender	jsrender - Next-generation jQuery Templates, optimized for high-performance pure string-based rendering, without DOM or jQuery dependency.	https://github.com/BorisMoore/jsrender
Knockout	Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. MVVM!	http://knockoutjs.com/
Moment	A 5.5kb javascript date library for parsing, validating, manipulating, and formatting dates.	http://momentjs.com/
RequireJS	RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.	http://requirejs.org/
Toastr	Simple javascript toast notifications. Contribute to toastr development by creating an account on GitHub.	https://github.com/CodeSeven/toastr
Sammy	Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications. Routing!	http://sammyjs.org/
Underscore	Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It's the tie to go along with jQuery's tux, and Backbone.js's suspenders.	http://underscorejs.org/

Read More

JavaScript functions can be declared in a number of ways.

Basic declaration

function write(message) {
    var div = document.getElementById('message');
    var para = document.createElement("p");
    var node = document.createTextNode(message);
    para.appendChild(node);
    div.appendChild(para);
}

In the example above the function called write is declared and can be called later in JavaScript (e.g. write("My message here")).

Assigned function

Functions can be assigned to variables. There are basically 2 ways to do this: 1) name the function and assign it to a variable, 2) don’t name the function and assign it to a variable.

var writeFunc = function write(message) {
    var div = document.getElementById('message');
    var para = document.createElement("p");
    var node = document.createTextNode(message);
    para.appendChild(node);

    div.appendChild(para);
};

In the example above the function is named (write) and assigned to a variable (writeFunc). The function must now be called via the variable name (e.g. writeFunc("My message here")). Note the semi-colon at after the last curly brace.

var writeFunc = function (message) {
    var div = document.getElementById('message');
    var para = document.createElement("p");
    var node = document.createTextNode(message);
    para.appendChild(node);

    div.appendChild(para);
};

In the example above the function is not named (it’s an anonymous function) but is still assigned to a variable as before.

Anonymous function immediately invoked

(function (message) {
    var div = document.getElementById('message');
    var para = document.createElement("p");
    var node = document.createTextNode(message);
    para.appendChild(node);

    div.appendChild(para);
})("This is a message.");

In the example above the function is anonymous. However, because it is wrapped in brackets and has an argument passed in (see the last line) it will be immediately invoked.

Function overloading

Function overloading doesn’t work the same way in JavaScript as it does in C#. Declaring functions with the same names but different arguments doesn’t result in overloaded functions, rather the last function to be declared overwrites the others. Note that if you call a function and pass in too many arguments any unnecessary arguments are simply ignored.

Don’t forget that object parameters are passed by reference and primitive types by value.

Use an object to hold arbitrary values

One option is to add an object parameter as the last argument to a function. This object can be used as a bag into which you can put whatever parameters you want.

function functionTest(param1, param2, options) {
    write("param1: " + param1);
    write("param2: " + param2);
    write("options.opt1: " + options.opt1);
    write("options.opt2: " + options.opt2);
}

window.onload = function () {
    functionTest("This is param1", "This is param2", {opt1:"This is option1", opt2:"This is option2"});
}

Use the ‘arguments’ object

Another option is to use the arguments object. This is described as:

“An Array-like object corresponding to the arguments passed to a function.” [1]

function functionTest() {
    write("arguments[0]: " + arguments[0]);
    write("arguments[1]: " + arguments[1]);
    write("arguments[2]: " + arguments[2]);
}

window.onload = function () {
    functionTest("This is arguments[0]", "This is arguments[1]", "This is arguments[2]");
}

 

References

[1] https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments

Read More