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>

这样才合理！