Magento 2 – How to Return All JS Functions via RequireJS

magento2magento2.2.2requirejsrequirejs-config.js

In my exemple, i have just one function and I call it in phtml on passing the name function as param require(['jquery', 'module'], function($, hello) and it works fine.

  1. Now if i want to return 10 functions for exemple, what is the best way to do that.

  2. Did deps attribute deps: ["js/go"]is correct for that instead of map

  3. I wonder if there is not a way to implemente some js libraire, ie we have to put the lib js content in a file js then we declare it in a some module then the lib content will automatically be rendered without calling all functions one by one.

app/code/Vendor/Module/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            module: 'Vendor_module/js/go',
        }
    }
};

app/code/Vendor/Module/view/frontend/web/js/go.js

define(['jquery'], function($){
   "use strict";
       return function hello()
       {
           alert('hello from function');
       }

       public function f1()
       {
           ...
       }
       public function f2()
       {
           ...
       }
       ...
});

app/code/Vendor/Module/view/frontend/templates/file.phtml

<script type="text/javascript">
    require(['jquery', 'module'], function($, hello) {
        hello();
    });
</script>

Best Answer

Rather than return the function you can return an object that contains the functions, you can them call them individually whenever you need.

In this example I have 3 files:

  • app/design/frontend/Vendor/theme/Magento_Theme/templates/test.phtml
  • app/design/frontend/Vendor/theme/Magento_Theme/web/js/module-a.js
  • app/design/frontend/Vendor/theme/Magento_Theme/web/js/module-b.js

Template

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Theme/js/module-b":{}
        }
    }
</script>

Module A

define(['jquery', 'domReady!'], function($, doc) {
    'use strict';

    var moduleA = {
        functionA: function() {
            console.log('This is from module A, functionA');
        },

        functionB: function() {
            console.log('This is from module A, function B');
        }
    };

    return moduleA;
});

Module B

require(['jquery', 'domReady!', 'Magento_Theme/js/module-a'], function($, doc, moduleA) {
    'use strict';

    moduleA.functionA();
    moduleA.functionB();
});

Screenshot enter image description here

Alternative method

You can also do it by writing the functions outside an object, then returning only the functions you need. The positive of this method is you only return what you want to be re-usable.

Replace module A from above with this:

define(['jquery', 'domReady!'], function($, doc) {
    'use strict';

    function functionA() {
        console.log('This is from module A, functionA. Returning an object of functions.');
    }

    function functionB() {
        console.log('This is from module A, functionB. Returning an object of functions.');
    }


    return {
        functionA: functionA,
        functionB: functionB
    }
});

Screenshot enter image description here

Related Topic