require.js基本使用

153 阅读2分钟

1.require会定义三个变量:

define,require,requirejs,其中require === requirejs, 一般使用require更简短

  • define 从名字就可以看出这个api是用来定义一个模块
  • require 加载依赖模块,并执行加载完后的回调函数

2.方法定义规范:

var _number_moreChar = function(){ //号码特征展开按钮
        $("#moreCha").click(function(){
        if ($(".ulClass1").is(":hidden")){
            $(".ulClass1").show();
            $("#openNow1")[0].innerHTML = "收起";
            $("#numbChPic")[0].attributes[2].nodeValue = "./images/close.png";
            } else if (!($("#ulClass1").is(":hidden"))){
            $("#openNow1")[0].innerHTML = "展开";
            $("#numbChPic")[0].attributes[2].nodeValue = "./images/open.png";
            $(".ulClass1").hide();
        }
    });
};

3.加载配置文件

现在我们知道require的配置有两种加载方式,一种是放入到script标签嵌入到html文件中,使用 require 提供的 data-main 属性,该属性是直接写在引入require.js的script标签上,在require.js 加载完毕时,会自动去加载配置文件 app.js。

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

通过 data-main 去加载入口文件,便会使配置对象中的 baseUrl 属性默认指向地址改为 app.js 所在的位置。

4.非依赖的函数式定义

如果一个模块没有任何的依赖,只是单纯的执行一些操作,那么便可以直接将函数写在 define方法中:

define(function(require,exports,modules){ 
    // do something 
    return { 'color':'red', 'size':'13px' } 
});

5. require.config() 配置

通过这个函数可以对requirejs进行灵活的配置,其参数为一个配置对象,配置项及含义如下:

baseUrl——用于加载模块的根路径。

paths——用于映射不存在根路径下面的模块路径。

shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义,但是你还是想通过RequireJS来使用它,那么你就需要在配置中把它定义为一个shim。

ps

  • 刚毕业时学前端的笔记,今天是偶然看到,竟全然没印象。
  • 留个念想,记录自己曾经也是个前端切图仔.