上一篇是把整个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. 转 listener.log文件过大导致oracle数据库连接非常慢

    数据库(31)  最近发现oracle数据库连接非常慢,sqlplus很快,用客户端就很慢,甚至会无响应. 然后服务器内存一下就飙升到了90%,不是表空间占满了,也不是数据库连接数占满了.重启还是一样 ...

  2. Oracle补习班第九天

    Better to light one candle than to curse the darkness. 与其诅咒黑暗,不如点亮烛光! 1,用SQL备份数据库数据文件 sqlplus / as s ...

  3. CGI

    CGI的工作原理一般是这么定义的: 客户端web浏览器浏览某个主页后,利用一定的方式提交数据,并通过HTTP协议向Web服务器发出请求,服务器端的HTTP Daemon(守护进程)将描述的主页信息通过 ...

  4. TensorFlow中max pooling层各参数的意义

    官方教程中没有解释pooling层各参数的意义,找了很久终于找到,在tensorflow/python/ops/gen_nn_ops.py中有写: def _max_pool(input, ksize ...

  5. css相对定位+浮动实现元素位置互换

    1.设置元素透明度 opacity:0.5; // w3c filter:alpha(opacity=50); //IE 2 position:relative; float:left; 一起使用的效 ...

  6. Linux学习笔记之——安装虚拟机后，如何启用网卡

    版本:CentOS-6.5-i386-minimal 虚拟机:vmware 11.1.2   安装完之后是看不到网卡信息的,如下:         我们编辑网卡etho的配置信息:         将 ...

  7. java中的运算符

    1.      赋值运算符:  (=) 2.      算术运算符:  (+ ,- , * , /, %) 3.      逻辑运算符:  (&& ,||, !) 4.      关系 ...

  8. Metro Win8风格的按钮（Filp翻转）

    原地址->http://www.cnblogs.com/yk250/p/5661093.html 介绍:简约而不简单....颜色可随意调制,最好用Blend工具. 效果图如下:话说这个图会不会太 ...

  9. 《疯狂Java讲义》（一） ---- 关于学习Java的反思

    "听到Spring很火,就立马买来一本Spring的书来读,最后结果往往是失败,因为这种学习没有积累,没有根基,学习过程中困难重重,每天都被一些相同.类似的问题所困扰,起初热情十足,经常上论 ...

  10. docker理念:不可变基础设施

    不可变基础设施 1.什么是Immutable Infrastructure Immutable Infrastructure,直译过来就是不可变基础设施. 它是由Chad Fowler于2013年提出 ...