Why does anyone use define(['jquery'...], function($...){...}

Question

I am working in a project where we are using a chat-SDK. They do like in the title to declare a lot of things... for example jquery... I've never seen jquery treated like that before? Why are they doing that?

This is probably the define function from require.js, see [docs](http://requirejs.org/docs/api.html#define) — Swimburger, Mar 13 '17 at 11:54

score 2 · Accepted Answer · answered Mar 13 '17 at 12:15

The define method is probably taken from RequireJS or similar framework and such file constitutes Asynchronous Module Definition (see http://requirejs.org/docs/whyamd.html).

The simple idea behind the modules is that instead of adding all neede JS files to the page header you add just the requirejs library and small configuration (mapping of module name to URL). When creating your own module you will use following template:

  define([required module list], function(resolved module list){
       /* module initialization code */
       return /*value used as parameter to function 
                when this module is required by other module */;
    });

It solves multiple issues for you:

no need to have global variables
modules are loaded on demand, if you are writing large application, the modules are loaded when needed and not at the document start - this can reduce the web application startup time
js files download and initialization is done for you by the requirejs lib in proper order of dependencies

Why does anyone use define(['jquery'...], function($...){...}

1 Answers1