Modular Programming with JavaScript

Table of contents

1. Modular Programming with JavaScript
   1. Table of Contents
   2. Modular Programming with JavaScript
   3. Credits
   4. About the Author
   5. About the Reviewers
   6. www.PacktPub.com
      1. eBooks, discount offers, and more
         1. Why subscribe?
   7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
         1. Downloading the example code
         2. Errata
         3. Piracy
         4. Questions
   8. 1. What Are Modules and Their Advantages?
      1. Prelude to modular programming
      2. The simple rule for creating modules
      3. A real-life example of modules
      4. A look at a non-modular example
      5. Re-factoring to a more modularized approach
      6. Designing in a modular way
      7. Summary
   9. 2. Review of Important JavaScript OOP Concepts
      1. JavaScript objects
         1. Object type constructors
         2. Object literal notation
         3. Function objects
            1. Functions as object constructors (classes)
            2. Functions as static objects
         4. Object literal notation versus function objects
         5. The "this" keyword
         6. Closures
         7. Encapsulation and scoping
         8. Inheritance
            1. Prototype chaining
               1. Property look up in prototype chaining
               2. Resetting the constructor property
            2. Constructor stealing
            3. Parasitic combination inheritance
         9. Constructor property
         10. Native support for inheritance
      2. Summary
   10. 3. Module Design Pattern
       1. Module pattern
          1. Internal private scope in module pattern
          2. Adding properties to an interface in module pattern
          3. Object factory module
       2. Creating loose coupling among modules
          1. Application core module
          2. Application Mediator module
          3. Application non-core modules
             1. testModule1 implementation
             2. testModule2 implementation
             3. Auto-initialization of application modules
          4. Module initialization and design considerations
       3. Summary
   11. 4. Designing Simple Modules
       1. The big picture
          1. Our application requirements
          2. Dynamic views
       2. Designing our SPA main pieces
          1. Application controller
             1. Application controller modules
                1. Page updater module
                2. Storage handler module
                3. Communication handler module
                4. Utilities module
                5. Message handler module
                6. Logging handler module
          2. Creating our first core module
             1. Structure of our first module
             2. Using our first module's functionality
             3. Mapping our module's methods to its interface
          3. Application view
             1. Creating the index.html page skeleton
             2. Creating an object definition for the header
             3. Generating the Header fragment dynamically
             4. Generating client application's view dynamically
          4. Application model
             1. Creating a module for our application's model
          5. Creating a logging module
       3. Summary
   12. 5. Module Augmentation
       1. Principles of module augmentation
       2. Implementing module augmentation
       3. Simple augmentation of ImagesInc_GlobalData
       4. The order of things in module augmentation
       5. Loose augmentation of modules
          1. Loose augmentation of ImagesInc_GlobalData
          2. Testing ImagesInc_GlobalData data encapsulation
       6. Tight augmentation of modules
          1. Tight augmentation of ImagesInc_GlobalData
          2. Loading ImagesInc_GlobalData augmenting code
          3. Considerations in tight augmentation
       7. Generating our application's content area
       8. Summary
   13. 6. Cloning, Inheritance, and Submodules
       1. Cloning modules
          1. Creating instances of a constructor function
          2. Using the assignment operator for copying objects
          3. Creating a clone of an object
             1. Shallow cloning and deep cloning
             2. Using external libraries for cloning
             3. Using JSON exploit for cloning
             4. Creating a custom clone method
       2. Creating ImagesInc_Utilites module
          1. Testing our custom cloning method in ImagesInc_Utilites module
          2. An important aspect of our cloning method
       3. Inheritance in modules
          1. Module inheritance using __proto__ object
          2. Module inheritance using parasitic combination
          3. Deciding on the module inheritance approach
       4. Submodules
          1. Adding submodules using dynamic properties
          2. Adding submodules using asynchronous properties
       5. Summary
   14. 7. Base, Sandbox, and Core Modules
       1. Application architecture overview
       2. Base module
          1. Adding general-purpose libraries to the base module
       3. Sandbox module
          1. Sandbox module functionality
             1. Sandbox as a consistent interface
             2. Sandbox as a security layer
             3. Sandbox as a communication layer
             4. Sandbox as a filter
          2. Implementing multiple instances of the sandbox module
             1. Advantages of multiple instances of the sandbox
                1. Isolating the sandbox instances from each other
                2. Creating a code execution context
                3. Performance improvements
       4. Core module
          1. Core module construction approach
             1. Core module functionality
          2. Acting as the controller
          3. Providing communication bridges
          4. Initializing and destroying components
          5. Providing plug-and-play capability
          6. Providing a centralized approach to handling errors
          7. Providing application-level extensibility
          8. Leveraging third party libraries
       5. Components
          1. Components required methods
          2. Binding events to the components elements
          3. Component design considerations
       6. Application architectural considerations
       7. Summary
   15. 8. Application Implementation – Putting It All Together
       1. The user's view of our application
       2. Application functionality
          1. Index page
          2. Image page
          3. Favorites page
          4. Support widget
       3. Application implementation
          1. Loading our module files in index.html
          2. Base module implementation
          3. Core module implementation
             1. MainCore module implementation
                1. Augmenting MainCore module
                   1. Augmenting MainCore using tight augmentation
                   2. Augmenting MainCore using sub-modules
             2. Component registration with MainCore
             3. Dynamic loading of components by MainCore
                1. Storing object definitions in local storage
                2. Getting a component's object definition from local storage
                3. Dynamically loading component's resources from the server
             4. Routing functionality in MainCore module
                1. Adding a URL to the history object of the browser
                2. Getting a URL from the history object of the browser
             5. Publish-subscribe implementation in MainCore
                1. Registering components for custom events
                2. Broadcasting custom events by components
          4. SandBox module implementation
             1. SandBox module's constructor
             2. Setting a component's container context in the SandBox instance
             3. Identifying the SandBox module's instance
             4. SandBox module considerations
       4. Application components
          1. Registering components with MainCore module
          2. Header component
          3. Footer component
          4. Content component
             1. Handling content area click events
                1. Handling the Add To Favorite link click event
                2. Handling an image click event
             2. Content area generator methods
          5. NotificationWidget component
             1. NotificationWidget's model
             2. Required methods of the notificationWidget component
          6. Rendering notificationWidget
       5. GlobalData module
       6. Summary
   16. 9. Modular Application Design and Testing
       1. Advantages of writing automated tests
       2. Different types of automated tests
          1. Unit testing
             1. TDD unit tests
             2. BDD unit tests
             3. TDD versus BDD
             4. Test coverage
          2. Integration testing
          3. End to end testing
       3. A simple start to writing our unit tests
          1. Writing unit tests without any unit testing frameworks
             1. Adding an AppTester module to our application
             2. Adding unit test suites to our test-runner
             3. CookieHandler module unit tests
             4. Running CookieHandler unit tests
             5. Cleaning up after running our unit tests
          2. Writing unit tests using third party frameworks
             1. Introduction to Jasmine
                1. Setting up Jasmine
                2. Creating our Jasmine spec file
                3. Running our Jasmine unit tests
                4. Exploring Jasmine further
             2. Introduction to Mocha
                1. Setting up Mocha
                2. Chai
                3. Creating our Mocha spec file
                4. Running our Mocha-Chai unit tests
                5. Exploring Mocha further
       4. Summary
   17. 10. Enterprise Grade Modular Design, AMD, CommonJS, and ES6 Modules
       1. Revisiting index.html file
       2. Introducing Asynchronous Module Definition
          1. Defining modules using AMD format
          2. Importing AMD modules
          3. Introducing RequireJS
             1. Downloading RequireJS
          4. A test project for creating and loading AMD modules
             1. Creating a simple AMD module
             2. Consuming our person AMD module
             3. Loading dependencies of dependencies
             4. Loading and consuming non-AMD modules
             5. Setting paths in the config object
             6. Creating shims for non-AMD modules
          5. Refactoring Images Inc. application to use AMD format
             1. Modifying Core submodules into AMD modules
             2. Loading our non-AMD modules using RequireJS
             3. Setting up our application's config.js file
             4. Booting up our application using RequireJS
       3. CommonJS
          1. Implementing a CommonJS module
       4. ECMAScript 6 modules
          1. Defining an ES6 module
          2. Consuming an ES6 module
          3. Module loading sequence in the browsers for ES6 modules
       5. Summary
   18. Index