A microkernel for modular javascript, a toolchain for modern front-end, a micro-framework for growable WebApp.

OzJS / define & require

define的用法

1. AMD风格的公共模块


// source: [baseUrl]/public_module_name.js
define('public_module_name', [
    "public_library_A",
    "library_namespace/public_module_A", // source: [baseUrl]/library_namespace/public_module_A.js
    "library_namespace/public_module_B",
    "alias_namespace/public_module_A" // source: [baseUrl]/{alias_namespace}/public_module_A.js
], function(libA, modA, modB, aliasA/*, require, exports, module*/){
    var window = this;
    return { myname: '...' }; // 或 exports.myname = '...';
});

2. AMD风格的私有模块


// source: [baseUrl]/project/lib/private_module1.js
define([
    "./private_module_A", // source: [baseUrl]/project/lib/private_module_A.js
    "./private_module_B",
    "library_namespace/public_module_A" // source: [baseUrl]/library_namespace/public_module_A.js
], function(modA, modB, pubA, require, exports, module){
    var window = this;
    var _modA = require("./private_module_A"); // 此处的require只能获取依赖声明中列出的模块
    exports.myname = '...'; // 或 return { myname: '...' };
});

3. 异步模块


define([
    "finish",
    "public_library_A"
], function(finish, modA, require, exports){
    setTimeout(function(){
        exports.myname = 'xx';
        finish({ myname: 'yy' }); //如果finish有参数,会替代原有的exports对象
    }, 1000);
    // 不支持return
});

4. 远程模块


define('module_name_A', "path/to/file.js");
define('module_name_A', "../path/to/file.js");
define('module_name_B', "{alias}/path/to/file.js");
define('module_name_C', "http://domain/path/to/file.js");

5. 非AMD脚本声明为远程模块


define('non_AMD_script_A', ['non_AMD_script_B'], "path/to/non_AMD_script_A.js");
define('path/to/non_AMD_script_B', ['path/to/non_AMD_script_C']);
define('AMD_script_A', ['non_AMD_script_A'], function(none){
    // none === undefined
    return global_variable_in_script_A;
});

6. CommonJS风格的公共模块


define('public_module_name', function(require, exports, module){
    var window = this,
        libA = require("public_library_A"),
        modA = require("library_namespace/public_module_A"),
        modB = require("library_namespace/public_module_B"),
        aliasA = require("alias_namespace/public_module_A");
    module.exports = function(){};
});

7. CommonJS风格的私有模块


define(function(require, exports, module){
    var window = this,
        modA = require("./private_module_A"),
        modB = require("./private_module_B"),
        pubA = require("library_namespace/public_module_A");
    module.exports = function(){};
});

require的用法

require的机制


require([
    "alias/A", //  模块状态1
    "remote_module", // 模块状态2
    "public_module" // 模块状态3
], function(A, remote, pub/*, require */){
    // do something
});

require的参数


require("library_namespace/public_module_A", function(pubA){
});

require(["public_module"], function(pub){
});

require(function(require){
    var window = this,
        remote = require("remote_module");
});

require表达动态依赖


define([
    "./private_module_A",
    "remote_module",
    "public_module"
], function(modA, remote, pub/*, require */){

    if (true) {
        require(["./private_module_B"], function(modB){ // module_B会依赖其他模块

        });
    }

});

require的配置


require.config({
    baseUrl: '/js/mod/',  // js文件URL的基础部分(ozma的配置文件里的baseUrl则表示本地路径),默认为""
    distUrl: 'http://static_domain/js/mod/',  // oz.js在处理ozma生成的发布文件时,会用distUrl取代baseUrl(产品环境中html里如果指定了CDN地址,则不会用到baseUrl和distUrl)
    aliases: {                // 可选。能用于模块名和远程模块的地址
        'app': '../app/'      // 相对于baseUrl
    },
    enableAutoSuffix: false   // 如果ozma的配置文件里设置了`disableAutoSuffix: false`(默认为true),则oz.js需要设置`enableAutoSuffix: true`
});

重新执行模块


require([
    "new!module_dependency"
], function(module_dependency){
    //
});

相同模块代码作用于不同window


require.call(contentWindow, [
    "new!module_dependency"
], function(module_dependency){
    var window = this; // this === contentWindow
});