Question

假设我有2个JavaScript文件，分别是f1.js和f2.js，还有一个名为index.html的HTML页面。

我使用script标签在index.html中使用f1.js中的代码。但是，我希望f1.js使用f2.js中的一些代码。所以，层次结构是这样的 - index.html＆lt; --- f1.js＆lt; --- f2.js。

即。 f2.js是一个伪随机生成器，它有一个创建随机种子的函数，我想在我的代码中使用它来获取f1.js.

代码示例：

index.html - 我如何在html页面中调用f1.js（我的代码）

<script type="text/javascript" src="f1.js">
</script>

f1.js - 我的代码

function hello() {
    Math.seedrandom("1"); // this is the method I want to reuse from f2.js
    alert("hello: " + Math.random());
}

f2.js - 我想使用的代码（通过以下链接）

Math.seedrandom();

我该怎么做？

编辑：我想要重用的文件可以找到她 - http://davidbau.com/encode/seedrandom.js

它是一个自定义随机种子生成器工具，它具有我想要使用的函数Math.seedrandom（＆＃34;＆＃34;）。

Answer 1

如果要使用全局模块模式：

<强>的index.html

<head>
    <script src="f1.js"></script>
    <script src="f2.js"></script>
</head>

<强> f1.js

function hello() {
    //some stuff
}

<强> f2.js

(function(privateHello) {//now it's private

    privateHello(); //invoke private instance

})(hello); //inject global variable

如果你不喜欢这种模式，请查看require.js，或者像browserify或webpack这样的后端捆绑包。

然而，全局模块模式可能会更像这样使用。

<强> f1.js

var _functions = (function() {
    return {
        fn_a: function() { /* do something */ },
        fn_b: function() { /* do something else */ }
    };
})();

<强> fs2.js

(function(methods) {
    methods.fn_a(); //do something
    methods.fn_b(); //do something else
})(_functions);

Answer 2

也许这就是你想要的：

＆＃13;

<!DOCTYPE html>
<script src=//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.3.10/seedrandom.min.js>
</script>
<script>
  function hello(){
    Math.seedrandom("1");
    alert("hello: " + Math.random());
  }
</script>
<button onclick="hello()">Run seedrandom</button>

＆＃13;

Answer 3

您需要做的是，首先将html链接到f1.js文件，然后将其链接到f2.js文件。这将允许您从f1.js文件中调用该函数。但请确保首先实现f2.js.

如何重用另一个JavaScript文件中的代码？

3 个答案: