As an ASP.NET developer using C# you are already familiar with object-oriented programming. Concepts such as encapsulation, namespaces, classes, objects, inheritance, interfaces, and polymorphism are quite common in server-side code. As a C# developer you might expect JavaScript to support all these features as a part of the language. If so, you might be surprised by how JavaScript deals with these features and object-oriented programming in general.

This book is not intended to give you a sound understanding of object-oriented JavaScript. It aims to familiarize you with various features and concepts that are commonly used by professional JavaScript developers. This section and the sub-sections that follow limits themselves to illustrating how code can be organized in JavaScript objects.

JavaScript doesn’t have any formal way to create classes. There is no keyword such as class that specifically defines a class. Instead, you define an object. This object contains properties and methods. There are two ways to create objects in JavaScript:

The following sections will discuss each type of object creation, including examples.

As a C# developer you are already familiar with the concept of namespaces. Namespaces allow you avoid ambiguity between class names. A similar need arises in JavaScript also, especially when your JavaScript code consists of a lot of functions and objects.

When you create a JavaScript function or a variable inside a <script> block, it belongs to a global namespace. Suppose you are building a web application that heavily uses JavaScript for its functioning. Imagine that there are two JavaScript files, each containing a set of functions. It is quite possible that there could be name collisions between the two files. For example, say both of the files contain a HelloWorld() function.

To understand how the namespace pattern can be used, you will create an application as shown in Figure 11-1.

The application allows you to search the Customers table of the Northwind database. You can enter a search condition in the textbox, select the search field (possible search fields are CustomerID, CompanyName, ContactName, and Country), and then click on the Search button. An Ajax call is then made to an action method using jQuery Ajax. The action does the searching and returns the results to the browser. The results are displayed in an HTML table.

To develop this application, begin by creating a new ASP.NET web application project using Visual Studio and configure it to use MVC and Entity Framework (see Chapter 1 for more details). Also store the database connection string of the Northwind database in the appsettings.json file.

Then add the AppSettings class to the Core folder and add the ConnectionString static property to it. Open the Startup class and write the code to set the ConnectionString property to the one stored in the appsettings.json file. Also create the Customer model class and the AppDbContext class required for the data access. You are already familiar with these steps, and hence they are not discussed here.

Next, add HomeController to the Controllers folder. In addition to the default Index() action, you need to create four actions that do the searching on the basis of CustomerID, CompanyName, ContactName, and Country columns. The SearchByID() action that searches the Customers table on the basis of the CustomerID column is shown in Listing 11-6.

The SearchByID() action is quite straightforward. It simply queries the Customers DbSet for all the CustomerIDs that contain the search condition (id parameter). Notice the use of the Contains() method to accomplish this.

The search results are returned to the caller in JSON format. This is done using the Json() method of the Controller base class.

Create the remaining three actions—SearchByCompany(), SearchByContact(), and SearchByCountry()—in a similar way by using the appropriate column in the query. To save some space, these actions will not be discussed here.

Now create a Scripts subfolder within the wwwroot folder and place the jQuery library in it. Also add an empty JavaScript file—CustomerApp.Search.js—to the Scripts folder. You can add this file using the Add New Item dialog. This file will contain all the JavaScript code pertaining to the namespace being created.

Open the CustomerApp.Search.js file in the Visual Studio editor and write the skeleton of the namespace, as shown in Listing 11-7.

Observe the skeleton code carefully. The code begins by creating the CustomerApp empty object. This object acts as the top namespace (or container) for your searching library. Further, the code adds the Search empty object to the CustomerApp object. Thus, Search becomes the nested namespace of CustomerApp.

The code then proceeds to add four search functions—SearchByID, SearchByCompany, SearchByContact, and SearchByCountry—to the Search namespace. Each of these functions accepts two parameters—the search condition and the ID of the target element where search results are to be loaded.

These search functions are not part of the global namespace. Rather, they are part of the CustomerApp.Search namespace. Along the same lines you could have created other namespaces inside the CustomerApp object (say, CustomerApp.Utils).

Now it’s time to add some code to these methods. Listing 11-8 shows the completed SearchByID() function .

The SearchByID() function receives two parameters—CustomerID to look for and target HTML element that houses the search results. Inside, the code makes an Ajax call to the SearchByID() action method of the HomeController. This is done using the $.ajax() method of jQuery.

The $. ajax() method accepts an object containing the settings that are to be used while making the Ajax request. The settings are as follows:

