RequireJS入门之二——第二例(写自己的模块)
第一节遗留的问题:
中文乱码: 修改require.js文件,搜索charset 关键字,修改为GBK;(貌似乱不乱码和jquery版本有问题,切换GBK和utf-8!!)
路 径: 仅介绍main.js中的路径设置;1. 可以设置baseUrl根路径;如,把jquery放在根目录下js文件夹,可以这样
若放在js/lib中,这样:
./ 可以省略;
页面引入方式类似;
paths 引入的资源路径是相对路径,切记!
引入时 data-main="./js/main" 属性是由RequireJS定义的,默认省略写.js
本节需求:编写一个选择器通过根据id、class、Tag、attr查找html元素
目录结构
自己定义了一个selector模块,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.getElementsById(s.substr(1,s.length));
}
if(regCls.test(s)){
return doc.getElementsByClassName(s.substr(1,s.length));
}
if(regTag.test(s)){
}
if(regNodeAttr.test(s)){
}
}
return query;
});
可以看出该模块返回了一个query函数、没有依赖其他模块、默认名:selector。
疑问:作为菜鸟,我认为的js都是类似jquery或者js写的一堆函数,怎么就返回了一个函数???
个人理解:匿名模块也可以按照原始的方式去写,通过shims加载就可以访问它内部的方法了;
虽然没读过jquery源码,但是大概是,我们创建的每一个模块负责某个特定的功能,即封装;
main.js中的变化:
//新增了一个selector依赖
require(['jquery','selector'], function($,query) {
alert($().jquery);
//测试jquery监听click事件是否有效
$("#login").on("click",function(){
alert("nice!");
});
//调用query模块,根据类查找标签;找到的话调jquery向它追加元素。
var els = query('.wrapper');
console.log("els="+els);
$(els).append("<p style='color:red;font-size='20'>通过query获取html对象</p>");
});
值得注意的是,本例是要获取页面上的dom元素,虽然成功了,但是忽略了一个瑕疵——异步执行渲染页面的工作快于加载js速度,所以我们找到了这个div元素。
对dom操作的话,要将引入标签卸载body底部!!!
<script data-main="./js/main" src="require.js"></script>
</body>
这样才合理!
RequireJS入门之二——第二例(写自己的模块)的更多相关文章
- RequireJS入门(二) 转
上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模 ...
- RequireJS入门(二)
上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模 ...
- RequireJS 入门(二)
简介 如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS.在这篇文章中,我将描述RequireJS ...
- RequireJS入门与进阶
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...
- CMake入门(二)
CMake入门(二) 最后更新日期:2014-04-25 by kagula 阅读前提:<CMake入门(一)>.Linux的基本操作 环境: Windows 8.1 64bit英文版.V ...
- Go 语言入门(二)方法和接口
写在前面 在学习 Go 语言之前,我自己是有一定的 Java 和 C++ 基础的,这篇文章主要是基于A tour of Go编写的,主要是希望记录一下自己的学习历程,加深自己的理解 Go 语言入门(二 ...
- 无废话ExtJs 入门教程二十[数据交互:AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- requirejs的用法(二)
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...
- Java NIO入门(二):缓冲区内部细节
Java NIO 入门(二)缓冲区内部细节 概述 本文将介绍 NIO 中两个重要的缓冲区组件:状态变量和访问方法 (accessor). 状态变量是前一文中提到的"内部统计机制"的 ...
随机推荐
- 获取进程CPU占用率
获取进程CPU占用率 // 时间转换 static __int64 file_time_2_utc(const FILETIME* ftime) { LARGE_INTEGER li; li.LowP ...
- iOS----自定义UIView,绘制一个UIView
绘制一个UIVIew最灵活的方式就是由它自己完成绘制.实际上你不是绘制一个UIView,你只是子类化了UIView并赋予子类绘制自己的能力.当一个UIVIew需要执行绘图操作的时,drawRect:方 ...
- Cookie与Session
再说Cookie与Session之前,先要了解一下http协议. 何为http协议: http协议即超文本传输协议,一种基于浏览器请求与服务器响应的协议,该协议主要的特点就是它是一种无状态的协议(只针 ...
- HTML5_03之Canvas绘图
1.Canvas绘图--JS绘图: <canvas id='c1' width='' height=''></canvas> * Canvas尺寸不能用CSS设置: c1.he ...
- JSON-fastjson
fastjson 是alibaba的一个Json处理工具包. 1.使用 JSON.toJSONString 和 JSON.parseObject fastjson只需要掌握两个静态方法:JSO ...
- WPF DataGrid分页功能实现代码 修改原作者不能实现的部分
这两天需要给Datagrid加个分页,查找了一些相关的文章,发现有一个写了一个控件比较好,地址是 http://blog.csdn.net/zdw_wym/article/details/822189 ...
- 深入学习jQuery元素尺寸和位置操作
× 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...
- 关于javascript中限定时间内防止按钮重复点击的思路
前面的话 有一天心血来潮,1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮.果不其然,ip当时就被禁用了.后来,重启自己的路由器,重新获取ip才可以访问博客园主页.那么,设置一个限定时间内(比 ...
- Cinder 组件详解 - 每天5分钟玩转 OpenStack(47)
本节我们将详细讲解 Cinder 的各个子服务. cinder-api cinder-api 是整个 Cinder 组件的门户,所有 cinder 的请求都首先由 nova-api 处理.cinder ...
- 小菜学习Winform(一)贪吃蛇2
前言 上一篇<小菜学习Winform(一)贪吃蛇>中实现了简单版的贪吃蛇,在文章末也提到需要优化的地方,比如使用oo.得分模式.速度加快模式和减少界面重绘.因为是优化篇,实现方式上一篇有, ...