Question

我在标签之间的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文档中，我是否可以正常调用函数？

Grtz

Answer 1

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

<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);

Answer 2

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

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/

UPD：

现在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';

如何创建自编函数的javascript库

2 个答案: