28

What purpose does the following code serve? What does factory function do here? Here root is window object. Is factory a default java script function? In what kind of scenarios this type of code can be used. This code is from toggle.js from Simon Tabor. Zepto and ender are libraries. Is this mostly used in libraries.

   if (typeof define === 'function' && define['amd']) {
        define(['jquery'], factory);
     } else {
      factory(root['jQuery'] || root['Zepto'] || root['ender'] || root['$']|| $);
    }
Aran Mulholland
  • 23,555
  • 29
  • 141
  • 228
Suresh kumar
  • 475
  • 1
  • 4
  • 10

2 Answers2

33

This code checks for the presence of require.js, a JavaScript dependency management library.

If 'define' is not undefined and it is a function and 'amd' (asynchronous module definition) is also defined then the code assumes that require.js is in play.

If this is so then it defines 'factory' and passes jQuery to it as a dependency. Otherwise it sets up the dependencies that the code needs by attaching them to the root object.

As for what 'factory' is: it is not defined by the Javascript framework, it will be a function in the same file most likely. It will take the parameter jQuery.

Aran Mulholland
  • 23,555
  • 29
  • 141
  • 228
  • 1
    I have one more question. In [Vue.js](https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js) I can see `typeof define === 'function' && define.amd ? define(factory)`. What is the purpose of defining factory without a library's name? How will I be able to get access to it when I need it? I mean that I cannot write something like `require(['vue'], vue => console.log`). It does not work for me because the library was defined without a name. Thanks! – Vladyslav Turak Feb 21 '18 at 13:13
  • Just to clarify. I can't get Vue on my `window` and I can't get Vue with `require` because I am getting `Mismatched anonymous define() module`. [Here](https://stackoverflow.com/questions/15371918/mismatched-anonymous-define-module) was described that we can't use anonymous defines: _You have an anonymous define ("modules that call define() with no string ID") in its own script tag (I assume actually they mean anywhere in global scope)_. So, I don't understand why the frameworks implement this `define` logic this way. Thanks once again! – Vladyslav Turak Feb 21 '18 at 13:22
  • I don't know vue.js you should ask a totally new question. – Aran Mulholland Mar 05 '18 at 22:09
  • Details about one sentence: Otherwise it sets up the dependencies that the code needs by ~attaching~ **getting** them ~to~ **from** the root object. – simohe Jun 15 '22 at 16:07
0

This is part of a Universal Module Definition (short UMD). It detects the environment and then handles dependencies and exports.

Depending on what environments the module supports (require.js, nodejs, browser, ...), the UMD might look different. See https://github.com/umdjs/umd for some templates of this loader.

What is special here is the loading of the one dependency when running in the browser. It loads jQuery OR Zepto OR ender OR $, whatever it finds first. So it allows the user to load any of this with the <script> tag (and not a specific one).

simohe
  • 613
  • 7
  • 20