-[Dojo tutorials] Getting start 3 Modern dojo

Original article: Modern dojo

Maybe you haven't touched dojo for a while, or you want to run the code you wrote for dojo1.6 on 1.10, but you're not sure whether it works well. You have heard people talk about AMD and baseless, but you don't know what they are and where to learn. This tutorial is about this.

Start

From dojo to version 1.7, there was a major transformation. The dojo toolset turned to a more modern architecture, and dojo1.10 continued this path. Although backward compatible, some basic concepts have changed to take advantage of dojo1.10. These concepts are based on dojo2.0 and have been adopted. You can surely embark on this bright and long path. In addition, to use advanced functions (such as Dojo/on), you need to understand some "modern" concepts.

In this tutorial, I will try to explain some new concepts that dojo has introduced. I will reference these as legacy and modern dojo. I tried my best to explain what changed and why. Some changes may seem confusing. They are designed to make your code more efficient, run faster, make better use of JavaScript, and make your code better maintained. I think it is worth the time to understand modern dojo.

This tutorial is not about version migration, but many changes know that you are considering it if you are familiar with dojo. For more information about migration, see the Migration Guide from dojo1 to 2.

Hello, new world

A core concept of modern dojo is that the global namespace kills people. There are many reasons, but in complex web applications, the global namespace can easily pollute the Code, especially when the team uses multiple frameworks. The danger of not committing is that people intentionally modify the global namespace based on security considerations. This means that in modern dojo, if you are still using a global namespace, you should stop immediately because you are doing the wrong thing. For backward compatibility, some components, especially their namespaces, should not be used in new development.

If you find that you are inputting dojo. *, dijit. *, or dojox. *, it is a problem.

This means that the old method of using dojo includes dojo. JS, and then introduces some modules, so the days when Code uses dojo. Something are gone.

I declare again, "the global namespace kills people and the global namespace kills people. I don't need it anymore. I don't need it anymore ".

Another core concept is that Asynchronization is faster than synchronization. In the old dojo. the concept of deferred has a pure asynchronous lineage, but in modern dojo, it is best to think about asynchronous operations in everything.

To enhance the modularization of dojo and use the concepts mentioned above, Dojo adopted the commonjs module definition from version 1.7, which is called the asynchronous module definition (AMD for short. This means that the module loader of dojo needs to be rewritten through the require and define functions. You can view the details in the loader reference guide. This fundamentally changes the code structure.

Next, let's look at an example of comparison between old and new styles. Old:

1 dojo.ready(function() {2   dojo.byId("helloworld").innerHTML = "Hello World!";3 });

 

Statement:

1 require([2   "dojo/dom",3   "dojo/domReady!"4 ], function(dom) {5   dom.byId("helloworld").innerHTML = "Hello new World!";6 });

 

-[Dojo tutorials] Getting start 3 Modern dojo