Modular Programming with JavaScript电子书

Modular Programming with JavaScript

Table of Contents

Modular Programming with JavaScript

Credits

About the Author

About the Reviewers

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. What Are Modules and Their Advantages?

Prelude to modular programming

The simple rule for creating modules

A real-life example of modules

A look at a non-modular example

Re-factoring to a more modularized approach

Designing in a modular way

Summary

2. Review of Important JavaScript OOP Concepts

JavaScript objects

Object type constructors

Object literal notation

Function objects

Functions as object constructors (classes)

Functions as static objects

Object literal notation versus function objects

The "this" keyword

Closures

Encapsulation and scoping

Inheritance

Prototype chaining

Property look up in prototype chaining

Resetting the constructor property

Constructor stealing

Parasitic combination inheritance

Constructor property

Native support for inheritance

Summary

3. Module Design Pattern

Module pattern

Internal private scope in module pattern

Adding properties to an interface in module pattern

Object factory module

Creating loose coupling among modules

Application core module

Application Mediator module

Application non-core modules

testModule1 implementation

testModule2 implementation

Auto-initialization of application modules

Module initialization and design considerations

Summary

4. Designing Simple Modules

The big picture

Our application requirements

Dynamic views

Designing our SPA main pieces

Application controller

Application controller modules

Page updater module

Storage handler module

Communication handler module

Utilities module

Message handler module

Logging handler module

Creating our first core module

Structure of our first module

Using our first module's functionality

Mapping our module's methods to its interface

Application view

Creating the index.html page skeleton

Creating an object definition for the header

Generating the Header fragment dynamically

Generating client application's view dynamically

Application model

Creating a module for our application's model

Creating a logging module

Summary

5. Module Augmentation

Principles of module augmentation

Implementing module augmentation

Simple augmentation of ImagesInc_GlobalData

The order of things in module augmentation

Loose augmentation of modules

Loose augmentation of ImagesInc_GlobalData

Testing ImagesInc_GlobalData data encapsulation

Tight augmentation of modules

Tight augmentation of ImagesInc_GlobalData

Loading ImagesInc_GlobalData augmenting code

Considerations in tight augmentation

Generating our application's content area

Summary

6. Cloning, Inheritance, and Submodules

Cloning modules

Creating instances of a constructor function

Using the assignment operator for copying objects

Creating a clone of an object

Shallow cloning and deep cloning

Using external libraries for cloning

Using JSON exploit for cloning

Creating a custom clone method

Creating ImagesInc_Utilites module

Testing our custom cloning method in ImagesInc_Utilites module

An important aspect of our cloning method

Inheritance in modules

Module inheritance using __proto__ object

Module inheritance using parasitic combination

Deciding on the module inheritance approach

Submodules

Adding submodules using dynamic properties

Adding submodules using asynchronous properties

Summary

7. Base, Sandbox, and Core Modules

Application architecture overview

Base module

Adding general-purpose libraries to the base module

Sandbox module

Sandbox module functionality

Sandbox as a consistent interface

Sandbox as a security layer

Sandbox as a communication layer

Sandbox as a filter

Implementing multiple instances of the sandbox module

Advantages of multiple instances of the sandbox

Isolating the sandbox instances from each other

Creating a code execution context

Performance improvements

Core module

Core module construction approach

Core module functionality

Acting as the controller

Providing communication bridges

Initializing and destroying components

Providing plug-and-play capability

Providing a centralized approach to handling errors

Providing application-level extensibility

Leveraging third party libraries

Components

Components required methods

Binding events to the components elements

Component design considerations

Application architectural considerations

Summary

8. Application Implementation – Putting It All Together

The user's view of our application

Application functionality

Index page

Image page

Favorites page

Support widget

Application implementation

Loading our module files in index.html

Base module implementation

Core module implementation

MainCore module implementation

Augmenting MainCore module

Augmenting MainCore using tight augmentation

Augmenting MainCore using sub-modules

Component registration with MainCore

Dynamic loading of components by MainCore

Storing object definitions in local storage

Getting a component's object definition from local storage

Dynamically loading component's resources from the server

Routing functionality in MainCore module

Adding a URL to the history object of the browser

Getting a URL from the history object of the browser

Publish-subscribe implementation in MainCore

Registering components for custom events

Broadcasting custom events by components

SandBox module implementation

SandBox module's constructor

Setting a component's container context in the SandBox instance

Identifying the SandBox module's instance

SandBox module considerations

Application components

Registering components with MainCore module

Header component

Footer component

Content component

Handling content area click events

Handling the Add To Favorite link click event

Handling an image click event

Content area generator methods

NotificationWidget component

NotificationWidget's model

Required methods of the notificationWidget component

Rendering notificationWidget

GlobalData module

Summary

9. Modular Application Design and Testing

Advantages of writing automated tests

Different types of automated tests

Unit testing

TDD unit tests

BDD unit tests

TDD versus BDD

Test coverage

Integration testing

End to end testing

A simple start to writing our unit tests

Writing unit tests without any unit testing frameworks

Adding an AppTester module to our application

Adding unit test suites to our test-runner

CookieHandler module unit tests

Running CookieHandler unit tests

Cleaning up after running our unit tests

Writing unit tests using third party frameworks

Introduction to Jasmine

Setting up Jasmine

Creating our Jasmine spec file

Running our Jasmine unit tests

Exploring Jasmine further

Introduction to Mocha

Setting up Mocha

Chai

Creating our Mocha spec file

Running our Mocha-Chai unit tests

Exploring Mocha further

Summary

10. Enterprise Grade Modular Design, AMD, CommonJS, and ES6 Modules

Revisiting index.html file

Introducing Asynchronous Module Definition

Defining modules using AMD format

Importing AMD modules

Introducing RequireJS

Downloading RequireJS

A test project for creating and loading AMD modules

Creating a simple AMD module

Consuming our person AMD module

Loading dependencies of dependencies

Loading and consuming non-AMD modules

Setting paths in the config object

Creating shims for non-AMD modules

Refactoring Images Inc. application to use AMD format

Modifying Core submodules into AMD modules

Loading our non-AMD modules using RequireJS

Setting up our application's config.js file

Booting up our application using RequireJS

CommonJS

Implementing a CommonJS module

ECMAScript 6 modules

Defining an ES6 module

Consuming an ES6 module

Module loading sequence in the browsers for ES6 modules

Summary

Index