上一篇是把整个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. 主工程中合并库工程的Manifest文件

    修改project属性文件中的 manifestmerger.enabled=true,就可以实现Android Manifest的合并. 主要用于lib工程和主工程之间. eg: target=an ...

  2. Java使用poi操作cexel

    Java操作excel比较简单,但是时间长了就会忘记,因此基本的简单操作做个记录. 依赖poi的jar包,pom.xml配置如下: <project xmlns="http://mav ...

  3. spring中订阅redis键值过期消息通知

    1.首先启用redis通知功能(ubuntu下操作):编辑/etc/redis/redis.conf文件,添加或启用以下内容(过期通知): notify-keyspace-events Ex 或者登陆 ...

  4. windows 下编译log4cxx(x64)

    参考链接 http://blog.csdn.net/hnu_zxc/article/details/7786060 http://blog.chinaunix.net/uid-20384806-id- ...

  5. 最小安装模式下Centos7.*网卡启动配置

    最小安装模式下的Centos7.*系统默认情况下,网卡是不启动的.为了解决联网问题,自己搜集了点资料,成功连接了网络.并梳理了下处理过程. 1.首先运行ip addr命令,查看配置文件的名称.有的文章 ...

  6. (Array)121. Best Time to Buy and Sell Stock

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...

  7. 使用智能指针来管理对象 (基于RAII)

    ////一个简单的防止内存泄露的例子//void test() { //使用RAII的特性管理资源 //当智能指针unique_ptr被销毁时,它指向的对象也将被销毁 //这里test函数返回后 p将 ...

  8. [转] 主流JS框架中DOMReady事件的实现

    在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件.DOM操作某些结点等.原来比较常用的是window的onload 事件,而该事件的实际效果是:当页面解析/DOM树建立完 ...

  9. 关于Unity游戏开发方向找工作方面的一些个人看法

     这是个老生常谈,却又是谁绕不过去的话题,而对于每个人来说,所遇到的情况又不尽相同,别人的求职方式和路线不一定适合你,即使是背景很相似的两个人,有时候机遇也很重要. 我本人的工作经验只有一年,就业方式 ...

  10. Oracle基础笔记

    =====================================第一章:oracle数据库基础============================================= Or ...