RequireJS入门之二——第二例(写自己的模块)

第一节遗留的问题:

  中文乱码:  修改require.js文件,搜索charset 关键字,修改为GBK;(貌似乱不乱码和jquery版本有问题,切换GBK和utf-8!!)

  路      径:  仅介绍main.js中的路径设置;1. 可以设置baseUrl根路径;如,把jquery放在根目录下js文件夹,可以这样

RequireJS入门之二——第二例(写自己的模块)    若放在js/lib中,这样:RequireJS入门之二——第二例(写自己的模块)

./ 可以省略;

页面引入方式类似;

paths 引入的资源路径是相对路径,切记!

引入时   data-main="./js/main"  属性是由RequireJS定义的,默认省略写.js

本节需求:编写一个选择器通过根据id、class、Tag、attr查找html元素

目录结构

RequireJS入门之二——第二例(写自己的模块)

自己定义了一个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>");
});

RequireJS入门之二——第二例(写自己的模块)

值得注意的是,本例是要获取页面上的dom元素,虽然成功了,但是忽略了一个瑕疵——异步执行渲染页面的工作快于加载js速度,所以我们找到了这个div元素。

对dom操作的话,要将引入标签卸载body底部!!!

<script data-main="./js/main" src="require.js"></script>

</body>

这样才合理!

上一篇:LINQ的左连接、右连接、内连接


下一篇:!!!!!122. Best Time to Buy and Sell Stock II