温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

requireJS学习笔记

发布时间:2020-06-22 16:42:19 来源:网络 阅读:542 作者:xxxpjgl 栏目:web开发

一、常用的方法与命令

  • require
  • define
    其中define是用于定义模块,而require是用于载入模块以及载入配置文件
    通过 <script> 标签,将require.js 文件引入到当前的 HTML 页面中
    <script src="js/require.js"></script>

二、参数配置
在requireJS中一个文件就是一个模块,其表现则是以key/value的键值对格式,key即模块的名称(模块ID),而value则是文件(模块)的地址

基本参数配置:

//index.html
<script>
require.config({
    baseUrl:'js/',
    paths:{
        'jquery':'http://xxxx.xxx.com/js/jquery.min',
        'index':'index'
    },
        shim:{

        }
});

require(['index']);
</script>

require.config() 是用于配置参数的核心方法,它接收一个有固定格式与属性的对象作为参数,这个对象便是我们的配置对象。

在配置对象中 baseUrl 定义了基准目录,它会与 paths中模块的地址自动进行拼接,构成该模块的实际地址,并且当配置参数是通过script标签嵌入到html文件中时,baseUrl默认的指向路径就是该html文件所处的地址。

paths 属性的值也是一个对象,该对象保存的就是模块key/value值。其中key便是模块的名称与ID,一般使用文件名来命名,而value则是模块的地址,在requireJS中,当模块是一个JS文件时,是可以省略 .js 的扩展名,比如 “index.js” 就可以直接写成 “index” 。而当定义的模块不需要与 baseUrl 的值进行拼接时,可以通过 "/" 与 http:// 以及 .js 的形式来绕过 baseUrl的设定。

shim 属性
它的值是一个对象,可以用于声明非标准模块的依赖和返回值。
所谓的 “非标准模块” 指的是那些不符合AMD规范的JS插件。

require.config({
    baseUrl:'js/',
    paths:{
        'jquery':'http://xxx.xxxx.com/js/jquery.min',
        'index':'index',
        'say':'say',
        'bar':'bar',
        'tools':'tools'
    },
    shim:{
        'tools':{
            deps:['bar'],
            exports:'tool'
        },
        'say':{
            deps:['./a','./b'],
            init:function(){
                return {
                    'sayBye':sayBye,
                    'sayHellow':sayHellow
                }
            }
        }
    }
});

require(['index']);

这里需要注意的是如果所加载的模块文件是符合AMD规范,比如通过 define 进行定义的,那么require默认的优先级将是标准的,只有在不符合标准的情况下才会采用shim中定义的参数。

在 index 模块执行时:

define(['jquery','tool','say'],function($,tool,say){
    tool.drag();
    say.sayHellow();
    say.sayBye();
})

上面的示例中,关于 shim 中有三个重要的属性,它们分别是:

  • deps: 用于声明当前非标准模块所依赖的其它模块,值是一个数组,数组元素是模块的名称或者是ID。
  • exports:用于定义非标准模块的全局变量或者方法。值一般是一个字符串。
  • init:用于初始,处理,非标准模块的全局变量或者是方法,常用于当非标准模块存在多个全局变量以及方法,值是一个函数。
//示例:
require.config({
    baseUrl:'js/',
    paths:{
        'jquery':'http://xxx.xxxx.com/js/jquery.min',
        'index':'index'
    }
});
require(['index']);

三、加载配置文件

&lt;script src="js/require.js"&gt;&lt;/script&gt;

四、定义模块
在我们选择requireJS来模块化开发我们的项目或者页面时,就要明确的知道我们以后所编写的代码或者是某段功能,都是要放在一个个定义好的模块中。
下面是requireJS定义模块的方法格式:

define([id,deps,] callback);

  • ID:模块的ID,默认的便是文件名,一般无需使用者自己手动指定。
  • deps:当前模块所以依赖的模块数组,数组的每个数组元素便是模块名或者叫模块ID。
  • callback:模块的回调方法,用于保存模块具体的功能与代码,而这个回调函数又接收一个或者多个参数,这些参数会与模块数组的每个数组元素一一对应,即每个参数保存的是对应模块返回值。
//示例
//index.js
define(['jquery','./utils'], function($) {
    $(function() {
        alert($);
    });
});

从上面的示例中我们可以看出 index 模块中,依赖了 'jquery' 模块,并且在模块的回调函数中,通过 $ 形参来接收 jquery模块返回的值,除了 jquery 模块,index模块还依赖了 utils 模块,因为该模块没有在配置文件中定义,所以这里以附加路径的形式单独引入进来的。

五、载入模块
在说载入模块之前,我们先聊聊“模块依赖”。模块与模块之间存在着相互依赖的关系,因此就决定了不同的加载顺序,比如模块A中使用到的一个函数是定义在模块B中的,我们就可以说模块A依赖模块B,同时也说明了在载入模块时,其顺序也是先模块A,再模块B。
在require中,我们可以通过 require() 方法去载入模块。其使用格式如下:

require(deps[,callback]);

  • deps:所要载入的模块数组。
  • callback:模块载入后执行的回调方法。
require.config({
        paths:{
                'index':'index'
        }
});
require(['index']);

requireJS 通过 require([]) 方法去载入模块,并执行模块中的回调函数,其值是一个数组,数组中的元素便是要载入的模块名称也就是模块ID,这里我们通过 require(['index']) 方法载入了 index 这个模块,又因为该模块依赖了 jquery 模块,所以接着便会继续载入jquery模块,当jquery模块加载完成后,便会将自身的方法传递给形参 $ 最后执行模块的回调方法,alert出$参数具体内容

六、模块的返回值
require中定义的模块不仅可以返回一个对象作为结果,还可以返回一个函数作为结果。

// utils.js
define(function(require,exports,modules){
    function sayHellow(params){
        alert(params);
    }

    return sayHellow
});

// index.js
define(function(require,exports,modules){
    var sayHellow = require('utils');
    sayHellow('hellow World');
})

如果通过return 返回多种结果的情况下:

// utils.js
define(function(require,exports,modules){
    function sayHellow(params){
        alert(params);
    }

    function sayBye(){
        alert('bye-bye!');
    }

    return {  //return一个对象出来
        'sayHellow':sayHellow,
        'sayBye':sayBye
    }
});

// index.js
define(function(require,exports,modules){
    var utils = require('utils');
    utils.sayHellow('hellow World');
})

这里有一个注意的地方,那就是非依赖性的模块,可以直接在模块的回调函数中,加入以下三个参数:

  • require:加载模块时使用。
  • exports:导出模块的返回值。
  • modules:定义模块的相关信息以及参数。

总结:
1、在首页通过<script src="js/require.js"></script>引入require.js
2、通过define([id,deps,] callback);定义模块,

  • ID:模块的ID,默认的便是文件名,一般无需使用者自己手动指定。即ID不用管
  • deps:当前模块所以依赖的模块数组,数组的每个数组元素便是模块名或者叫模块ID。
  • callback:模块的回调方法,用于保存模块具体的功能与代码,而这个回调函数又接收一个或者多个参数,这些参数会与模块数组的每个数组元素一一对应,即每个参数保存的是对应模块返回值。
  • 模块的返回值

3、通过require.config配置模块的路径,
4、通过require(deps[,callback]);引入模块

  • deps:所要载入的模块数组。
  • callback:模块载入后执行的回调方法。
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI