requirejs 源码浅析

  • kitty.js - 简化版的 requirejs
  • requirejs 加载流程
  • AMD vs CommonJS vs UMD
  • UML 基础知识

kitty.js

kitty.js 是一个简化版的 require.js。

链接：

几个记录点：

  • 收集依赖：通过将代码toString, 并正则匹配 require 关键字就可以了

    factory.toString()
  .replace(/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg, '')
  .replace(/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g, function(match, dep) {
    deps.push(dep);
  });

  • 模块的一个大致生命

    var STATUS = {
  UNFETCH: 0,   // 未加载
  FETCHING: 1,  // 正在请求模块资源
  FETCHED: 2,   // 模块资源请求完成
  LOADING: 3,   // 正在请求资源的依赖模块
  LOADED: 4,    // 模块和模块的依赖都已加载完成
  EXECUTED: 5   // 已执行完毕
};

大致的流程图

点击可查看大图

requirejs

requirejs 1

AMD vs CommonJS vs UMD

AMD

//    filename: foo.js
define(['jquery', 'underscore'], function ($, _) {
    //    methods
    function a(){};    //    private because it's not returned (see below)
    function b(){};    //    public because it's returned
    function c(){};    //    public because it's returned

    //    exposed public methods
    return {
        b: b,
        c: c
    }
});

CommonJS

//    filename: foo.js
var $ = require('jquery');
var _ = require('underscore');

//    methods
function a(){};    //    private because it's omitted from module.exports (see below)
function b(){};    //    public because it's defined in module.exports
function c(){};    //    public because it's defined in module.exports

//    exposed public methods
module.exports = {
    b: b,
    c: c
};

UMD

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'underscore'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory(require('jquery'), require('underscore'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.jQuery, root._);
    }
}(this, function ($, _) {
    //    methods
    function a(){};    //    private because it's not returned (see below)
    function b(){};    //    public because it's returned
    function c(){};    //    public because it's returned

    //    exposed public methods
    return {
        b: b,
        c: c
    }
}));

UML 基础

151457489864

References