Mike Cavaliere mcavaliere

## index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Event Pooling, or perhaps Pub/Sub</title>
    <script type="text/javascript" charset="utf-8" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
</head>
<body>
<strong>Who is this?</strong>
<form action="#" method="get" accept-charset="utf-8" id="whoisit">

## namespacing-bad-form-example.js
var element = $("div.form-errors");

if (formHasErrors()) {
  element.show();
}

// More, unrelated code...

var element = $("form#login");
element.addClass("has-errors");

## namespacing-better-form-example.js
var LoginFom = {
  element: $("form#login-form"),

  hasErrors: function() {
    // validation code here...
    // returns true or false.
  }
};

// ...

## namespacing-grouping-methods.js
// Old
function sum($elements) { /* calculate sum */ }

function product($elements) {  /* calculate sum */}

// New
var MathUtils = {
  function sum($elements) {},
  function product($elements) {}
};

## namespacing-grouping-data.js
// Old
var DEBUG = false;
var MAX_ENTRIES = 100;
var FEED_URL = "http://mysite.com/feed/";
var POST_IDS = [123, 456, 789];

// New
var Config = {
  DEBUG: true,
  MAX_ENTRIES: 100,

## namespacing-components-bad.js
// Heavily Coupled
$(function() {
     $(document.body).append( $('<select id="countries"></select>') );

     var countriesIveBeenTo = {
          'BE': 'Belgium',
          'CR': 'Costa Rica',
          'IT': 'Italy',
          'US': 'United States of America',
          'UK': 'United Kingdom'

## namespacing-components-better.js

// Less Coupled
var CountrySelectClass = function() {
  var countriesIveBeenTo = {
    'BE': 'Belgium',
    'CR': 'Costa Rica',
    'IT': 'Italy',
    'US': 'United States of America',
    'UK': 'United Kingdom'
  };

## namespacing-js-object-definition.js
var MyNamespace = {
  myString: "someString",
  myInt: 123,
  myFunc: function() {
    return this.myString + " " + this.myInt;
  }
};

## namespacing-usage.js
MyNamespace.myString;
MyNamespace.myInt;
MyNamespace.myFunc();

## namespacing-usage-nesting.js
var MyCompany = {
  Widgets: {
    data1: 123,
    func1: function() {}
  },
  HtmlUtils: {
    data1: 123,
    func1: function() {}
  }
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8"/>
	<title>Event Pooling, or perhaps Pub/Sub</title>
	<script type="text/javascript" charset="utf-8" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
	</head>
	<body>
	<strong>Who is this?</strong>
	<form action="#" method="get" accept-charset="utf-8" id="whoisit">
	var element = $("div.form-errors");

	if (formHasErrors()) {
	element.show();
	}

	// More, unrelated code...

	var element = $("form#login");
	element.addClass("has-errors");
	var LoginFom = {
	element: $("form#login-form"),

	hasErrors: function() {
	// validation code here...
	// returns true or false.
	}
	};

	// ...
	// Old
	function sum($elements) { /* calculate sum */ }

	function product($elements) { /* calculate sum */}

	// New
	var MathUtils = {
	function sum($elements) {},
	function product($elements) {}
	};
	// Old
	var DEBUG = false;
	var MAX_ENTRIES = 100;
	var FEED_URL = "http://mysite.com/feed/";
	var POST_IDS = [123, 456, 789];

	// New
	var Config = {
	DEBUG: true,
	MAX_ENTRIES: 100,
	// Heavily Coupled
	$(function() {
	$(document.body).append( $('<select id="countries"></select>') );

	var countriesIveBeenTo = {
	'BE': 'Belgium',
	'CR': 'Costa Rica',
	'IT': 'Italy',
	'US': 'United States of America',
	'UK': 'United Kingdom'

	// Less Coupled
	var CountrySelectClass = function() {
	var countriesIveBeenTo = {
	'BE': 'Belgium',
	'CR': 'Costa Rica',
	'IT': 'Italy',
	'US': 'United States of America',
	'UK': 'United Kingdom'
	};
	var MyNamespace = {
	myString: "someString",
	myInt: 123,
	myFunc: function() {
	return this.myString + " " + this.myInt;
	}
	};
	MyNamespace.myString;
	MyNamespace.myInt;
	MyNamespace.myFunc();
	var MyCompany = {
	Widgets: {
	data1: 123,
	func1: function() {}
	},
	HtmlUtils: {
	data1: 123,
	func1: function() {}
	}
	}