javascript - require.js的一点疑问-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - require.js的一点疑问

迷茫 2017-04-11 12:25:16

[JavaScript讨论组]

390

我看官网的例子中，都是将代码写在data-main对应的js中的。

我不明白，难道每个js中都需要写上requirejs.config才行吗，能不能办到只写一次然后多次使用呢。

或者说，我写了一堆自定义模块，应该在项目中怎么调用比较好呢。

我能想到的一个方法是官网上提到的一处：

就是用另一个js中来放require，可是官网也说了，这种方法不行，因为这个js运行的时候require还没加载完。但是我想，是不是只要将require(['foo'])中的foo替换为相对于此html的相对路径，而不依赖与requirejs的路径配置，是否就解决了这个问题呢。我不知道这种做法是否合适。

求大神指点两句啊。

迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回复(2)

黄舟2017-04-11 12:27:16 2楼

想复杂了。 requirejs config只需要写一次，共用的。每个页面 data-main引用自己的requires 代码和共用的config就可以了

赞 +0

添加回复

伊谢尔伦2017-04-11 12:27:16 1楼

有两种方法，其实本质上还是一种，先看目录：

第一种方法：
直接在页面中调用自定义模块
main.js

requirejs.config({
    baseUrl:"../js",
    paths : {
        "jquery" : "library/jquery-3.1.1.min"
    }
});

index1.js

define(function(require) {
    var $ = require("jquery");
    return {
        init: function() {
            $("button").click(function() {
                alert(233);
            });
        }
    }
});

index1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script data-main="../js/main" src="../js/require.js"></script>
    <script>
        require(["common/index1"],function (page) {
            page.init();
        });
    </script>
</head>
<body>
    <button>按钮</button>
</body>
</html>

主要是通过html页面中的第二个script标签来执行了只定义模块。需要注意的是，此处require([])的出发点是require.js所在的目录，在这个例子中就是js目录，所以common/index1相当于js/common/index1。

第二种方法：
在html中写js总感觉不太好，所以找了一种新方式来替代。
原理也简单，就是在html写一个自定义标签，用来告知此页面需要执行的js模块。
main.js

requirejs.config({
    baseUrl:"../js",
    paths : {
        "jquery" : "library/jquery-3.1.1.min"
    }
});
require(["jquery"],function ($) {
    $("exportjs").each(function () {
        require(["common/"+$(this).attr("jsfile")],function (page) {
            page.init();
        });
    });
});

index1.js代码不变。

index1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script data-main="../js/main" src="../js/require.js"></script>
    <exportjs jsfile="index1"></exportjs>
</head>
<body>
    <button>按钮</button>
</body>
</html>

这种方法的好处是只需要在页面中用exportjs标签告知要执行的js就行，不需要在html中写其它代码。

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>