book

Learning JavaScript Design Patterns

by Addy Osmani

July 2012

Intermediate to advanced

254 pages

6h 16m

English

O'Reilly Media, Inc.

Start your free trial

Related skills

JavaScript

Associated roles

Backend developer
Database administrator
Frontend developer
Product manager

QA engineer

+1 more

Object CreationBasic ConstructorsConstructors with Prototypes
Object LiteralsThe Module PatternPrivacyHistoryExamplesModule Pattern VariationsImport mixinsExportsToolkit and framework-specific module pattern implementationsDojoExtJSYUIjQueryAdvantagesDisadvantages
AdvantagesDisadvantages
Differences Between the Observer and Publish/Subscribe PatternAdvantagesDisadvantagesPublish/Subscribe ImplementationsA Publish/Subscribe implementationUsing our implementationUser-interface notificationsDecoupling applications using Ben Alman’s Pub/Sub implementationDecoupling an Ajax-based jQuery application
Basic ImplementationAdvanced ImplementationExampleAdvantages and DisadvantagesMediator Versus ObserverMediator Versus Facade
Notes on Abstraction
When to Use the Factory PatternWhen Not to Use the Factory PatternAbstract Factories
Advantages and Disadvantages
InterfacesAbstract Decorators
Using FlyweightsFlyweights and Sharing DataImplementing Classical FlyweightsDuck punching “implements”Converting Code to Use the Flyweight PatternA Basic FactoryManaging the Extrinsic StatesThe Flyweight Pattern and the DOM
Smalltalk-80 MVC
ModelsViewsTemplatingControllersControllers in Another Library (Spine.js) Versus Backbone.jsSpine.jsBackbone.js
Delving DeeperSummary
Models, Views, and PresentersMVP or MVC?MVC, MVP, and Backbone.js
HistoryModelViewViewModelRecap: The View and the ViewModelRecap: The ViewModel and the Model
AdvantagesDisadvantages
Getting Started with ModulesAMD Modules with DojoAMD Module Design Patterns (Dojo)AMD Modules with jQueryRegistering jQuery as an Async-compatible moduleWhy AMD is a better choice for writing modular JavaScriptRelated readingScript loaders and frameworks that support AMDAMD Conclusions
Getting StartedConsuming Multiple DependenciesLoaders and Frameworks that Support CommonJSIs CommonJS Suitable for the Browser?Related Reading
UMD: AMD and CommonJS-Compatible Modules for Plug-insBasic AMD hybrid formatUsing CommonJS, AMD, or browser globals to create a modulejQuery plug-ins that function in all environmentsFurther reading
Modules with Imports and ExportsModules Loaded from Remote SourcesModule Loader APICommonJS-like Modules for the ServerClasses with Constructors, Getters, and SettersES Harmony ConclusionsRelated Reading
Further Reading
Further Reading
Further Reading
Further Reading
Further Reading
Further Reading
UsageFurther Reading
Further Reading
Further Reading
QualityCode StyleCompatibilityReliabilityPerformanceDocumentationLikelihood of maintenance
Single Global VariablesPrefix NamespacingObject Literal NotationNested NamespacingImmediately Invoked Function Expressions (IIFE)sNamespace Injection
Automating Nested NamespacingDependency Declaration PatternDeep Object ExtensionRecommendation

Content preview from Learning JavaScript Design Patterns

Smalltalk-80 MVC in JavaScript

Although the majority of modern-day JavaScript frameworks attempt to evolve the MVC paradigm to better fit the differing needs of web application development, there is one framework that attempts to adhere to the pure form of the pattern found in Smalltalk-80. Maria.js (https://github.com/petermichaux/maria) by Peter Michaux offers an implementation that is faithful to MVC’s origins: Models are models, Views are views and Controllers are nothing but controllers. While some developers might feel an MV* framework should address more concerns, this is a useful reference to be aware of in case you would like a JavaScript implementation of the original MVC.

Delving Deeper

At this point in the book, we should have a basic understanding of what the MVC pattern provides, but there’s still some fascinating information about it worth noting.

The GoF (Gang of Four) The GoF do not refer to MVC as a design pattern, but rather consider it a set of classes to build a user interface. In their view, it’s actually a variation of three classical design patterns: the Observer, Strategy, and Composite patterns. Depending on how MVC has been implemented in a framework, it may also use the Factory and Template patterns. The GoF book mentions these patterns as useful extras when working with MVC.

As we have discussed, models represent application data, while views represent what the user is presented with on screen. As such, MVC relies on the Observer pattern for some of its ...