JavaScript模块化-RequireJs实现AMD规范的简单例子

最新推荐文章于 2022-12-22 11:42:24 发布

原创最新推荐文章于 2022-12-22 11:42:24 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

AMD规范简介

　　AMD（异步模块定义），是实现JavaScript模块化规范之一，它采用异步方式加载模块，模块的加载不影响后面语句的运行。require.js和curl.js都是实现AMD规范的优秀加载器。本文采用require.js。

1. define用于模块定义

define(模块ID，依赖模块数组，实例化模块函数)；模块ID和依赖模块数组为可选。

如：

define("color",["jquery"],function($){
    +function(){
        $.fn.extend({
            "color":function(value){
                if(value==undefined){
                    return this.css("color");
                }else{
                    return this.css("color",value);
                }
            }
        });
    }();
});

　　2. require处理依赖加载

　　require(模块数组，回调函数)；第一个参数为要加载的模块数组，第二个参数为模块加载后的回调函数。

　　如：

require(['test'], function (test){
    test.testMath();
    test.testColor();
});

require.js实现AMD的简单例子

　　1. math.js

define("math1",function(){
    var add = function (x,y){
        return x+y;
　　};

    var minus = function(x,y){
        return x-y;
    };
 
　　return {
　　　　add: add,
        minus:minus
　　};
});

　　2. jquery.color.js

　　jquery1.7以上已经实现AMD规范。

define("color",["jquery"],function($){
    +function(){
        $.fn.extend({
            "color":function(value){
                if(value==undefined){
                    return this.css("color");
                }else{
                    return this.css("color",value);
                }
            }
        });
    }();
});

　　3. test.js

define("test",["math1","color","jquery"],function(math,color,$){
    var testMath=function(){
        var x=10;
        var y=5;
        $("#divAdd").html(x+"+"+y+"="+math.add(x,y));
        $("#divMinus").html(x+"-"+y+"="+math.minus(x,y));
    };
    
    var testColor=function(){
        $("#divColor").color("blue");
    };
    
    return {
        testMath:testMath,
        testColor:testColor
    }
});

　　4. main.js

require.config({
    paths: {
　　    "jquery": "jquery-3.2.1.min",
　　　　"color": "jquery.color",
　　　　"math1": "math",
        "test":"test"
　　}
});

require(['test'], function (test){
    test.testMath();
    test.testColor();
});

　　5. index.html

<!DOCTYPE html>
<html>
<head>
    <script src="js/require.js" data-main="js/main" defer async="true"></script>
</head>
<body>
    <div id="divAdd">testAdd</div>
    <div id="divMinus">testMinus</div>
    <div id="divColor">testColor</div>
</body>
</html>