Question

我正在学习RequireJS，在这个过程中我遇到了以下问题：

我正在尝试实现单页面应用程序。下面考虑的场景与实际问题类似。

的index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="require.js" data-main="main.js"></script>
</head>
<body>
    <button id="start">Start</button>
    <div id="buttonContainer"></div>
</body>
</html>

main.js

require([  'jquery' ], function( $) {
    $(function() {
        $("#start").click(function() {
            $("#buttonContainer").load("page1.html");
            require(['module1'],function(){});
        }); 
    });
});

page1.html

<div>
    <button id="button_1">Click Me!!</button>
</div>

module1.js

define(['jquery'],function($){
    $(function(){
        $("#button_1").click(function(){
            $("#buttonContainer").load("page2.html");
        require(['module2'],function(){});
        });
    });
});

page2.html

<div>
    <button id="button_2">Back</button>
</div>

module2.js

define(['jquery'],function($){
    $(function(){
        $("#button_2").click(function(){
            $("#buttonContainer").load("page1.html");
        require(['module1'],function(){});
        });
    });
});

点击 index.html 中的开始后，点击点击我，点击点击我!! div上填充了后退按钮，再次点击后退按钮点击我!! 就会填充，反之亦然。

在jquery加载html时，我调用require（）..为html调用各自的js函数。我的方法是否正确？

Answer 1

你的做法是错误的。如果需要module1并且module2将在代码需要模块的每个时间执行模块的工厂，那么您的代码将起作用。但是，RequireJS的工作方式是，模块的工厂仅执行第一次时间模块。（“工厂”是您在定义模块时传递给define的回调。）

我不清楚是什么保证将代码按照问题的方式划分为模块。这似乎没必要。

如果有理由按照问题的方式划分模块，那么当调用函数时，我会使模块仅在页面上。然后module1.js可能是这样的：

define(['jquery', 'module2'], function ($, module2) { return function () { // Whatever actions I want... }; });

module2的结构类似于module1。 main.js类似于：

require(['jquery', 'module1'], function ($, module1) { $(function () { [...] // This calls the function you returned when defining module 1. module1(); [...] }); });

在单页面应用程序中需要jquery

1 个答案: