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();
});
});
时间： 2024-10-13 03:30:32