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