• requirejs学习 关于requirejs的一些参数问题


    参数配置

    requireJS 常用的方法与命令也就两个,因此requireJS使用起来非常简单。

    • require
    • define

    其中define是用于定义模块,而require是用于载入模块以及载入配置文件

    在requireJS中一个文件就是一个模块,并且文件名就是该模块的ID,其表现则是以key/value的键值对格式,key即模块的名称(模块ID),而value则是文件(模块)的地址,因此多个模块便有多个键值对值,这些键值对再加上一些常用的参数,便是require的配置参数,这些配置参数我们通常会单独保存在一个JS文件中,方便以后修改、调用,所以这个文件我们也称之为“配置文件”。

    下面是requireJS的基本参数配置:

    //index.html
    <script>
    require.config({
        baseUrl:'js/',
        paths:{
            'jquery':'http://xxxx.xxx.com/js/jquery.min',
            'index':'index'
        }
    });
    
    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的设定。

    加载配置文件

    现在我们知道require的配置有两种加载方式,一种是放入到script标签嵌入到html文件中,另一种则是作为配置文件 app.js 来独立的引入。
    独立的引入配置文件也有两种方式,一种是通过script标签加载外部JS文件形式:

    <script src="js/require.js"></script>
    <script src="js/app.js"></script>

    另一种方式则是使用 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 所在的位置,相比之下我更加推荐这种方式,因为它更可能的方便快捷。

    定义模块

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

    define([id,deps,] callback);

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

    载入模块

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

    require(deps[,callback]);

    deps:所要载入的模块数组。
    callback:模块载入后执行的回调方法。

    这里就让我们依然使用上述的 index 模块为例来说明
    示例:

        require.config({
            paths:{
                'index':'index'
            }
        });
        
        require(['index']);

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

    常用参数

    deps

    用于声明require.js在加载完成时便会自动加载的模块,值是一个数组,数组元素便是模块名。

    callback

    当deps中的自动加载模块加载完毕时,触发的回调函数。

    config

    config属性可以为模块配置额外的参数设定,其使用格式就是以模块名或者模块ID为key,然后具体的参数为value。

    【关于requirejs更详细概述】

  • 相关阅读:
    计算机网络
    JAVA基础--面试用
    springboot-高级(一)
    SQL语句(一)
    spring cloud
    ruoyi后台管理系统分析(六)----system包
    ruoyi后台管理系统分析(五)---quartz包
    Java基于opencv实现图像数字识别(一)
    Leetcode : eImplement strStr
    二叉树的前序、中序、后序遍历迭代实现
  • 原文地址:https://www.cnblogs.com/miny-simp/p/8477334.html
Copyright © 2020-2023  润新知