序
雖然說利用requirejs結合text.js插件實現模塊化開發並沒有多大意義，不過用於學習瞭解requirejs的基本功能還是很有意義的。本文以最簡單的案例演示他們的模塊化實現過程。
text.js下載
下載地址： https://github.com/requirejs/text
bower下載命令：
$ bower install text項目目錄
打包前：
配製文件
config.js
requirejs.config({
baseUrl: './src/js', //require依賴根目錄(注意：當演示打包後效果是改爲“./build/js”）
paths: {
jquery: '../../lib/jquery/dist/jquery',
text: '../../lib/text/text'//爲text.js文件路徑起別名
}
});build.js
({
appDir: '../src', //需要打包的目錄
baseUrl: './js', //require依賴根目錄
dir: '../build', //打包輸出路徑
mainConfigFile: './config.js', //依賴關係配製文件
name: 'app' //需要打包的模塊
})第三方庫
本塊內容請自行下載並放置到該目錄下。
開發源文件src
js/app.js
var modules = [
'jquery', //依賴jquery
'text!../views/teacher.html', //用text.js插件導入teacher.html
'text!../views/student.html' //用text.js插件導入student.html
];
require(modules, function ($, teacher, student) {
var isChange = false;
$('#box').html(teacher);
$('#btn').click(function () {
if (isChange) {
$('#box').html(teacher);
} else {
$('#box').html(student);
}
isChange = !isChange;
});
});views/teacher.html
<h2 class="title">老師模塊</h2>
<ul class="list">
<li><span>姓名：</span>婁笙悅</li>
<li><span>年齡：</span>30</li>
<li><span>性別：</span>男</li>
</ul>views/student.html
<h2 class="title">學生模塊</h2>
<ul class="list">
<li><span>姓名：</span>張三瘋，<span>年齡：</span>18，<span>性別：</span>男</li>
<li><span>姓名：</span>王五星，<span>年齡：</span>20，<span>性別：</span>男</li>
<li><span>姓名：</span>王翠翠，<span>年齡：</span>19，<span>性別：</span>女</li>
</ul>入口文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>requirejs實現模塊化開發</title>
</head>
<body>
<h1>requirejs實現模塊化開發</h1>
<button id="btn">切換模塊</button>
<div id="box"></div>
<script src="lib/requirejs/require.js" data-main="main.js"></script>
</body>
</html>main.js
var debug = true; //如果要演示打包後的效果需要改爲false
if (debug) {
require(['./config/config', './src/js/app']);
} else {
require(['./config/config', './build/js/app']);
}
r.js打包項目
r.js安裝
$ npm install -g requirejsr.js打包命令
在根目錄下右鍵打開git工具並執行：
$ r.js -o config/build.js注意：當腰演示打包後的效果時需要分別修改main.js和config.js的相關配製，具體如何修改請看文件註釋部分。
謝謝關注，歡迎點贊：）