Along the same lines, create the remaining search functions: SearchByCompany(), SearchByContact(), and SearchByCountry(). These functions are quite similar to the one just discussed and hence will not be discussed here. You may get them from this book’s source code.

This completes the searching library. Now add the Index view to the Views/Home folder. Add a <script> reference to the jQuery and CustomerApp.Search.js in the head section of the Index view as shown here:

Then add the HTML markup shown in Listing 11-9 in the <body> section of the view.

The HTML markup consists of a textbox (criteria), a dropdown list (searchfield), and the Search button (search). The searchfield dropdown list contains four option elements: CustomerID, CompanyName, ContactName, and Country. The results div element is used to display the search results.

Next, add a new <script> block in the head section and write the code shown in Listing 11-10 in it.

The code handles the click event of the Search button by using the click() method of jQuery. The function supplied to the click() method grabs the search criteria entered in the textbox and stores it in the criteria local variable. The code also stores the selected searchfield value in the searchfield variable.

A switch statement checks the value of the searchfield variable and invokes the appropriate searching methods from the search library. Notice how the search functions are invoked using namespace-like syntax:

Also notice that results is passed as the target parameter since search results are to be displayed in the results <div> element.

This completes the application. Run the application, enter a search condition, and test the functionality of all the search methods.

If your ASP.NET application uses JavaScript heavily to function, chances are the amount of JavaScript you need to maintain is quite large. Moreover, as the application grows even the JavaScript code might increase to cope up with the added functionality.

Organizing the JavaScript code using the namespace pattern is a good starting point when it comes to organizing JavaScript code. However, if your JavaScript code base is quite large and you wish to make it modular for the sake of easy maintenance and extensions, you may consider using the module pattern.

Just to give you an idea of how a typical module is developed using the module pattern, see Listing 11-11.

The code creates an empty JsApp object. Then a module—Module1—is created using an immediate function and an object literal.

The immediate function can contain local variables and private functions that are required for the internal processing. They won’t be exposed to the external world. In this case the immediate function doesn’t contain any such private members.

The public API of the module is exposed using an object literal . In this case an object with a single method, HelloWorld(), is formed and is returned from the immediate function.

In effect, Module1 points to an object with the HelloWorld() method. To invoke the HelloWorld() method from Module1 you would write:

Now that you know the basics of the module pattern, let’s develop a more realistic example that demonstrates how it works. In this example you will develop an application, as shown in Figure 11-2.

The application allows you add, modify, and delete customers from the Customers table of the Northwind database. You can select a CustomerID from the dropdown list, and its corresponding CompanyName, ContactName, and Country values are displayed in the respective textboxes. You can then modify the details and click on the Update button to save the changes. To add a new customer you need to specify a new CustomerID and all the other details and click on the Insert button. Selecting a CustomerID and clicking on the Delete button deletes a customer.

More important, the operations just explained are performed by calling a Web API through jQuery Ajax. The jQuery code involved in performing these CRUD operations is organized using the module pattern.

To develop this application, begin by creating a new ASP.NET web application project using Visual Studio and configure it to use MVC, Web API, and Entity Framework (see Chapter 1 for more details). Also store the database connection string of the Northwind database in the appsettings.json file.

Then add the AppSettings class to the Core folder and add the ConnectionString static property to it. Open the Startup class and write the code to set the ConnectionString property to be the one stored in the appsettings.json file. Also create the Customer model class and the AppDbContext class required for the data access. You are already familiar with these steps, and hence they will not be discussed here.

Next, add a Web API controller named CustomerService to the Controllers folder. The CustomerService Web API wraps all the Entity Framework code to perform the CRUD operations and is shown in Listing 11-12.

The CustomerService controller consists of five actions, namely Get(), Get(id), Post(), Put(), and Delete(). We won’t go into the details of these operations here, because you created a similar Web API in earlier chapters. Here it is sufficient to say that Get() returns a list of Customer entities and Get(id) accepts a CustomerID and returns a single Customer entity matching that value. The Post(), Put(), and Delete() actions add, modify, and delete a Customer from the database, respectively.

This completes the CustomerService controller. It’s now time to create the CustomerManager module that invokes this Web API through jQuery Ajax. Add a Scripts folder to the wwwroot folder and place the jQuery library into it. Also add a new JavaScript file—CustomerApp.CustomerManager.js—to the Scripts folder. Listing 11-13 shows the skeleton of the CustomerManager module that you will develop shortly.

