上一篇是把整个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. python基础知识点整理

    序列 描述 sequence(序列)是一组有顺序的元素的集合.序列可以包含一个或多个元素,也可以没有任何元素.我们之前所说的基本数据类型,都可以作为序列的元素. 序列有两种:tuple(定值表: 也有 ...

  2. user.sh

    #!/bin/bash n=1 while [ $n -le 5 ] do n=$(( $n + 1 )) user=user$n userdel -r $user echo "$user ...

  3. mysql 5.7.11 yum 安装步骤

    直接上步骤 首先你得有一台能够上外网的linux服务器 1:rpm -Uvh http://dev.mysql.com/get/mysql-community-release-el6-5.noarch ...

  4. 学习SQL的点点滴滴（五）-DELETE小计

    惨痛的教训: 某次在执行delete时,一时疏忽忘记写where条件了, 1.删除tb_mobile_cust_micromsg中的内容,前提是c_customer这个字段的值与#datamod表中c ...

  5. Spring IoC容器总结（未完）

    在面向对象系统中,对象封装了数据和对数据的处理,对象的依赖关系常常体现在对数据和方法的依赖上.这些依赖关系可以通过把对象的依赖注入交给框架或IOC容器来完成,这种从具体对象手中交出控制的做法是非常有价 ...

  6. OAF_文件系列7_实现OAF处理Excel的JXL包介绍（概念）

    20150714 Created By BaoXinjian

  7. 为什么在ucos向stm32f103移植时说os_cpu_c.c中有三个函数如OS_CPU_SysTickInit()需要注释掉

    我在看os_cpu_c.c代码时对下面这段话困惑了半天总是在百度的帮助下找到了答案 /*  申明几个函数,这里要注意最后三个函数需要注释掉,为什么呢?    OS_CPU_SysTickHandler ...

  8. LeetCode 349. Intersection of Two Arrays

    Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...

  9. 服务器未能识别 HTTP 标头 SOAPAction 的值

    SOAPAction HTTP request header被用来标识SOAP HTTP请求的目的地,其值是个URI地址.SOAP发送并不限制格式.URI特征或其必须可解析,那么在这种情况下,发送一个 ...

  10. 线程，join合并线程

    在A中,调用B.join()那么,A会“等”B先执行 public class Join01 extends Thread { @Override public void run() { int su ...