What is 'define' used for in JavaScript (aside from the obvious)?

JavascriptRequirejsRequirejs DefineAloha

Javascript Problem Overview


I have searched high and low for documentation on this, but I just cannot find anything anywhere.

I am using Aloha and want to use their sidebar prototype to create a new side bar of my own attached to other plugin functionality.

Their sidebar.js starts off with this, but I can't for the life of me find any documentation that explains what it means.

define( [
    'aloha/core',
    'aloha/jquery',
    'aloha/selection'
], function (Aloha, jQuery, Selection, Plugin) {

It then goes on in that wrapper to define a bunch of functions, so vars and some proptotypes- which I can just about get my head around...

What is that saying or where can I find an explanation?

Javascript Solutions


Solution 1 - Javascript

I can't say for sure without seeing the entire script, but it's likely to be the define function from RequireJS, in particular the "define with dependencies" form of that function. It is used to define a "module":

> A module is different from a traditional script file in that it > defines a well-scoped object that avoids polluting the global > namespace. It can explicitly list its dependencies and get a handle on > those dependencies without needing to refer to global objects, but > instead receive the dependencies as arguments to the function that > defines the module.

And the "define with dependencies" form of define is described as follows:

> If the module has dependencies, the first argument should be an array > of dependency names, and the second argument should be a definition > function. The function will be called to define the module once all > dependencies have loaded. The function should return an object that > defines the module.

Solution 2 - Javascript

This is AMD pattern for writing modules which AMD stands for Asynchronous Module Definition for when you need to import modules async basically rather than something like commonJS.

define(['module1', 'module2'], function(module1, module2) {
  console.log(module1.sayHi());
});

Define takes an array of dependencies and once all those are loaded in the background (async) in a non-blocking way, define calls the callback which in turn accepts arguments (in this case the dependencies).

Another thing to note is that each one of those modules also needs to be defined using "define" keyword. So for instance module1 would be defined like below :

define([], function() {

  return {
    sayHi: function() {
      console.log('Hi Hi');
    },
  };
});

This way of writing modules (AMD) allows you to write with browser compatibility in mind (no require() like in nodeJS) and also you can define many formats including objects, JSON, etc while for instance commonJS needs modules to be objects.

Keep in mind, AMD has it's own downfalls. Hope this helps someone.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDavid O'SullivanView Question on Stackoverflow
Solution 1 - JavascriptJames AllardiceView Answer on Stackoverflow
Solution 2 - JavascriptTheeBenView Answer on Stackoverflow