Features of RequireJS?

31 Best RequireJs Interview Questions and Answers

What is RequireJS?
ü  RequireJS is a JavaScript library and AMD compatible asynchronous module loader.
ü  RequireJS is used to loads the JavaScript files and resolve their dependencies and its supported to the latest versions of popular browsers.
ü  RequireJS helps to improve the performance and code of quality.
ü  RequireJS was developed by David Mark. Its open source and it was released in 2009.
ü  RequireJS is used by node.js to fetch and load module.
ü  RequireJS contains a small set of plugins which allow us to loading the various types of resources like text, Dom Ready, i18n, CSS and loading.

RequireJS includes three main API functions -
ü  Define () - This function is used to define a module. Each module is defined a unique module ID. This module Id is used by RequireJS at the runtime.
ü  Require () - This function is used to load dependencies and It is a global function.
ü  Config () - This function is used to configure the RequireJS runtime functionality.

How to Install RequireJS?
You can install the latest release of RequireJS from the command prompt using the below commands-
//Install the RequireJS package
npm install -g requirejs



Why do People use RequireJS? What Are the Benefits?
ü  It is an open source JavaScript library.
ü  It is AMD compatible asynchronous module loader.
ü  It is Asynchronous by nature.
ü  Lazy loaded on-demand.
ü  It is easily portable.
ü  It is Avoids global variables.
ü  It has ability to load nested dependencies.
ü  Its Dependencies are easy to identify.
ü  It can be easily configured.
ü  It can load multiple versions of the same library.
ü  It will make the website more optimize and speed.

How To define entry point for RequireJS?

We need to define an html file and it could be "index.html" where RequireJS is loading i.e.
<!DOCTYPE html>
<html>
<head>
    <script data-main="libs/main" src="libs/require.js"></script>
</head>
<body>
    <h1> RequireJS Sample apps</h1>
</body>
</html>

In above example, the data-main attribute of require.js will start initialisation of files.

What Are the main Features of RequireJS?
ü  RequireJS manages the dependencies between JavaScript files and improves the quality of the code and application speed.
ü  It is combines and minifies the modules into one script for speed-up.
ü  RequireJS Collecting the different JavaScript files from different modules at the compilation time.
ü  Easy debugging
ü  Lesser HTTP requests
ü  Reduce code Complexity in large application.
ü  And so on.

What Are disadvantage of RequireJS?
ü  No support for AMD in Node.js
ü  Not all modules implement AMD


When Should I use require () and when to use define ()?
The define () method looks like -
ü  The define () method is used for facilitating module definition
ü  The define () method accepts two optional parameters module ID and array of required modules [dependencies]
ü  The define() method MUST return the implementation for your module i.e.

define(
  module_id /*optional*/,
  [dependencies] /*optional*/,
  definition function /*function for instantiating the module or object*/
);

And
define(['moduleA', 'moduleB'], function (moduleA, moduleB) {
  //define the module value by returning a value
  return function () {};
});

The require () method looks like -
ü  The require () method is used for handling dependency loading
ü  The require () function doesn't have to return the implementation of a new module.

require(['jquery'], function ($) {
  //jQuery was loaded and can be used now.
});

Example 1 -
define( 'MyApp', ["marionette"], function (Marionette) {
      // set up the app instance
      var app = new Marionette.Application();
      app.on("initialize:after", function(){
        console.log("initialize started.");
      });

      // export the app from this module
      return app;
});

Example 2 -
// Fetch and execute Marionette App
require( ["MyApp"], function (app) {
  // Execute App
   app.start();
});

Example 3 -
define({
  "root": {
     "india": "india",
     "australia": "australia",
     "england": "england"
  }
});

What Are Asynchronous Module Definition (AMD) Modules?
Defining Modules -The Module is defined using define () method and it used for loading the module i.e.
define({
  country:"India",
  state: "UP",
  city: "Noida",
  userDetail: function () {
           return "User Detail";
    }
});

Defining Functions - A module can also use a function without dependencies i.e.
define(function () {
    return {
        country:"India",
        state: "UP",
        city: "Noida"
    }
});

Defining Functions with Dependencies - The Dependencies module looks like.
define(["../comp", "../user"],
  function(comp, user) {
      return {
          country:"India",
          state: "UP",
          city: "Noida",     
          addUser: function() {
            comp.decrement(this);
            user.add(this);
          }     
      }
});

Defining a Module as a Function - Its looks like.
define(["../comp", "../user"],
    function(comp, user) {
      return function(userName){
          return userName != null ? userName :'NA'
      }
});

Defining a Module with a Name - Its looks like.
define("Users", ["../comp", "../user"],
  function(comp, user) {
    return {
        country:"India",
        state: "UP",
        city: "Noida",     
        addUser: function() {
          console.log(this);
        }     
    }
});

What Is config function?
The RequireJS can be initialized by passing the main configuration in the HTML template through the data-main attribute.

If you want to update the RequireJS configuration values with your own configurations value. You can do using the requirejs.config function. The configurations options -
ü  config - This is for configuration to a module by using the config option
ü  baseUrl -This is the root path to start the loading of modules.
ü  paths - this is the path mapping for modules that don’t exists in under the base URL.
ü  Shims - This is use for configuration for dependencies.
ü  deps  - array of dependencies to load
ü  map  -
ü  urlArgs -This is the query string arguments are used to fetch all resources that are loaded by using RequireJS.
ü  callback -It executes a function after loading the dependencies and is required when Require is specified as config object before loading RequireJS.
ü  xhtml - It is used to create the script elements by using the document.createElementNS() method.
ü  scriptType - It defines the value for script type attribute used in the document. Default type is "text/javascript".

Example looks like-
require.config({
    baseUrl: 'scripts/app',
    paths: {
        lib: '../lib'
    },
    shim: {
        'backbone': {
            deps: ['underscore'],
            exports: 'Backbone'
        }
    }
});

What Is the project structure of RequireJs?
Project directory and the structure looks like-
── app.js
── index.html
── lib
│   ── modules
│   │   └── template.js
│   ── require.js
│   ── jquery.js
│   └── underscore.js

What Is module in RequireJs?
Module is independent unit of program which make easy maintenance and reusability of code. In RequireJs we talk about JavaScript module.

What is data-main attribute?
The data-main attribute is an attribute that RequireJS will check to start script loading. The data-main set to the base URL for all the scripts.

Example -
<!DOCTYPE html>
<html>
<head>
    <script data-main="libs/main" src="libs/require.js"></script>
</head>
<body>
    <h1> RequireJS Sample apps</h1>
</body>
</html>

What Is AMD module?
The AMD is stands for Asynchronous Module Definition and is used for defining modules and their dependencies with asynchronously manner.

How To use RequireJs with jQuery?
The RequireJS uses jQuery and lots of another dependency i.e.
require(['jquery'], function ($) {
  //jQuery was loaded and can be used now.
});

What is the role of Optimizer?
The Optimizer is a built process where your project is deployed to end user and its combines all scripts/css files together and minify them.

I hope you are enjoying with this post! Please share with you friends!! Thank you!!!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions