使用requireJS实现模块化编程

浏览数：36 / 时间：2015年06月09日

　　RequireJS是一个工具库，主要用于客户端的模块管理。他可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。他的模块管理遵守AMD规范(Asynchronous Module Definition)。

　　RequireJS的基本思想就是：通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。

第一步，将requirejs.js文件使用script标签嵌入到网页，然后即可以使用requireJS进行模块化编程。

<script data-main="scripts/main" src="scripts/requirejs.js"></script>
上面的js嵌入最好放在html文档的最后面加载，如果放在head头部，最好使用一部加载：

<script refer async="true" data-main="scripts/main" src="scripts/requirejs.js"></script>

define方法：定义模块

RequireJS要求每个模块放在一个单独的文件，因此需要使用特定的方法实现模块定义。模块定义有两种情况：第一种情况是定义独立模块，即所定义的模块不依赖其他模块；第二种情况是定义非独立模块，及锁定的模块依赖于其他模块。

1.独立模块：常用方法

define(function () {
    return {
        method1: function() {},
        method2: function() {},
    };
});

2.非独立模块

define([‘module1‘, ‘module2‘], function(m1, m2) {
    return {
        method: function() {
            m1.methodA();
            m2.methodB();
        }
    };
});
定义模块时可以使用require方法动态加载需要的模块

define(function ( require ) {
    var isReady = false, foobar;
 
    require([‘foo‘, ‘bar‘], function (foo, bar) {
        isReady = true;
        foobar = foo() + bar();
    });
 
    return {
        isReady: isReady,
        foobar: foobar
    };
});

require方法：调用模块

　　　　require方法用于调用模块。他的参数与define方法类似。

require([‘foo‘, ‘bar‘], function ( foo, bar ) {
        foo.doSomething();
});

　　define和require这两个定义模块、调用模块的方法，合称为AMD模式。它的模块定义的方法非常清晰，不会污染全局环境，能够清楚地显示依赖关系。

AMD模式可以用于浏览器环境，并且允许非同步加载模块，也可以根据需要动态加载模块。

　　下面使用一个简单的完整实例来更加详细的理解RequireJS的工作原理：

首先：require.html文件

<html>

<head>
    <meta charset="utf-8" description="require test">
    <link rel="stylesheet" type="text/css" href="../css/require.css">
    <script src="//localhost:35729/livereload.js"></script>
    <script type="text/javascript" refer async="true" data-main="../js/main" src="../js/requirejs.js"></script>
</head>

<body>
    <div class="header">
        <h2>This is the head</h2>
    </div>
    <div class="main">
        <div class="left">
            <ul class="content-item">
                <li>时事新闻</li>
                <li>即时娱乐</li>
                <li>sports世界</li>
                <li>军事要闻</li>
                <li>世界观光</li>
            </ul>
        </div>
        <div class="right">
            <!-- <label for="username">UserName:</label> -->
            <input type="text" id="username" placeholder="username"></input>
            </br>
            <!-- <label for="password">PassWord:</label> -->
            <input type="password" id="password" placeholder="password"></input>
            </br>
            <input type="button" value="Submit" class="submit"></input>
        </div>
    </div>
    <div class="foot">
        <h2>This is the foot</h2>
    </div>
</body>

</html>

然后相应的css文件：require.css

html body{
    margin:0;
    border:0;
    background-color: #f5f5d5;
    font-family:Georgia,serif;
    letter-spacing: -0.01em;
    word-spacing:0.2em;
    line-height:1.8em;
}
.header,.foot{
    text-align: center;
}
.main{
    width:90%;
    margin:0 auto;
}
.left{
    width:55%;
    padding:50px;
    background-color: #ddd;
    box-shadow: 10px 5px 6px #888;
}
.content-item>li{
    margin-top: 20px;
}
.right{
    width:100%;
    margin-left:30%;
    margin-top: 40px;
    box-shadow: 10px 4px 6px #fff;
}
.right input{
    display: inline-block;
    width:40%;
    height:40px;
    border:1px solid rgba(0,0,0,0.4);
    margin-bottom:10px;
    background-color: transparent;
    box-shadow: 2px 2px 1px #888;
    font-size: 16px;
}
.right input[type="button"]:hover{
    background-color: rgba(254,208,61,0.8);
}
.right input[type="button"]{
    cursor: pointer;
}
#username,#password{
    text-indent: 40px;
}

　　最后就是使用define方法定义的模块以及使用require方法加载模块

define方法定义的validate.js文件：

require.config({
    paths: {
        jquery: ‘jquery-2.0.3.min‘
    }
});
define([‘jquery‘], function($) {
    "use strict";
    var getUsername = function() {
        return $("#username").val();
    };
    var getPassword = function() {
        return $("#password").val();
    };
    var submit = function() {
        var username,
            password;
        username = getUsername();
        password = getPassword();
        if (username == ‘‘)
            alert("there is no username input");
        else if (!/^\d{6,9}$/.test(password))
            alert("password is illegal");
        else{
            alert("success");
        }
    };
    return {
        getUsername: getUsername,
        getPassword: getPassword,
        submit: submit
    };
});

require方法加载validate文件main.js：

require.config({
    waitSeconds: 0
});
require(["validate"], function(validate) {
    "use strict";
    var username,
        password;
    $(".submit").click(function() {
        validate.submit();
    });
});