上一篇是把整個jQuery庫作為一個模塊。這篇來寫一個自己的模塊：選擇器。
為演示方便這里僅實現常用的三種選擇器id，className，attribute。RequireJS使用define來定義模塊。
新建目錄結構如下
這次新建了一個子目錄js，把main.js和selctor.js放入其中，require.js仍然和index.html在同一級目錄。
HTML 如下
<!doctype html>
<html>
<head>
<title>requirejs入門（二）</title>
<meta charset="utf-8">
<style type="text/css">
.wrapper {
width: 200px;
height: 200px;
background: gray;
}
</style>
</head>
<body>
<div class="wrapper"></div>
<script data-main="js/main" src="require.js"></script>
</body>
</html>
這次把script標簽放到了div的后面，因為要用選擇器去獲取頁面dom元素，而這要等到dom ready后。
因為把main.js放到js目錄中，這里data-main的值須改為“js/main”。
selector.js 如下
define(function() {
function query(selector,context) {
var s = selector,
doc = document,
regId = /^#[\w\-]+/,
regCls = /^([\w\-]+)?\.([\w\-]+)/,
regTag = /^([\w\*]+)$/,
regNodeAttr = /^([\w\-]+)?\[([\w]+)(=(\w+))?\]/;
var context =
context == undefined ?
document :
typeof context == 'string' ?
doc.getElementById(context.substr(1,context.length)) :
context;
if(regId.test(s)) {
return doc.getElementById(s.substr(1,s.length));
}
// 略...
}
return query;
});
define的參數為一個匿名函數，該匿名函數執行后返回query，query為函數類型。query就是選擇器的實現函數。
main.js 如下
require.config({
baseUrl: 'js'
});
require(['selector'], function(query) {
var els = query('.wrapper');
console.log(els)
});
require.config方法執行配置了baseUrl為“js”，baseUrl指的模塊文件的根目錄，可以是絕對路徑或相對路徑。這里用的是相對路徑。相對路徑指引入require.js的頁面為參考點，這里是index.html。
把目錄r2放到apache或其它web服務器上，訪問index.html。
網絡請求如下
main.js和selector.js都請求下來了。
selector.js下載后使用query獲取頁面class為“.wrapper”的元素，控制台輸出了該元素。如下
總結：
- 使用baseUrl來配置模塊根目錄，baseUrl可以是絕對路徑也可以是相對路徑
- 使用define定義一個函數類型模塊，RequireJS的模塊可以是JS對象，函數或其它任何類型（CommonJS/SeaJS則只能是JS對象）
感興趣的請繼續閱讀 下一篇 。