Question

我正在尝试使用 Require.js 制作单页面应用程序（SPA），但我遇到了问题，这不是如何进行调用< strong> file.html 及其各自的 js 。示例如下

HTML

page1.html
page2.html
page3.html

的js

events1.js
events2.js
events3.js

我想知道如何在各自的html中调用每个js，事先，也就是说这些调用的js文件是否被执行

Answer 1

这是require.js文件的基本结构：

`person.js`
define(function() { // <==== don't need require, not importing any module(s)

    // put whatever code you want here
    var obj = {
        name : 'John',
        sayHello: function(){
            console.log('hello ' + this.name);
        }
    };

    // tell the module to return obj, or any other function/object you declared
    return obj;
});

然后你可以在任何你想要的地方使用它，所以如果你的events2.js想打招呼，你会这样写：

`events2.js`
define(function(require) { // <==== NEED require, importing a module

    // notice, there's no .js at the end
    // you can also use ../ for example to get parent directory
    var person = require('./[pathToFile]/person'); 

    person.sayHello(); // hello John
});

Require.js有一个陡峭的学习曲线，因为你需要设置配置，这是不容易的，特别是如果你正在缩小等。

编辑：

从html中的链接开始到main.js文件

<强>的index.html

<script src="libs/require.js" data-main="main"></script>

您可以将配置放在主文件中以设置快捷方式和其他内容

<强> main.js

require.config({
    paths : { 
    jquery : 'libs/jquery',
    jqueryUI : 'libs/jquery-ui',
    etc...
  }
});

require(function() {  
    require(['app'], function(app) { 
    app.init(); // <==== this starts your website build
  });
});

这是您构建网站的地方

<强> app.js

define(function(require) {
return {
    init : function() {         
      require('dev/menu').init();
      require('dev/content').init();
      require('dev/otherstuff').init();
    }   
  };
});

如何使用javascript，jquery和require，js制作spa

1 个答案: