上一篇是把整个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”的元素，控制台输出了该元素。如下

总结：

  1. 使用baseUrl来配置模块根目录，baseUrl可以是绝对路径也可以是相对路径
  2. 使用define定义一个函数类型模块，RequireJS的模块可以是JS对象，函数或其它任何类型（CommonJS/SeaJS则只能是JS对象）

RequireJS基础（二）的更多相关文章

  1. Python全栈开发【基础二】

    Python全栈开发[基础二] 本节内容: Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 基本数据类型(数字.布尔值.字符串.列表.元组.字典) 其他(编码,range,f ...

  2. Bootstrap <基础二十九>面板（Panels）

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  3. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  4. Bootstrap<基础二十七> 多媒体对象（Media Object）

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  5. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

  6. Bootstrap <基础二十五>警告（Alerts）

    警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...

  7. Bootstrap<基础二十四> 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

  8. Bootstrap <基础二十三>页面标题（Page Header）

    页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...

  9. Bootstrap <基础二十二>超大屏幕（Jumbotron）

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

随机推荐

  1. Best Practices for Performance_1、2 memory、Tips 性能和小的优化点、 onTrimMemory

    http://developer.android.com/training/articles/memory.htmlhttp://developer.android.com/tools/debuggi ...

  2. office project 激活

    office project 2010激活方式: 图上中,箭头位置,可能没激活,需要软件激活 ( mini-KMS Activator(Office2010激活工具) V1.2 绿色版 ) 激活方式如 ...

  3. 解析PHP正则提取或替换img标记属性

    <?php/*PHP正则提取图片img标记中的任意属性*/$str = '<center><img src="/uploads/images/20100516000. ...

  4. I/O 请求数据包

    MSDN原文:https://msdn.microsoft.com/zh-cn/library/windows/hardware/hh439638(v=vs.85).aspx 发送到设备驱动程序的大部 ...

  5. Android EditText输入格式设置

    在开发的过程中,通常会用到EditText,如何让虚拟键盘来适应输入框中内容的类型,通常我们都会在xml文件中加入android:inputType="". android:inp ...

  6. boost timer 定时器 Operation cancel !

    前面段时间处理一个定时器时,老是提示 操作取消. 硬是没搞明白为什么! 其实我遇到的这个情况很简单就是(boost::asio::deadline_timer timer)这个变量的生命同期结束了,对 ...

  7. delphi 文件删除，复制

    这是个相对简单的方法,不知道能不能帮到你删除:procedure TForm1.Button1Click(Sender: TObject);begin deletefile('c:\123.txt') ...

  8. Lucene学习之一：使用lucene为数据库表创建索引，并按关键字查询

    最近项目中要用到模糊查询,开始研究lucene,期间走了好多弯路,总算实现了一个简单的demo. 使用的lucene jar包是3.6版本. 一:建立数据库表,并加上测试数据.数据库表:UserInf ...

  9. R&S学习笔记（二）

    1.OSPF:路由条目1万多条.收敛时间1s:ISIS:路由条目可以达2万多条,收敛时间50ms().ISIS在链路层上面,不依赖IP这层,这样给了它很多可能.比如IPv4, IPv6路由的混合承载, ...

  10. Erlang初学

    这篇文章主要介绍了Erlang初学:Erlang的一些特点和个人理解总结,本文总结了函数式编程.一切都是常量.轻量进程.进程端口映射及典型缺点等内容,需要的朋友可以参考下 我对 Erlang 编程理念 ...