模块化开发规范：AMD(RequireJS)

使用CommonsJS模块化开发，模块的加载是运行时同步加载，在浏览器中需要使用Browserify进行编译和打包。AMD规范和CommonsJS不同，RequireJS主要运用在浏览器中，模块的加载是异步的，也可以用在其他环境中，比如 Node。本文只讨论在浏览器中是如何使用的。

下载

下载requirejs

文件目录

|--requirejs_test
    |--js
        |--libs
            |--require.js
            |--jquery-1.10.1.js
        |--modules
            |--teacher.js
            |--xiaoming.js
            |--xiaowang.js
        |--main.js
    |--index.html

定义模块

1、简单的键值对

//直接在define()中传个对象。
define({
    name:"小王",
    age:"10"
});

2、定义一个无依赖的模块

//difine()中只传入一个回调函数。
define(function () {
    var name = "小明"
    function fun () {
        return "滚出去……"
    }
    function getName () {
        return name;
    }
    //只向外暴露两个方法，不暴露name属性
    return {
        fun:fun,
        getName:getName
    }
})

3、定义一个有依赖的模块

//依赖xiaoming.js模块，define()方法中传入两个参数，
//第一个是一个数组，数组中包含依赖模块的路径，或者require.config中设置的名称，下面会讲。
//第二个参数是回调函数，毁掉函数的参数是前面数组中的每一项的别名，顺序与数组中的顺序一一对应，
//建议别名与依赖的模块名一致或者一眼能辨别。
define(['./modules/xiaoming'],function(xiaoming){
    return {
        say: function(someone) {
            var student = someone||xiaoming
            console.log(student.getName()+student.fun())
        },
        introduce:function(student){
            console.log("这是你们的新同学"+student.name+",今年"+student.age+"岁。")
        }
    }
})

配置require.config

所有配置项详见 RequireJS中文网-配置选配

//基本配置
//所有模块名应该小写
require.config({
    baseUrl: "js",    //设置模块查找根目录
    paths: {
        "teacher":  "modules/teacher",
        "xiaowang": "modules/xiaowang",
        "jquery":   "libs/jquery-1.10.1",    //jquery支持AMD规范，可以直接引入，但是主要模块名要小写，否则会报错。
    },
    //引入非AMD规范的第三方库
    //如模块underscore和backbone都没有采用AMD规范编写。
    //deps属性表明该模块的依赖模块。
    shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        }
    }
});

引入html

//main.js

require.config({
    baseUrl: "js",
    paths: {
        "teacher": "modules/teacher",
        "xiaowang": "modules/xiaowang",
        "jquery": "libs/jquery-1.10.1",
    },
});
(function () {
    define([
        "teacher",
        "xiaowang",
        "jquery"
    ], function (teacher, xiaowang, $) {
        teacher.say();
        teacher.introduce(xiaowang);
        $('body').css("background", "green");
    });
})()



//index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--data-main的作用是指定程序的主模块-->
    <script data-main="./js/main.js" src="./js/libs/require.js"></script>
</body>
</html>

模块化开发规范：AMD(RequireJS)

下载

文件目录

定义模块

配置require.config

引入html

猜你喜欢