Difference between database and normal load script

Question

When using RequireJS, what's the difference between including your script in

<script data-main="scripts/main" src="scripts/require.js"></script> 

and

 <script src="scripts/require.js"></script> 

those. what will the data-main attribute change when loading into a script? I read the documents on this issue , and the other is not entirely clear to me.

Usually you use the main-data script to set configuration parameters, and then load the first application module. Note: the script tag require.js generated for your main data module includes the async attribute. This means that you cannot assume that the loading and execution of your main data script will end earlier than the other scripts mentioned later on the same page.

The documentation mentions that you will usually use the main-data script to set configuration parameters and load the first application module - but can't you do this with the plain old script tag? Is there any advantage in the configuration loading the application module with the data-main attribute?

Is asynchronous loading the only difference from data-main ? Or is there something else?

Answer 1

data-main is another way to make the initial call to require your application. To illustrate ... this:

 <script data-main="scripts/main" src="scripts/require.js"></script> 

equivalent to this:

 <script src="scripts/require.js"></script> <script>require(["scripts/main"])</script> 

Two forms are asynchronous. That is really all that is needed. Considerations about how many entry points you have or where the RequireJS configuration will be located are completely orthogonal to using data-main . In other words, these considerations play a role in using data-main to the same extent that they play a role in using require(["scripts/main"]) .

Part of the documentation you cite just obscures things, noting that the script loaded with data-main creates a script element in the head element with a set of async attributes, because this is no different than loading any script through RequireJS. Each script loaded by RequireJS will have a script element created for it in head and having an async attribute.

It is customary to use data-main for applications that have only one entry point, and put the RequireJS configuration in the module specified in data-main , but this is not required by any means. For example, this is a perfectly acceptable use:

 <script> require = { // RequireJS config here... }; </script> <script data-main="scripts/main" src="scripts/require.js"></script> <script> require(["foo"], function (foo) { foo.something(); }); </script> 

The configuration is provided by RequireJS, installing require in a global space before loading RequireJS. (If require is specified before RequireJS is loaded, the value of require will be taken as its configuration.) In addition to launching the application when loading scripts/main , this code also loads foo and calls a method on it: two entry points.

Answer 2

data-main is for when you want to have a single entry point for your application. This single line of script will load RequireJS along with scripts/main.js and launch your application.

Result

 <script data-main="scripts/main" src="scripts/require.js"></script> 

means that <script async src="scripts/main.js"></script> added to the document at runtime; this is a script that will contain your require.config() block and insert your first application script. If you do not specify data-main , then you download only Require and none of your application scripts, unless you explicitly download the configuration file and the first module.

What do you think Require will load if you don't tell him to load something?

---

If you are not using data-main , you must provide an entry point after loading Require (this is how I always did it, for no good reason other than the way I found out.) Read the configuration options to see how you do it.

I use this template in development:

 <script src="js/lib/require.js"></script> <script src="js/config.js"></script> <script> // same as data-main require.config({baseUrl : 'js'}); require(['js/main']); </script> 

As a single entry point, the contents of config.js and the subsequent call to require(['js/main']) will be in any script that data-main refers to.

---

If you use the static optimizer to create a production package, it does not matter, since you just download the package.

Answer 3

data-main is a script that require.js will handle. As noted in the documentation, it is customary to set configuration parameters in the script settings. But there are other ways to do this. In many cases, this is the simplest and most effective place. But not always.

The script that the basic information points to also displays dependencies for the code that defines the file. Dependence is where the meat is. It is typical, although not necessary, to have this first module load and execute what ultimately is the actual application.

Adding in response to comment:

There are some concepts you need to know about that will help to understand this approach.

Firstly, there is not one (or a couple, or even several) script (s). This type of loader is designed to handle many and very small scripts. Each of them has a very specific and often (preferably) common goal. Call these script modules (or units).

Any given module may depend on any number of other modules to function. The AMD template allows you to display dependencies for each module in this module definition.

RequireJS will sort who needs what and in what order and not let scripts run until all the modules for which they depend are loaded and ready.

So this is not at all like placing a script link (or multiple links) on a page, as we all grew up. This is a completely different approach to javascript development. Once you wrap your head around and figure out how to break your code into hidden units of functionality, it's really pretty smooth.

Answer 4

 <script data-main="scripts/main.js" src="scripts/vendor/requirejs/require.js"></script> 

src will first load "scripts / vendor / requirejs / require.js". Then the data-main attribute will execute "scripts / main.js".