Require. Js for an in depth introduction to the require. Js feature

Now, Require. Js is my favorite form of Javascript programming. It breaks down code and makes it easy to manage. The require.js Optimizer helps you split a larger application into smaller ones, concatenating them through dependencies, and finally merging them when you compile and package them. These reasons lead us to use require. Js.

So, let's take a look at what some awesome features require. Js has.

Compatible with CommonJS

AMD (asynchronous module definition specification) appears from CommonJS workgroup. CommonJS aims to create an ecosystem of Javascript. An important part of CommonJS is transport/c, the predecessor of AMD, and require.js is an implementation of this specification.

In fact, require. Js interprets the module content of the callback function through the function. ToString, finds its correct dependency, and turns it into a normal AMD module. It is important to note that if you write modules in this way, they may not be compatible with other AMD loaders, as this is against the AMD specification, but they understand the format well.

So what's going on here, require.js actually does a callback function of function.tostring that parses the contents of the module, finds the right dependency, just like it does if it's a normal AMD module. It is important to note that if you choose to write modules this way, they will most likely not be compatible with other AMD module loaders as this violates the AMD specification, but it is good to know that this format exists!

CDN back

No dependency? Object literals? No problem!

When you write a module that has no dependencies and just returns an object that contains some functionality, then we can use a simple syntax:

define({

    forceChoke: function() {

 

    },

    forceLighting: function() {

 

    },

    forceRun: function() {

 

    }    

});

It's simple and useful if the module is just a collection of functions or just a packet.

  Circular dependencies

In some cases, we may need the module moduleA and the functions in moduleA need to rely on some applications. This is circular dependency.

// js/app/moduleA.js

define( [ "require", "app/app"],

    function( require, app ) {

        return {

            foo: function( title ) {

                var app = require( "app/app" );

                return app.something();

            }

        }

    }

);

Get the address of the module

If you need to get the module's address, you can do this...

var path = require.toUrl("./style.css");

BaseUrl

In general, for unit tests, your source code might be in a folder similar to SRC, and your tests might be in a folder similar to tests. This can be difficult to get the test configured correctly.

For example, we have an index.html file in the tests folder and need to load tests/spec/*.js locally. And assume that all the source code in for SRC /js/*.js, and there is a main.js in the folder.

In index. HTML, you do not set data-main when loading require.js.

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

<script>

require( [ "../src/js/main.js" ], function() {

    require.config({

        baseUrl: "../src/js/"

    });

 

    require([ 

        "./spec/test.spec.js",

        "./spec/moar.spec.js"

    ], function() {

        // start your test framework

    });

});

</script>

You can see that main.js is loaded. However, since there is no data-main set, we need to make a baseUrl. When using data-main, baseUrl automatically sets it according to the file it sets.

Here, you can see that main.js is loaded. However, since it does not load the data main script tag, you must specify a base. Infer the location from the master file when the data is primarily used for baseURL. By customizing baseUrl we can easily separate the test code from the application code.

The json

We can handle JSONP terminal like this:

require( [ 

    "http://someapi.com/foo?callback=define"

], function (data) {

    console.log(data);

});

For non-amd libraries, use shim

In many cases, we need to use non-amd libraries. For example, Backbone and Underscore do not fit the AMD specification. JQuery actually defines itself as a global variable called jQuery, so you don't have to do anything with jQuery.

Fortunately, we can use the shim configuration to solve this problem.

require.config({

    paths: {

        "backbone": "vendor/backbone",

        "underscore": "vendor/underscore"

    },

    shim: {

        "backbone": {

            deps: [ "underscore" ],

            exports: "Backbone"

        },

        "underscore": {

            exports: "_"

        }

    }

});