As you can see, the CustomerManager module is being added to CustomerApp. The immediate function returns an object with five methods:

Notice that all these methods accept a callback parameter. The callback parameter is a callback function that gets invoked upon a successful Ajax call. The SelectByID() and Delete() methods accept a CustomerID as the id parameter. The Insert() and Update() methods accept a Customer object to be added or modified, respectively.

These methods form the public API of the CustomerManager module. They are used to invoke the respective Web API methods. Listing 11-14 shows the code that goes inside the SelectAll() method .

The SelectAll() method accepts a callback function as its parameter. Inside, the code makes a GET request to the CustomerService Web API. This is done using the $.ajax() method of jQuery. Since the Ajax request is being made using the GET verb, it is mapped with the Get() action of CustomerService.

The success function receives the data returned by CustomerService (a list of Customer objects, in this case). The callback function is then invoked by passing this data to it. The other Ajax calls look similar, with a few changes. For example, the Ajax call that invokes the Put() action looks like this:

As you can see, the CustomerID is appended to the url, and the type property is set to PUT. Moreover, the data property holds a Customer object containing the modified details.

The remaining Ajax calls and methods will not be discussed here as they are quite similar to the calls just discussed. You can pick up the complete code of these methods from the code download of this book.

This completes the CustomerManager module . Now it’s time to put it to use inside a view. Add HomeController to the Controllers folder and also add the Index view to the Views/Home folder.

Add <script> references to the jQuery library and also to the CustomerApp.CustomerManager.js file in the head section of the Index view:

Next, add the HTML markup shown in Listing 11-15 to the body section of the Index view .

The markup is quite straightforward. It consists of a table that houses four textboxes, a dropdown list, and three buttons. The four textboxes—newcustomerid, companyname, contactname, and country—are used to accept CustomerID, CompanyName, ContactName, and Country values, respectively.

The customerid dropdown list displays a list of existing customer IDs. The three buttons—Insert, Update, and Delete—are used to trigger the corresponding operations.

Now add a new <script> block in the head section, just below the script references added earlier, and write the code shown in Listing 11-16 into it.

This code calls the SelectAll() method of the CustomerManager module as soon as the view loads in the browser. The callback passed to the SelectAll() method iterates through the list of customers (data) and adds the CustomerIDs to the customerid dropdown list. This is done using the append() method of jQuery.

Upon selecting a CustomerID from the dropdown list, its details need to be displayed in the other textboxes. This is done by handling the change-event handler of the dropdown list (Listing 11-17).

The code uses the SelectByID() method of the CustomerManager to fetch the details of a single customer. The CustomerID selected in the dropdown list and a callback function are passed to the SelectByID() method as its parameters. The callback function fills the textboxes with the CompanyName, ContactName, and Country properties.

To add a new customer, you need to handle the click event of the Insert button, as shown in Listing 11-18.

The code creates an empty object—obj—and adds CustomerID, CompanyName, ContactName, and Country properties to it. These properties get their values from the respective textboxes. Then the code invokes the Insert() method of the CustomerManager module by passing obj and a callback to it. The callback simply displays the message returned from the Web API in an alert.

The click-event handlers of the Update and Delete buttons are quite similar and hence will not be discussed here. You can get the complete code of this script block from this book’s code download.

This completes the application. Run the application and check whether you can add, modify, and delete the customer records as expected.

The module pattern puts all the functionality of the module directly into an object literal and then returns it from the immediate function. While developing a larger and more complex module you may not be aware of the exact methods that are to be exposed as the public API. For example, there might be several private methods, helper functions, and variables that are used internally by the module but are not to be exposed to the external world.

In such cases the revealing module pattern comes in handy. With the revealing module pattern, you create functions and variables as you develop the module. At this stage you don’t return anything. Once all the functionality of the module is in place, you decide what should be included in the public interface of the module. You return an object containing only those methods. Consider the code fragment shown in Listing 11-19.

The immediate function declares a private variable—msg—that holds a string value—Hello World! The SayHello() function is a private function and it simply displays the value of msg in an alert. At this point, the public API of the module is not yet decided.

Then the code creates an object literal with a HelloWorld property that points to the SayHello() function . This object is returned from the immediate function. This is where, after the completion of the module, you decide the public interface of the module. Here you decide to expose the SayHello method as HelloWorld.

