首页 > 代码库 > 使用requireJS实现模块化编程

使用requireJS实现模块化编程

  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();    });});

 

 

 

 

 



 

使用requireJS实现模块化编程