[前端]requireJS的知识分享

最新推荐文章于 2022-02-22 19:04:36 发布

小桃酥

最新推荐文章于 2022-02-22 19:04:36 发布

阅读量386

点赞数

分类专栏：框架文章标签： requires

本文链接：https://blog.youkuaiyun.com/smaller_coder/article/details/70799643

版权

框架专栏收录该内容

6 篇文章

订阅专栏

本文介绍了RequireJS在JavaScript模块化编程中的应用，包括其基本原理、配置方法及如何使用require和define函数。通过实例展示了模块ID的概念及其配置方式，帮助读者更好地理解和运用RequireJS。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天和大家一起聊聊requireJS, requires主要是为了实现js代码的模块化，避免命名冲突，加快js代码的加载速度，为了更好的理解requirejs，进行如下总结：

RequireJS采用不同的方法来加载脚本，他鼓励模块化编程，使用RequireJS编程不但可以模块化编程而且他依旧可以运行的很快。

注：所谓的模块化编程，就是将不同功能的代码进行分文件管理，将具有相关功能的函数封装到一个文件中，用的时候只需要导入该文件即可

RequireJS鼓励使用模块ID，而不是像原来那样使用script标签使用url引入。

注：首先我们先搞清楚几个概念，模块ID：就是文件的代替者，指的是在main.js文件中，我们可以在require.config函数中，对不同的模块文件进行配置，具体如下图所示，而下图的jquery就是针对于'jquery-3.2.0'的模块id，这里可以去掉后缀js，因为requirejs默认都是js文件

require.config({

        	paths:{
            		jquery:'jquery-3.2.0'
        	}
	})

RequireJS加载代码时候，其相对路径为baseUrl，baseUrl通常被设置为data-main指定文件的目录：

注：BaseUrl也可以通过设置进行手动配置（通过RequireJS 的 config进行配置），若是没在config中进行配置，并且script标签没有指定data-main的话，那么默认目录为引入requireJS的HTML页面目录。

requirejs.config({
    //默认情况下模块所在目录为js/lib
    baseUrl: 'js/lib',
    //当模块id前缀为app时，他便由js/app加载模块文件
    //这里设置的路径是相对与baseUrl的，不要包含.js
    paths: {
        app: '../app'
    }
});

具体步骤如下：

1. 导入requirejs包，设置data－main，data－main是requires的初始化执行文件，需要注意一点，data-main是异步加载的，如果加载了其他的js包，可能会出现加载的先后顺序问题

<script data-main="js/main.js" src="js/require.js" type="text/javascript"></script>

2. 主要函数：

requirejs.config 已经介绍过，不做过多解释

requires：

// 开始逻辑.
requirejs(['jquery', 'canvas', 'app/sub'],
function   ($, canvas, sub) {
    //jQuery, canvas and the app/sub module are all
    //loaded and can be used here now.
});

define：

define(['jquery'],function ($) {


    return {
        displayWidth:function (a) {
            console.log(a.offsetHeight)
        },
        displayChild:function (o) {
            console.log(o.childNodes)
        }
    }
})

若是模块具有依赖关系，第一个参数应该是一个数组，其项目为依赖名字，第二个参数是匿名函数，匿名函数在依赖项加载结束后会立即加载，函数会返回一个对象用以定义这个模块。

define(function () {
    //Do setup work here

    return {
        color: "black",
        size: "unisize"
    }
});