Book Image

Modular Programming with JavaScript

Book Image

Modular Programming with JavaScript

Overview of this book

Programming in the modular manner is always encouraged for bigger systems—it is easier to achieve scalability with modular programming. Even JavaScript developers are now interested in building programs in a modular pattern. Modules help people who aren’t yet familiar with code to find what they are looking for and also makes it easier for programmers to keep things that are related close together. Designing and implementing applications in a modular manner is highly encouraged and desirable in both simple and enterprise level applications. This book covers some real-life examples of modules and how we can translate that into our world of programming and application design. After getting an overview of JavaScript object-oriented programming (OOP) concepts and their practical usage, you should be able to write your own object definitions using the module pattern. You will then learn to design and augment modules and will explore the concepts of cloning, inheritance, sub-modules, and code extensibility. You will also learn about SandBoxing, application design, and architecture based on modular design concepts. Become familiar with AMD and CommonJS utilities. By the end of the book, you will be able to build spectacular modular applications in JavaScript.

Related Content you might be interested in

Current Title:

Small book image
Modular Programming with JavaScript
Jul, 2016 | 274 pages
No titles found
Table of Contents (17 chapters)
Modular Programming with JavaScript
Modular Programming with JavaScript
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
What Are Modules and Their Advantages?
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
Review of Important JavaScript OOP Concepts
JavaScript objects
Summary
3
Module Design Pattern
Module Design Pattern
Module pattern
Creating loose coupling among modules
Summary
4
Designing Simple Modules
Designing Simple Modules
The big picture
Designing our SPA main pieces
Summary
5
Module Augmentation
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
Tight augmentation of modules
Generating our application's content area
Summary
6
Cloning, Inheritance, and Submodules
Cloning, Inheritance, and Submodules
Cloning modules
Creating ImagesInc_Utilites module
Inheritance in modules
Submodules
Summary
7
Base, Sandbox, and Core Modules
Base, Sandbox, and Core Modules
Application architecture overview
Base module
Sandbox module
Core module
Components
Application architectural considerations
Summary
8
Application Implementation – Putting It All Together
Application Implementation – Putting It All Together
The user's view of our application
Application functionality
Application implementation
Application components
GlobalData module
Summary
9
Modular Application Design and Testing
Modular Application Design and Testing
Advantages of writing automated tests
Different types of automated tests
A simple start to writing our unit tests
Summary
10
Enterprise Grade Modular Design, AMD, CommonJS, and ES6 Modules
Enterprise Grade Modular Design, AMD, CommonJS, and ES6 Modules
Revisiting index.html file
Introducing Asynchronous Module Definition
CommonJS
ECMAScript 6 modules
Summary
Index
Index

ECMAScript 6 modules

In the new version of JavaScript, ECMAScript 6 (also known as ES6), native modules have been introduced. The following points are some of the most important aspects of these modules:

  • Module code always automatically runs in strict mode

  • Variables that are created in the top level of a module are not added to the global scope

  • A module must export anything that should be available to the outside code

  • A module can import bindings (things that are exported from other modules)

The main idea behind modules in ES6 is to give you complete control over what is accessible to the outside code from inside the module, as well as when the code inside of the module is executed.

Let's have a look at a simple example of an ES6 module.

Defining an ES6 module

We can define an ES6 module either inside of a .js file, or inside a <script> tag in our.html page.

Consider the following code snippet, from an imaginary simpleModule.js file:

var name = "Tom";
// export function
export function sayHello...
Previous Section
End of Section 5
Next Section