If you wish to use the revealing module pattern instead of the module pattern, the CustomerManager module developed in the preceding example would have looked as shown in Listing 11-20.

As you can see, the immediate function now defines five private functions, namely Get(), GetByID(), Post(), Put(), and Delete(). These private functions make the Ajax call to the appropriate Web API actions (not shown in the listing for the sake of simplicity) and perform the respective operations.

Then an object literal is created with five properties, namely SelectAll, SelectByID, Insert, Update, and Delete. These five properties point to the Get(), GetByID(), Post(), Put(), and Delete() private functions, respectively. These five properties form the public API of the module. The object is then returned from the immediate function.

The sandbox pattern can be used to avoid this issue. A sandbox is a self-contained object that includes APIs from only those modules that your code needs at a given point in time. Suppose your library has three modules, namely Module1, Module2, and Module3. At a given point in time, you want to work with the API exposed by Module1 and Module2. So, you construct a “sandbox” that contains the API from those two modules. Your code deals with this sandbox and not with the modules directly. Thus, your code reduces to:

To understand how the sandbox pattern works, let’s modify the example you developed for the namespace pattern. Copy the same project and perform the modifications that follow.

Add the CustomerApp.Sandbox.js file to the Scripts folder using the Add New Item dialog and write the code shown in Listing 11-21 in it.

This code is the heart of the sandbox pattern. It consists of an immediate function that receives a parameter—global. The object referenced by this is passed to the global parameter during the invocation. In JavaScript this points to the global object (window object, for web browsers) when used outside of any function. So, here the immediate function receives a reference to the global window object.

Inside, the CustomerApp object gets created. The CustomerApp function receives two parameters, namely modules and callback. The modules parameter is a string array that contains a list of modules required by your code. The callback parameter is a function that uses the sandbox being generated.

Inside the CustomerApp function, the first if statement checks whether this points to the CustomerApp object. If not, a new instance of CustomerApp is created by passing the modules array and the callback to it.

A for loop iterates through the modules array and generates a sandbox object containing the API of all the requested modules. Then the callback function is invoked by passing this sandbox object to it.

After the function definition, the code sets the modules property on the CustomerApp to an empty object and also sets the CustomerApp property on the global (window) object to point to the CustomerApp object.

Next, define the search module as per the skeleton shown in Listing 11-22.

As you can see, the search function receives a sandbox object. Methods such as SearchByID(), SearchByCompany(), SearchByContact(), and SearchByCountry() are added to this sandbox object.

Just for the testing, add another module—hello—to the file as shown in Listing 11-23.

The Hello module is quite straightforward and adds two methods to the sandbox: HelloWorld() and HelloUniverse().

This completes CustomerApp.Sandbox.js. Now open the Index view and adjust the <script> reference to point to the CustomerApp.Sandbox.js file. Then modify the <script> block from the Index view as shown in Listing 11-24.

Notice the code shown in bold letters. This code calls the CustomerApp function (remember CustomerApp is a global property) by passing the modules array and a callback function. The modules array contains two elements—search and hello—that indicate the modules your code wants to use.

The callback function receives the sandbox object as its parameter. Your code within the callback function invokes the SearchByID() and HelloWorld() methods on the sandbox object.

Notice the other instance of the switch statement. There, you specify only the search module in the modules array. Hence, the sandbox object received by those calls won’t have the API of the hello module. Your callback function won’t be able to call HelloWorld() on the sandbox object.

This completes the application. Run the application and test it as discussed. If you log the sandbox object to the browser’s console (console.log()) then Firefox will display it as shown in Figure 11-3.

Notice how the sandbox object includes six methods—two from hello module and four from the search module.

You have learned all the GoF design patterns in earlier chapters. As mentioned earlier, these patterns are not tied to a particular programming language. The concepts and ideas suggested by these patterns can be implemented in any object-oriented programming language, including the JavaScript. Of course, the code-level implementation details will vary from one language to another.

In this section and the subsections that follow, you will see how some of the GoF patterns can be put to use in JavaScript. Specifically, you will learn to implement the following patterns:

Since you already know the intent of these patterns, details such as the purpose and the UML diagram will not be discussed here.

The façade pattern provides a high-level, easy-to-use interface to the client by shielding the different interfaces of the subsystems. The primary goal of the façade is to simplify the client interaction with the other objects involved in an operation.

