Skip to content

Instantly share code, notes, and snippets.

@stormwild
Created December 8, 2012 02:50
Show Gist options
  • Save stormwild/4238330 to your computer and use it in GitHub Desktop.
Save stormwild/4238330 to your computer and use it in GitHub Desktop.
Immediately-Invoked Function Expression (IIFE) / (jQuery Self Executing Closure Pattern) and other useful javascript snippets
// “self-executing anonymous function” (or self-invoked anonymous function)
// Reference: http://stackoverflow.com/questions/188663/jquery-javascript-design-self-executing-function-or-object-literal
;(function($) {
var myPrivateFunction = function() {
};
var init = function() {
myPrivateFunction();
};
$(init);
})(jQuery);
// http://benalman.com/news/2010/11/immediately-invoked-function-expression/
// Immediately-Invoked Function Expression (IIFE)
// Either of the following two patterns can be used to immediately invoke
// a function expression, utilizing the function's execution context to
// create "privacy."
(function(){ /* code */ }()); // Crockford recommends this one
(function(){ /* code */ })(); // But this one works just as well
// Pactpub.KnockoutJS.Starter.Nov.2012
// Define the namespace
window.myApp = {};
(function(myApp) {
// Product Constructor Function
function Product() {
var self = this;
// "SKU" property
self.sku = ko.observable("");
// "Description" property
self.description = ko.observable("");
// "Price" property
self.price = ko.observable(0.00);
// "Cost" property
self.cost = ko.observable(0.00);
// "Quantity" property
self.quantity = ko.observable(0);
}
// add to our namespace
myApp.Product = Product;
}(window.myApp));
// Usage
// create an instance of the Product class
var productA = new myApp.Product();
// "set" the 'sku' property
productA.sku('12345')
// "get" the 'sku' property value
var skuNumber = productA.sku();
// Products ViewModel
(function(myApp) {
// constructor function
function ProductsViewModel() {
var self = this;
// the product that we want to view/edit
self.selectedProduct = ko.observable();
}
// add our ViewModel to the public namespace
myApp.ProductsViewModel = ProductsViewModel;
}(window.myApp));
// http://skilldrick.co.uk/2011/04/closures-explained-with-javascript/
function f(x) {
function g() {
return x;
}
return g;
}
//Tell f to create a new g
var g5 = f(5);
//g5 is a function that always returns 5
alert(g5());
//Tell f to create another new g
var g1 = f(1);
//g1 is a function that always returns 1
alert(g1());
function person(name) {
function get() {
return name;
}
function set(newName) {
name = newName;
}
return [get, set];
}
var getSetDave = person('Dave');
var getDave = getSetDave[0];
var setDave = getSetDave[1];
alert(getDave()); //'Dave'
setDave('Bob');
alert(getDave()); //'Bob'
var getSetMary = person('Mary');
var getMary = getSetMary[0];
var setMary = getSetMary[1];
alert(getMary()); //'Mary'
@stormwild
Copy link
Author

jQuery equivalent of JavaScript's addEventListener method
http://stackoverflow.com/questions/2398099/jquery-equivalent-of-javascripts-addeventlistener-method

As of jQuery 1.7, .on() is now the preferred method of binding events, rather than .bind():

From http://api.jquery.com/bind/:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate().
The documentation page is located at http://api.jquery.com/on/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment