• 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>

    这样才合理!

  • 相关阅读:
    TyporaRecord
    c# 串口 应答式顺序下发命令 循环 间隔发送指令
    WPF 如何在单独的配置文件中使用Log4net
    UWP VisualStateManager
    USB通信
    UWP RelativePanel
    JSON 序列化与反序列化
    Unity 依赖注入的三种常用模板
    IOC Unity容器的基本使用
    使用EF完成基于SQLite的CodeFirst
  • 原文地址:https://www.cnblogs.com/anybus/p/4850840.html
Copyright © 2020-2023  润新知