Tổng quan về RequireJS

RequireJS cung cấp API thông qua namespace requirejs được tạo ra khi thư viện được nạp vào trình duyệt. Ba hàm chính bao gồm:

• define: Hàm toàn cục dùng để khai báo các module. Mỗi module có một ID duy nhất để RequireJS quản lý trong runtime.
• require: Hàm toàn cục dùng để nạp các module phụ thuộc.
• config: Hàm dùng để cấu hình RequireJS, bao gồm đường dẫn, alias, và shim.

AMD và vấn đề tải module bất đồng bộ

Có hai chuẩn module phổ biến trong JavaScript: CommonJS và AMD (Asynchronous Module Definition). CommonJS sử dụng cú pháp tải đồng bộ:

var math = require('math');
math.add(2, 3);

Phương pháp này hoạt động tốt ở môi trường server vì các module nằm trên ổ đĩa cục bộ, thời gian chờ chỉ là thời gian đọc đĩa. Tuy nhiên, ở môi trường trình duyệt, module nằm trên server từ xa, thời gian chờ phụ thuộc vào tốc độ mạng, dẫn đến tình trạng trình duyệt bị "đơ" (giả chết) trong quá trình chờ tải.

AMD ra đời để giải quyết vấn đề này bằng cách tải module bất đồng bộ. Cú pháp của AMD yêu cầu truyền vào mảng các module phụ thuộc và một callback:

require(['math'], function (math) {
    math.add(2, 3);
});

Khi đó, math.add() chỉ được thực thi sau khi module math đã tải xong, và trình duyệt không bị block trong lúc chờ. Hai thư viện chính triển khai AMD là RequireJS và curl.js.

AMD định nghĩa hàm define với cú pháp:

define(id?, dependencies?, factory)

Kiến trúc tích hợp

File cấu hình chính - main.js

'use strict';

var compressSuffix = ".min";

require.config({
    baseUrl: 'js/',
    paths: {
        'angular': 'libs/angular/angular' + compressSuffix,
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
    }
});

require([
    'angular',
    // các dependency khác
], function (angular) {
    require(['domReady'], function () {
        angular.bootstrap(document, ['myApp']);
    });
});

Phương thức angular.bootstrap(document, ['myApp']) cho phép khởi tạo AngularJS thủ công trên trang HTML tĩnh thay vì sử dụng chỉ thị ng-app.

Đăng ký ứng dụng - app.js

File app.js được nạp thông qua main.js, dùng để khai báo module chính của ứng dụng và các module phụ thuộc, đồng thời định nghĩa cấu hình route cho từng module.

define(["angular"], function (angular) {
    'use strict';

    var myApp = angular.module('myApp', [
        // các module phụ thuộc
    ]).run(['$rootScope', '$http', function ($rootScope, $http) {
        // logic khởi tạo
    }]);

    return myApp;
});