Suppose that you are developing an Ajax-driven application that processes orders submitted by the users. The application needs to perform three checks before approving or rejecting the application:

Considering these requirements, you may come up with the JavaScript objects illustrated in Listing 11-29.

As shown in the code, three objects, namely AddressDetails, BankDetails, and EmploymentDetails are involved in the processing of a loan application. How these objects perform the processing is not our primary concern here. Let’s assume that the validation process is complex and involves several server-side calls as well as client-side processing. So, for the sake of testing, the validate() method of each of these object simply returns true.

The OrderProcessor object (you will create it shortly) needs to use all three objects to proceed with the order. The AddressDetails object can implement the façade pattern, as shown in Listing 11-30.

The code adds the validateDetails() method to the OrderProcessor class. The validateDetails() method implements the façade pattern by simplifying the validation process for the client code. It makes use of the AddressDetails, BankDetails, and EmploymentDetails objects and invokes their validate() methods. The final outcome is returned to the caller as true (all validations succeed) or false (at least one validation failed).

The preceding code creates an OrderProcessor object and then calls the validateDetails() method. The outcome of the validation is displayed in an alert.

The observer pattern defines a one-to-many dependency between objects so that when one object changes its state all the others are notified about the change. It follows the publisher-subscriber model where one or more subscribers subscribe to an event, and the publisher notifies all the subscribers when that event takes place in the system.

The observer pattern is commonly used in JavaScript code for event-handling purposes. The parts of the application that are interested in certain events (subscribers), such as click or keypress, wire event handlers to the events. The controls such as button or textbox (publishers) raise the respective events and the handlers are invoked.

Let’s understand this with a more specific example. Suppose you are building a blogging engine. Each post displayed by the blog allows users to post comments. The comment box needs to have the following features:

Figure 11-4 shows a simplified version of such a comment box.

Let’s assume that a blog comment is represented by a BlogComment object. The BlogComment object is the publisher and implements the observer pattern as shown in Listing 11-31.

The BlogComment object maintains an array of subscribers—observers. Initially the observers array is empty. To add and remove the subscribers and to broadcast notifications, three methods are added to the prototype of the BlogComment object—subscribe, unsubscribe, and broadcast.

The subscribe method adds a subscriber to the observers array using the push() method. The unsubscribe method removes a subscriber from the observers array. It does so using the filter() method on the handlers array. The filter() method regenerates the observers array by filtering out the subscriber that equals the one passed to the unsubscribe() method.

The broadcast() method notifies all the subscribers with some data. In this case, the data is the comment text. Notice how the broadcasting of data is done. The code iterates through the observers array using the forEach() method. Inside, the code invokes the call() method on an observer and passes the data to it. The call() method calls a function (item is a function in this case). The first parameter of the call() method is null, indicating that no specific value for this is to be used. The second parameter is the parameter(s) to be passed to the function being called.

It consists of a text1 text area and two <div> elements. The div1 element is used to display the comment’s preview, whereas the div2 element is used to display the character counter.

The jQuery code that attaches the subscribers is shown in Listing 11-32.

The code creates two subscriber objects—Subscriber1 and Subscriber2. The first subscriber simply displays the comment’s preview by setting the HTML content of div1 to the data received from the broadcast method. This is done using the html() method.

Along the same lines, the second subscriber displays a character counter inside div2 using the length property of the data.

Then the code creates a new BlogComment object and calls its subscribe() method to add the two subscribers to the observers array.

Whenever you key in text within the text area, the BlogComment object needs to broadcast the comment data to the subscribers. This is accomplished by handling the keyup event of text1, like this:

As you can see, the keyup callback invokes the broadcast() method on the comment object and passes the value of text1 to it.

This completes the example. You can run the application and try entering some text in the text area. You should see the preview as well as the character counter.

As an ASP.NET MVC developer, you are already familiar with the Model-View-Controller (MVC) pattern . The MVC pattern separates the application concerns into three distinct parts—Model, View, and Controller. Simply put, the Model represents the application data, a View represents the application’s user interface, and a Controller acts like a middleman between the other two parts and also manages the overall application flow.

ASP.NET MVC applies the MVC pattern to the server-side framework. In the context of client-side JavaScript frameworks, you will find these patterns mentioned frequently:

In the context of JavaScript applications, a Model is usually a JavaScript object or a collection of objects. A View consists of HTML markup from the document object model (DOM) tree. A Controller acts as a layer that connects the Model and the View. The Controller might do tasks such as handling events, validating data, performing some business-specific processing, and changing the model data.

A View Model used by the MVVM pattern is an object that takes care of the presentation logic. The presentation logic might include things such as data binding and event handling. JavaScript libraries such as Knockout are based on the MVVM pattern.

The “Whatever” used by the pattern can be a View Model or a Controller or whatever suits the application requirements. JavaScript frameworks such as AngularJS are based on the MVW pattern.

Although this book doesn’t go into any detailed discussion of using these frameworks, just to give you some idea a simple example built using AngularJS is shown in Figure 11-5.

The application displays a list of employees in two tables. The table shown at the top allows you to edit the employee details, such as EmployeeID, FirstName, and LastName. The table towards the bottom of the page is read-only. It is solely used to illustrate the two-way data binding.

To develop this application, begin by creating a new ASP.NET web application project using Visual Studio and configure it to use MVC (see Chapter 1 for more details). Also, place the AngularJS framework files in the Script folder under wwwroot.

Then add HomeController to the Controllers folder and an Index view to the Views/Home folder. You need to add a script reference to the AngularJS as shown below:

Also add an empty <script> block below this script reference. Write the code shown in Listing 11-33 inside the script block.

The code creates an AngularJS module named EmployeeApp by using the AngularJS module API. The second parameter to the module() method is an empty array indicating that this application doesn’t have any dependencies. The module () method returns a reference to the newly created module.

The code then proceeds to create EmployeeController—an AngularJS controller. This is done using the controller() method. The first parameter to the controller() is the name of the controller, and the second parameter is a function that wraps the controller code. This function receives a $scope parameter—the AngularJS model.

Inside, the code creates a JavaScript array of employee objects consisting of three elements. The Model array is stored in the $scope object as its Model property (you could have used any property name of your choice, or even store data directly in the $scope).

The View of the application is defined in the HTML markup shown in Listing 11-34.

The Angular view consists of a container <div> element that houses another <div> element. The ng-app attribute of the outermost <div> is set to EmployeeApp—the name of the AngularJS module you created earlier. The ng-controller attribute of the inner <div> is set to EmployeeController—the AngularJS controller. Attributes such as ng-app and ng-controller are defined and processed by AngularJS. They are called directives in AngularJS. Thus the outer <div> marks the application’s boundary, whereas the inner <div> marks the EmployeeController’s boundary.

The inner <div> houses two tables. The first table displays EmployeeID, FirstName, and LastName in an editable fashion. The table is rendered by iterating through the $scope.Model array using the ng-repeat directive. Notice how employee object properties are bound to the textboxes using the ng-model attribute. The second table is rendered using the ng-repeat directive. This time, however, the employee details are displayed in a read-only fashion. Notice the use of {{ and }} to display the data. As you might have guessed, ng-model performs two-way data binding (model to view and from view back to the model), whereas {{ and }} are used to perform one-way data binding (from model to view).

This completes the application. You can run it and try modifying some employee details. You will observe that as soon as you change the values in the textboxes the second table also reflects the changes. This happens automatically due to the two-way data binding feature of AngularJS.

This chapter covered a broad range of JavaScript patterns. Modern ASP.NET applications rely heavily on JavaScript and JavaScript libraries. That’s why it is important for you to understand the code-organization techniques possible in JavaScript.

Although JavaScript doesn’t support classes along the lines of C#, you can create objects. Two common ways to create objects include object literals and function objects.

This chapter covered several code-organization patterns, such as the namespace pattern, the module pattern, the revealing module pattern, and the sandbox pattern.

The namespaces pattern helps you to organize JavaScript code in namespaces. Although JavaScript doesn’t natively support namespaces, you can still achieve a similar effect.

The sandbox pattern helps you write sandbox code. It eliminates using long namespaces by creating a sandbox—- an object containing the API of specified modules.

Finally, the chapter gave you a quick introduction to MVC, MVVM, and MVW patterns as applicable to JavaScript libraries and frameworks.

Learning design patterns involves understanding their intent and usage guidelines and also the practical experience of using them. This book discussed SOLID principles, Gang of Four design patterns, select Patterns of Enterprise Application Architecture, and select JavaScript patterns in an attempt to give you a good understanding of the subject matter. It also presented many real-world examples to make the topic being discussed more relevant and practical. With this knowledge under your belt, you can leverage the full power and flexibility of these principles and patterns in your applications.