Revealing Module Pattern

Object JavaScript – ECMAScript 6 Code Preview

December 17, 2014

ECMAScript 6 specification and implementation is underway and promises to bring many of the features that you’ve learned about in the posts on Object JavaScript.

This post gives you an idea of what the code looks like in ECMAScript 6. This post doesn’t cover ever feature. But you will learn about how ECMAScript 6 relates to:

Scope
Arrow Functions and Lexical this
Default Function Parameters
Classes
Inheritance
Modules
for-of
Arrow functions
Promises

I won’t come close to covering all the features. But you can get an idea of how ECMAScript 6 works to support the idea of Object JavaScript. Look to the references and to the specification for information about: Parameter handling, multiple return values, collections, destructuring, rest parameters & spread operator, iterators, array comprehension, and more.

Special thanks to Axel Rauschmayer for many of the snippets.

Continue reading “Object JavaScript – ECMAScript 6 Code Preview”

Object JavaScript – Getting Started with Modules Using RequireJS

April 22, 2014

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 NodeJS. Using a modular script loader like RequireJS will improve the speed and quality of your code.

When a project reaches a certain size, managing the script modules for a project starts to get tricky. You need to be sure to sequence the scripts in the right order, and you need to start seriously thinking about combining scripts together into a bundle for deployment, so that only one or a very small number of requests are made to load the scripts.

You may also want to load code on the fly, after page load.

RequireJS can help you manage the script modules, load them in the right order, and make it easy to combine the scripts later via the RequireJS optimizer without needing to change your markup. It also gives you an easy way to load scripts after the page has loaded, allowing you to spread out the download size over time.

Continue reading “Object JavaScript – Getting Started with Modules Using RequireJS”

Object JavaScript – Revealing Modular Pattern Into Asynchronous Modules

April 21, 2014

Let’s put our revealing module pattern into asynchronous modules definition (AMD).

Asynchronous module definition (AMD) is a JavaScript API for defining modules such that the module and its dependencies can be asynchronously loaded. It is useful in improving the performance of websites by bypassing synchronous loading of modules along with the rest of the site content.

modular, we generally mean it’s composed of a set of highly decoupled, distinct pieces of functionality stored in modules. As you probably know, loose coupling facilitates easier maintainability of apps by removing dependencies where possible.

Loose coupling implies each component can operate or be tested independently of other components.

Tight coupling implies each component “knows” the details or inner workings of other components.

In just a few lines of code you can provide for architectural features above to improve from revealing module pattern to asynchornous module definition code. Here’s a look into why and how.

Continue reading “Object JavaScript – Revealing Modular Pattern Into Asynchronous Modules”

Object JavaScript – Inheritance Using Revealing Module Pattern

April 10, 2014

In my last post, Understanding Prototypes, you learned that you can use prototypes to implement inheritance. In this post, I will agree with Javier Uria and Pedro Teixeira who posts on MetaDuck, who advocates a way to implement inheritance using the revealing module pattern.

Continue reading “Object JavaScript – Inheritance Using Revealing Module Pattern”

Object JavaScript – Scope, Self-Invoking Anonymous Function, Closures, Revealing Module Pattern

April 7, 2014

As you learned in my post on Scope, Namespaces, “use strict”, all variables are accessible from the global scope except variables that are declared within a function using the var keyword. In this post, we add the idea of closures.

Closures are functions that retain a reference to their free variables.

And we show how you can use closures in building a robust revealing module pattern. Along the way, we explore some other patterns, such as the self-invoking anonymous function. And in the conclusion show how you can use the revealing module pattern to extend existing modules.

This post relies heavily on Joe Zim’s article JavaScript Closures and the Module Pattern, whose explanation dovetails with the revealing module pattern and asynchronous modules definition.

When you see Asynchronous Module Definition (AMD), you will see how asynchronous modules build on these concepts.

Continue reading “Object JavaScript – Scope, Self-Invoking Anonymous Function, Closures, Revealing Module Pattern”

Object JavaScript – Namespaces, Anonymous Module, Revealing Module Pattern

April 6, 2014

Using globals give you the opportunity to have your code overwritten by any other JavaScript added to the page after yours. And that is an opportunity best to be avoided.

The work around is to use the revealing module pattern.

I am a huge fan of the revealing module pattern. It keeps your objects encapsulates and was easier to understand for me as a C# guy.

In this post, we will step through the various JavaScript patterns and ending up at how you can implement the revealing module pattern. You will see the JavaScript syntax to create objects and how the revealing module patterns uses scope to keep private data private and reveals the data you want public. And you can do this without mucking up your globals.

Continue reading “Object JavaScript – Namespaces, Anonymous Module, Revealing Module Pattern”