本文主要是講述如何使用requirejs這個(gè)模塊化管理工具來搭建前端項(xiàng)目結(jié)構(gòu)，適合內(nèi)網(wǎng)開發(fā)以及還在使用比較舊的技術(shù)棧（如jQuery）的前端同學(xué)栈暇。
github地址：https://github.com/duwenbin0316/Requirejs-demo.git，如果對你有幫助，請點(diǎn)個(gè)star嗓蘑，謝謝须肆！
requirejs的使用我就一筆帶過，主要是講如何搭建項(xiàng)目結(jié)構(gòu)桩皿。
項(xiàng)目基本目錄結(jié)構(gòu)如下：
項(xiàng)目目錄結(jié)構(gòu)
根目錄下有index.html文件和scripts文件夾豌汇，我們把css文件和js文件放在一起處理，components目錄下按照頁面結(jié)構(gòu)定義文件夾結(jié)構(gòu)泄隔，例如footer文件夾就是用來處理頁面footer的模塊拒贱，文件夾中包括footer.js和footer.css文件，如果還需要拆分子組件佛嬉，則繼續(xù)嵌套即可逻澳。
這種目錄結(jié)構(gòu)的好處在于實(shí)現(xiàn)了模塊功能和樣式的高內(nèi)聚，符合模塊化開發(fā)的高內(nèi)聚低耦合思想暖呕，項(xiàng)目也更容易維護(hù)斜做。
在index.html中引入requirejs本身以及主js文件：
<script data-main="scripts/index" src="scripts/lib/require.js"/></script>
index.js定義了模塊的名稱和路徑，以及模塊所需的依賴湾揽，并調(diào)用了main模塊的start方法：
require.config({
baseUrl: "scripts/",
map: {
'*': {
'css': 'lib/css.min'
}
},
paths: {
"jquery": "lib/jquery-2.1.4.min",
"main": "main"
},
shim: {
"main": {
deps: ['jquery', 'css!./main.css']
}
}
})
require(['main'], function(main){
main.start()
})
main.js為應(yīng)用主模塊瓤逼，調(diào)用main.start()執(zhí)行應(yīng)用初始化，所有的dom創(chuàng)建都在模塊內(nèi)部處理库物，index.html中只有一個(gè)div#main的dom元素霸旗。main.js內(nèi)容如下：
/**
* 定義一個(gè)main模塊
*/
define(function() {
var main = function() {
this.moduleName = 'main'
}
main.prototype = {
start: function() {
// 渲染頁面布局
this.renderLayout();
// 調(diào)用header的start，渲染header內(nèi)容
require(['header'], function(header){
header.start();
})
},
renderLayout: function() {
var left = $("<div>").addClass('sider left').prop('id', 'sider');
var right = $("<div>").addClass('right');
var header = $("<div>").prop('id', 'header');
var content = $("<div>").prop('id', 'content');
var footer = $("<div>").prop('id', 'footer');
right.append(header, content, footer);
$("#main").append(left, right);
}
}
return new main();
});
同時(shí)在main.js中調(diào)用了header模塊的start方法艳狐。
項(xiàng)目結(jié)構(gòu)按照該思路一層一層構(gòu)建定硝，簡單明了，當(dāng)然也可以根據(jù)個(gè)人習(xí)慣提取出一些通用的組件毫目，本文就不再贅述蔬啡。
