require js（一）简单使用

最新推荐文章于 2024-08-04 03:29:52 发布

天空影

最新推荐文章于 2024-08-04 03:29:52 发布

阅读量697

点赞数

分类专栏：大前端-插件API 文章标签： require amd module define

本文链接：https://blog.csdn.net/jx950915/article/details/84334903

版权

大前端-插件API 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

起始

其实这个算是很老套的东西了，只不过我一直没用过，然后因为项目也没条件去用vue等一些框架，然后因为一个以前的项目有可能需要重构（easyui写的），然后想着自己上一个项目完全就是堆起来的，所以就把以前的老东西捡起来看了看能不能对目前的项目进行一些优化。

API文档：RequireJS中文网

学习

因为以前也用过vue，所以对ES6的module有一些了解，然后在网上看了一些require js的介绍和教程。所以这一篇就是简单的使用和介绍。

代码

index.html

<body>
    <script data-main='js/main' src="./js/require.min.js"></script>
</body>

data-main:require.js 在加载的时候会检察data-main 属性。
注意：你在main.js中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。
建议：一个页面的代码都写到这个main.js中，有多个页面可以不同命名。

module.js

define(function () {
    var add = function (x, y) {
        return x + y;
    };
    var add2 = function (x, y) {
        return x - y;
    }
    return {
        add: add,
        add2: add2
    }
}

define(function () {
    return {
        add: function (x, y) {
            return x + y;
        },
        add2: function (x, y) {
            return x - y;
        }
    }
}

define:定义模块，如果一个模块没有任何依赖，但需要一个做setup工作的函数，则在define()中定义该函数，并将其传给define()。如果模块存在依赖：则第一个参数是依赖的名称数组；第二个参数是函数，在模块的所有依赖加载完毕后，该函数会被调用来定义该模块，因此该模块应该返回一个定义了本模块的object。具体可参考main.js，只不过需要把require改为define即可

main.js

require([
    'moduleA',
], function (mb) {
    'use strict';
    console.log(mb.add(1, 2))
});

执行结果：3

天空影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录