AMD Modules in Magento

What is AMD?

AMD (Asynchronous Module Definition) is a JavaScript module pattern that loads modules asynchronously.

Basic Module Definition

define([
    'jquery',
    'mage/url',
    'mage/translate'
], function($, url, $t) {
    'use strict';
    
    // Module code here
    return {
        init: function(config) {
            console.log($t('Hello World'));
        }
    };
});

Module Structure

define([
    'dependency1',
    'dependency2'
], function(dep1, dep2) {
    'use strict';
    
    // Private variables
    var privateVar = 'private';
    
    // Private function
    function privateFunction() {
        return privateVar;
    }
    
    // Public API
    return {
        publicMethod: function() {
            return dep1.method();
        }
    };
});

Key Concepts

• define(): Creates a module
• require(): Loads a module
• Dependencies are loaded asynchronously
• Modules are cached after first load

define() Syntax

// Simple module
define([], function() {
    return {
        value: 42
    };
});

// With dependencies
define(['jquery'], function($) {
    'use strict';
    
    return function() {
        $(document).ready(function() {
            console.log('Ready!');
        });
    };
});

// Named module
define('Vendor_Module/js/module', [
    'jquery'
], function($) {
    'use strict';
    
    return {};
});

require() Syntax

// Load and use
require(['jquery'], function($) {
    'use strict';
    
    $(function() {
        console.log('DOM ready');
    });
});

// Multiple modules
require(['jquery', 'mage/url'], function($, url) {
    'use strict';
    
    var buildUrl = url.build('path/to/route');
});

// With error handler
require(['myModule'], function(myModule) {
    myModule.init();
}, function(error) {
    console.error('Load failed:', error);
});

CommonJS vs AMD

// CommonJS (Node.js)
var $ = require('jquery');

// AMD (Browser)
define(['jquery'], function($) {
    // Use $
});

Revealing Module Pattern

define(['jquery'], function($) {
    'use strict';
    
    var privateData = {};
    
    function privateMethod() {
        return 'private';
    }
    
    return {
        publicMethod: function() {
            return privateMethod();
        },
        getData: function(key) {
            return privateData[key];
        }
    };
});

Factory Pattern

define([], function() {
    'use strict';
    
    return function(config) {
        return {
            init: function() {
                console.log(config.apiKey);
            },
            getData: function() {
                return config.data;
            }
        };
    };
});

Singleton Pattern

define([], function() {
    'use strict';
    
    var instance = null;
    
    function createInstance() {
        return {
            value: Math.random()
        };
    }
    
    return {
        getInstance: function() {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
});

Observer Pattern

define(['jquery'], function($) {
    'use strict';
    
    var events = $({});
    
    return {
        on: function(event, callback) {
            events.on(event, callback);
        },
        trigger: function(event, data) {
            events.trigger(event, data);
        }
    };
});

Magento JS Components

// Widget pattern
define([
    'jquery',
    'jquery/ui'
], function($) {
    'use strict';
    
    $.widget('mage.customWidget', {
        options: {
            selector: '.element'
        },
        
        _create: function() {
            this._on(this.options.selector, {
                'click': this.handleClick
            });
        },
        
        handleClick: function() {
            console.log('Clicked!');
        }
    });
    
    return $.mage.customWidget;
});

UI Component Pattern

define([
    'uiComponent'
], function(Component) {
    'use strict';
    
    return Component.extend({
        defaults: {
            template: 'Vendor_Module/component'
        },
        
        initialize: function() {
            this._super();
            return this;
        },
        
        getData: function() {
            return this.data();
        }
    });
});

Magento JS Utilities

Loading Order

// 1. RequireJS loads dependencies
require(['jquery', 'mage/url'], function($, url) {
    
    // 2. DOM ready
    $(function() {
        
        // 3. Initialize component
        var component = $('#element').componentName({
            option: 'value'
        });
    });
});