上一篇是把整个 jQuery 库作为一个模块。
这篇来写一个自己的模块：选择器。
为演示方便这里仅实现常用的三种选择器 id， className， attribute。 RequireJS 使用 define 来定义模块。
新建目录结构如下
这次新建了一个子目录 js， 把 main.js 和 selctor.js 放入其中， require.js 仍然和 index.html 在同一级目录。
HTML 如下
1 <!doctype html> 2 <html> 3 <head><title>requirejs 入门（二）</title> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 .wrapper { 7 width: 200px; 8 height: 200px; 9 background: gray; 10 } </style> 11 </head> 12 <body> 13 <div class="wrapper"></div> 14 <script data-main="js/main" src="require.js"></script> 15 </body> 16 </html>
这次把 script 标签放到了 div 的后面，
因为要用选择器去获取页面 dom 元素，
而这要等到 dom ready 后。
因为把 main.js 放到 js 目录中，这里 data-main 的值须改为“js/main”。
selector.js 如下
1 define(function () { 2 function query(selector, context) { 3 var s = selector, doc = document, 4 regId = /^#[\w\-]+/, regCls = /^([\w\-]+)?\.([\w\-]+)/, 5 regTag = /^([\w\*]+)$/, regNodeAttr = /^([\w\-]+)?\[([\w]+)(=(\w+))?\]/; 6 var context = context == undefined?document:typeof context == 'string'?doc.getElementById(context.substr(1, context.length)):context; 7 if (regId.test(s)) { 8 return doc.getElementById(s.substr(1, s.length)); 9 } 10 } 11 12 return query; 13 });
define 的参数为一个匿名函数，该匿名函数执行后返回 query，query 为函数类型。query 就 是选择器的实现函数。
main.js 如下
1 require.config({baseUrl: 'js'}); 2 3 require(['selector'], function (query) { 4 var els = query('.wrapper'); 5 console.log(els) 6 });
require.config 方法执行配置了 baseUrl 为“js”，
baseUrl 指的模块文件的根目录，
可以是绝 对路径或相对路径。
这里用的是相对路径。相对路径指引入 require.js 的页面为参考点，这里 是 index.html。
main.js 和 selector.js 都请求下来了。
selector.js 下载后使用 query 获取页面 class 为“.wrapper”的元素，控制台输出了该元素。 如下
总结： 1、使用 baseUrl 来配置模块根目录，baseUrl 可以是绝对路径也可以是相对路径。 2、使用 define 定义一个函数类型模块，RequireJS 的模块可以是 JS 对象，函数或其它任何 类型（CommonJS/SeaJS 则只能是 JS 对象）。
