上一篇是把整个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. RequireJS入门(二) 转

    上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模 ...

  2. RequireJS入门与进阶

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...

  3. 【原创】NIO框架入门(二):服务端基于MINA2的UDP双向通信Demo演示

    前言 NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能.这其中最流行的无非就是MINA和Netty了,MINA目前的主要版本是MINA2.而Netty的主要版本是Netty3和Netty ...

  4. RequireJS入门(三)转

    这篇来写一个具有依赖的事件模块event.event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.da ...

  5. RequireJS入门(一) 转

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...

  6. RequireJS入门(三)

    这篇来写一个具有依赖的事件模块event.event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.da ...

  7. RequireJS入门(一)

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...

  8. Swift语法基础入门二(数组, 字典, 字符串)

    Swift语法基础入门二(数组, 字典, 字符串) 数组(有序数据的集) *格式 : [] / Int / Array() let 不可变数组 var 可变数组 注意: 不需要改变集合的时候创建不可变 ...

  9. Thinkphp入门 二 —空操作、空模块、模块分组、前置操作、后置操作、跨模块调用(46)

    原文:Thinkphp入门 二 -空操作.空模块.模块分组.前置操作.后置操作.跨模块调用(46) [空操作处理] 看下列图: 实际情况:我们的User控制器没有hello()这个方法 一个对象去访问 ...

随机推荐

  1. iTunes备份文件路径

    Windows 7 电脑:C:\Users\使用者名称\AppData\Roaming\Apple Computer\MobileSync\Backup XP 电脑:C:\Documents and ...

  2. script标签的位置

    1.在我们编写代码的时候,会在页面内使用<script>标签来写JS,虽然理论上script标签的位置放在哪里可以,但是还是有一点区别的. 2.为什么很多人把script标签放在底部: 初 ...

  3. FilterDispatcher 的作用(struts2.1.3以前,新版本改了)

    org.apache.struts2.dispatcher.FilterDispatcher是Struts2的主要的Filter,负责四个方面的功能: (1)执行Actions (2)清除Action ...

  4. 谈谈Ext JS的组件——布局的用法

    概述 在Ext JS中.包括两类布局:组件类布局和容器类布局.由于有些组件是有不同的组件组合而成的,如字段就由标题和输入框构成,他们之间也是存在布局关系的,而这就须要组件类布局来处理组件内自己特有的布 ...

  5. Intel 被 ARM 逼急了

    英特尔最近推出基于Silvermont架构Bay Trail系列处理器,相对前一代Bonnell架构的最突出的改进就是支持乱序执行 silvermon架构的处理器将出现在pc,平板等: List of ...

  6. HBase学习(十四)LINUX下用Eclipse构建HBase开发环境

    Eclipse,HBase版本号眼下没有发现须要特别指定 1:从HBase集群中复制一份Hbase部署文件,放置在开发端某一文件夹下(如在/app/hadoop/hbase096文件夹下). 2:在e ...

  7. opencv和javacv版本不一致

    Exception in thread "main" java.lang.UnsatisfiedLinkError: no jniopencv_highgui in java.li ...

  8. 在Linux系统中如何把文件拷贝到U盘

    Linux下把所有的都当成文件处理,如果在linux系统下需要拷贝文件,哪么你需要先把U盘挂载到系统中的某一个位置,然后再使用cp命令完成拷贝.   工具/原料 Linux操作系统一台 U盘一枚 方法 ...

  9. Intent 数据传递 总结

    系统API 可以传递的数据类型 1.传递8大基本类型+String+CharSequence及其数组类型 2.传递ArrayList集合     public Intent putIntegerArr ...

  10. 前端笔试题目总结——应用JavaScript函数递归打印数组到HTML页面上

    数组如下: var item=[{ name:'Tom', age:70, child:[{ name:'Jerry', age:50, child:[{ name:'William', age:20 ...