第一节遗留的问题:

  中文乱码:  修改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入门之二——第二例(写自己的模块)的更多相关文章

  1. RequireJS入门(二) 转

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

  2. RequireJS入门(二)

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

  3. RequireJS 入门(二)

    简介 如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS.在这篇文章中,我将描述RequireJS ...

  4. RequireJS入门与进阶

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

  5. CMake入门(二)

    CMake入门(二) 最后更新日期:2014-04-25 by kagula 阅读前提:<CMake入门(一)>.Linux的基本操作 环境: Windows 8.1 64bit英文版.V ...

  6. Go 语言入门(二)方法和接口

    写在前面 在学习 Go 语言之前,我自己是有一定的 Java 和 C++ 基础的,这篇文章主要是基于A tour of Go编写的,主要是希望记录一下自己的学习历程,加深自己的理解 Go 语言入门(二 ...

  7. 无废话ExtJs 入门教程二十[数据交互:AJAX]

    无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  8. requirejs的用法(二)

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...

  9. Java NIO入门(二):缓冲区内部细节

    Java NIO 入门(二)缓冲区内部细节 概述 本文将介绍 NIO 中两个重要的缓冲区组件:状态变量和访问方法 (accessor). 状态变量是前一文中提到的"内部统计机制"的 ...

随机推荐

  1. 获取进程CPU占用率

    获取进程CPU占用率 // 时间转换 static __int64 file_time_2_utc(const FILETIME* ftime) { LARGE_INTEGER li; li.LowP ...

  2. iOS----自定义UIView,绘制一个UIView

    绘制一个UIVIew最灵活的方式就是由它自己完成绘制.实际上你不是绘制一个UIView,你只是子类化了UIView并赋予子类绘制自己的能力.当一个UIVIew需要执行绘图操作的时,drawRect:方 ...

  3. Cookie与Session

    再说Cookie与Session之前,先要了解一下http协议. 何为http协议: http协议即超文本传输协议,一种基于浏览器请求与服务器响应的协议,该协议主要的特点就是它是一种无状态的协议(只针 ...

  4. HTML5_03之Canvas绘图

    1.Canvas绘图--JS绘图: <canvas id='c1' width='' height=''></canvas> * Canvas尺寸不能用CSS设置: c1.he ...

  5. JSON-fastjson

    fastjson 是alibaba的一个Json处理工具包. 1.使用  JSON.toJSONString   和  JSON.parseObject fastjson只需要掌握两个静态方法:JSO ...

  6. WPF DataGrid分页功能实现代码 修改原作者不能实现的部分

    这两天需要给Datagrid加个分页,查找了一些相关的文章,发现有一个写了一个控件比较好,地址是 http://blog.csdn.net/zdw_wym/article/details/822189 ...

  7. 深入学习jQuery元素尺寸和位置操作

    × 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...

  8. 关于javascript中限定时间内防止按钮重复点击的思路

    前面的话 有一天心血来潮,1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮.果不其然,ip当时就被禁用了.后来,重启自己的路由器,重新获取ip才可以访问博客园主页.那么,设置一个限定时间内(比 ...

  9. Cinder 组件详解 - 每天5分钟玩转 OpenStack(47)

    本节我们将详细讲解 Cinder 的各个子服务. cinder-api cinder-api 是整个 Cinder 组件的门户,所有 cinder 的请求都首先由 nova-api 处理.cinder ...

  10. 小菜学习Winform(一)贪吃蛇2

    前言 上一篇<小菜学习Winform(一)贪吃蛇>中实现了简单版的贪吃蛇,在文章末也提到需要优化的地方,比如使用oo.得分模式.速度加快模式和减少界面重绘.因为是优化篇,实现方式上一篇有, ...