10

我在标签之间的 html 文件中编写了一堆 javascript 函数，但现在我希望我的所有函数都在一个单独的 JS 文件中，这样我就可以将 JS 文件重新用于其他 html 页面，这样我只需要包含 JS文件。

这就是我的函数的样子：

function makeStartRefresher(refresh, refreshTime) {
//function code
}
function readData(address){
//function code
}
function writeData(address, value, refreshCallback){....
........
........
........

这些写在我的 document.ready 函数上方，我从那里调用和使用这些函数。

如果我只是将这些函数复制到一个 JS 文件并将 JS 文件包含在我的 html 文档中，它会起作用吗，我可以像平常一样调用这些函数吗？

格茨

4

2 回答 2

33

只需将您的 JS 函数复制到 .js 文件中，并将其包含在<head>HTML 文档的部分中：

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

在以这种方式链接的所有脚本都加载并执行之前不会触发 document.ready 事件，因此其中定义的所有函数在发生时都将可用。

为避免与其他库发生名称冲突，您可以选择将所有函数放入一个用作命名空间的全局对象中。

// mylibrary.js
var myLibrary = {

    makeStartRefresher: function(refresh, refreshTime) {
    //function code
    },
    readData: function(address){
    //function code
    }
    ...
}

然后当您使用库中的函数时，请像这样引用它们：

myLibrary.makeStartRefresher(refresher, 1000);
于 2013-04-29T13:22:47.237 回答
23

普通我使用这样的东西来定义单独的模块。

LibName= window.LibName || {};

LibName = function () {

  var yourVar1;
  var yourVar2;


  publicFunc1 = function() {

  };

  privateFunc2 = function() {

  };


  return {
    "publicFuncName" :  publicFunc1
  }

}();

在 HTML 中，它可以被称为LibName.publicFuncName()

另外，在这里查看模块模式 - http://addyosmani.com/resources/essentialjsdesignpatterns/book/

升级版：

现在 ES6 已经为生产做好了准备，应该更新答案：

class MyLib {
  constructor() {
    this.foo = 1;
    this.bar = 2;
  }

  myPublicMethod1() {
    return this.foo;
  }

  myPublicMethod2(foo) {
    return foo + this.bar;
  }
}

const instance = new MyLib();
export { instance as MyLib };

当你需要它时：

import { MyLib } from './MyLib';
于 2013-04-29T13:16:36.783 回答