2

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>
Improve this question
1
  • inchoo.net/magento-2/… if you're just wanting to add a custom .js of local function declerations. Commented Mar 19, 2018 at 13:29

1 Answer 1

Reset to default
2

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

Improve this answer
17
  • we are obliged to here to declare two js files module-a.js, module-b.js ? why not just one js Commented Mar 19, 2018 at 13:48
  • I only added the second file to show you how to call it form another file, if you would rather add your JS inside your PHTML (I don't recommend this) then just replace your JS inside your PHTML file with module B. It works the same way in a template as it does in a second JS file. Commented Mar 19, 2018 at 14:02
  • So rather than hello(); you would write module.hello(); Commented Mar 19, 2018 at 14:02
  • Ok, i prefered the alternative method, but i have two question: 1. why return {functionA, functionB} doesn't work but {functionA:functionA ...} work 2. should i put moduleA as param in phtml function($, doc){doc.functionA();} doesn't work, function($, doc, moduleA){moduleA.functionA();} work I remember you that i used the alternative method Commented Mar 19, 2018 at 15:04
  • 1
    Ben, I found the solution of liveReloadand how to configure it with Grunt, if ever you need it, I've posted the complete solution magento.stackexchange.com/questions/219265/… Commented Mar 23, 2018 at 18:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.