In “Javascript framework RequireJS in magento2” topic we will discuss how RequireJS has been used in magento2. It is the one of javascript framework that has been used in magento2
So for this we will cover

  1. Required JS configuration
  2. javascript modules
  3. javascript execution

 

 

1: Required JS configuration

  • All new js modules must be registered into requirejs-config file
  • The file is located in view/<area>/folder of the modules
  • uses standard requirejs-config js syntax

Example:
This is an example that I took from magento/catalog modules

any developer should fellow the above basic structure to add new modules. Each modules should be declared as Name. This Name will be used for javascript modules communication and execution.
For example.
compareItems: ‘Magento_Catalog/js/compare’,

  • Name : compareItems
  • The JS path: ‘Magento_Catalog/js/compare’

here we can see three parts depending upon forward slash.

  • Magento_Catalog => Magento/Catalog
  • js => view/<area>/web/js (view/frontend/web/js)
  • compare => compare.js

so final path for name: compareItems is Magento/Catalog/view/frontend/web/js/compare.js

2: javascript modules

js module generally located in view/<area>/web/jsfolder
There are three types of JS module

  • There are three types of JS module
  • plain module
  • jquery widget
  • UiComponet

1: plain module

A custom JS file that follow AMD rule, else it does not have any specific pre-defined structure

 

In this above example there are two major parts: a: define the dependency,b: return the statement. On this way magento2 usually return a function with two parameters : config, element

2: jquery widget

This structure has specific structure in order to follow AMD rule

it has the same define statement but return part is slightly different . It uses config, element as parameters but they are hidden inside its structure. here it create(Extent from existing) a jquery widget by passing an object with parameters and functions into $.widget() function.

3: UiComponet

This is new invention by magento2. We will cover this section in another tutorial that is UiComponet in magento2

But we will take a little lootk for execution of all those javascript module. There are three different way for executing javascript in magento2

  • Use regular requirejs process with a “require” function.
  • use special data-mage-init attribute of a specific DOM element.
  • use x-magento-init for multiple element instead of specific DOM element

1: Regular require() call

In above example , it called require function with two parameters a: list of dependencies, b: function that has those dependencies as parameter.

2: data-mage-init attribute:

  • it allows a json config to be passed to a module (config parameter in module)
  • it execute a module in context of a specific DOM element (element parameter)

For example you have a module which do somethings with an DOM element lets say <div> , the data-mage-init attribute will set its value to json object which lists js modules and configuration for them. That configuration will be passed as config parameter to the plain js module.

In above it list all module (“toolbarEntry” in our example , but it could be more than one module ) and config for each module ({}) in our example).

3: x-magento-init

it allows the execution of a js module without connecting to a specific DOM-node or multiple node.

above example execute slide functionality on every DOM element that matches a selector “.product-add-form“.

In above example it execute “Magento_Catalog/catalog/category/assign-products” js module without connecting to specific DOM element.

 

Hope you understood little bit of the topic “Javascript framework RequireJS in magento2“. Thanks for visit.

 

Check For sample module from GIT

Check For sample module from GIT for “x-magento-init” attribute

 

 

Javascript framework Require JS in magento2
The following two tabs change content below.
Jyotiranjan is one of passionate programmer who has been working in magento since 6 years and in the mean time he has developed enormous amount of modules and customisation of sites. He loves to write blogs and travel for long journeying.

Latest posts by Jyotiranjan Biswal (see all)

Tagged on:         

Leave a Reply

Your email address will not be published. Required fields are marked *