Here’s a code sample that shows how you can get the two to work together.
Continue reading “Snippet – Fixing Errors When Using jQuery, Sammy, RequireJS”
![image6[1]](https://i0.wp.com/azuredays.com/wp-content/uploads/2014/12/image611.png?resize=126%2C124&ssl=1 "image6[1]")
In the previous post, you learned how you can use RequireJS in projects to define your own loading order, and how to build your own modules.
This tutorial go into depth on how to use RequireJS for AMD (Asynchronous Module Definition) modules. You will write we can write our own modules and load them with RequireJS.
In this tutorial you will build a small app that uses LoDash and jQuery. If you want to use Underscore, just substitute Underscore for the LoDash references.
Although you can use a bunch of <script> tags to load the libraries, your page is blocked during the load. And you could minify them and maintain the order in your own code. But with RequireJS, you include the RequireJS source and let it load the files.
In the previous posts on promises Promises for Asynchronous Operations Using jQuery, you learned how you can build promises using jQuery Deferreds and Promises. And in External Templates Using Mustache, jQuery, you learned how to bring in an external template.
It is time to show a real life example of how this code comes together. And in doing so, we have the beginning for a Single Page App.
In this code example, you will see how to use jQuery Promises to:
Then when all three are accomplished, you’ll use the jQuery $.when() function to render the data.
For this example, you will need to have jQuery and Mustache loaded in your Scripts folder. Continue reading “Single Page App – Asynchronous Sample Using jQuery Promise to Render JSON Using Mustache”
As you have seen in Templates Rendering JSON Using Mustache, jQuery, you can put reusable HTML into a template and then have that template render your data. You are separating the data and providing one or more ways it can be displayed inside of a page.
This post extends what you have learned about Mustache and gives an example on how you can put your template into an external file. Once in an external file, you can use it across your site whenever you need data displayed in a particular way.
Continue reading “Object JavaScript – External Templates Using Mustache, jQuery”
In our previous posts, you see how you can create templates and load them asynchronously using Knockout. But not everyone needs Knockout’s functionality. Maybe you just want to get some data and display it using a template.
Mustache is a library that allows you to read in JSON formatted data and display it using templates you design.
Mustache can be used for HTML, config files, source code – anything. It works by expanding tags in a template using values provided in a hash or object.
If you know JSON and a bit of JavaScript, you can implement Mustache. It is available for Ruby, JavaScript, Python, Erlang, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure, Fantom, CoffeeScript, D, and for node.js.
In this tutorial, you’ll learn how to use Mustache with JavaScript to create HTML page.
Mustache is logic-less because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.
Mustache provides the same functionality to libraries like underscore.js, handlebars.js, and dust.js.
Continue reading “Object JavaScript – Templates Rendering JSON Using Mustache, jQuery”
Let’s put our revealing module pattern into asynchronous modules definition (AMD).
Asynchronous module definition (AMD) is a JavaScript API for defining modules such that the module and its dependencies can be asynchronously loaded. It is useful in improving the performance of websites by bypassing synchronous loading of modules along with the rest of the site content.
modular, we generally mean it’s composed of a set of highly decoupled, distinct pieces of functionality stored in modules. As you probably know, loose coupling facilitates easier maintainability of apps by removing dependencies where possible.
Loose coupling implies each component can operate or be tested independently of other components.
Tight coupling implies each component “knows” the details or inner workings of other components.
In just a few lines of code you can provide for architectural features above to improve from revealing module pattern to asynchornous module definition code. Here’s a look into why and how.
Continue reading “Object JavaScript – Revealing Modular Pattern Into Asynchronous Modules”
As you have seen in previous posts, a promise in JavaScript represents the result of a task, which may or may not have completed yet. Or in simpler words, what to expect for a JavaScript call.
Q was designed to provide a robust way to provide you ways to write asynchronous code cleanly.
You can integrate the robustness of Q with jQuery promises.
Continue reading “Object JavaScript – Promises By Integrating Q with jQuery”
You need promises as soon as you do anything that involves an asynchronous API. In Object JavaScript – Asynchronous Programming Using Promises, you learned the basics about promises.
jQuery’s implementation of promises is based around the jQuery.Deferred object. This is a chainable constructor where you can check for the existence of a promise. The jQuery Deferred object can also invoke callback queues and pass on the success of synchronous and asynchronous functions.
Continue reading “Object JavaScript – Promises for Asynchronous Operations Using jQuery”
As you learned in my post on Scope, Namespaces, “use strict”, all variables are accessible from the global scope except variables that are declared within a function using the var keyword. In this post, we add the idea of closures.
Closures are functions that retain a reference to their free variables.
And we show how you can use closures in building a robust revealing module pattern. Along the way, we explore some other patterns, such as the self-invoking anonymous function. And in the conclusion show how you can use the revealing module pattern to extend existing modules.
This post relies heavily on Joe Zim’s article JavaScript Closures and the Module Pattern, whose explanation dovetails with the revealing module pattern and asynchronous modules definition.
When you see Asynchronous Module Definition (AMD), you will see how asynchronous modules build on these concepts.
In this post, you will learn about how JavaScript defines scopes and how you can use that to your advantage by declaring your own namespaces. Namespaces help you lower the possibility of naming collisions when using our code in conjunction with other JavaScript libraries.
Continue reading “Object JavaScript – Scope, Namespaces, “use strict””