Html 如何创建自写函数的javascript库
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16279519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to create javascript library of self-written functions
提问by Stijn De Schutter
I have written a bunch of javascript functions in my html file between the tags but now I want all of my functions in a seperate JS file so I can re-use the JS file for other html pages so that I only need to include the JS file.
我在标签之间的 html 文件中编写了一堆 javascript 函数，但现在我希望我的所有函数都在一个单独的 JS 文件中，这样我就可以将 JS 文件重新用于其他 html 页面，这样我只需要包含 JS文件。
this is how my functions look like:
这是我的功能的样子：
function makeStartRefresher(refresh, refreshTime) {
//function code
}
function readData(address){
//function code
}
function writeData(address, value, refreshCallback){....
........
........
........
These are written above my document.ready function, from where I call and use these functions.
这些写在我的 document.ready 函数之上，我从这里调用和使用这些函数。
Will it work if I just copy these functions to a JS file and include the JS file in my html document, will I be able to call the functions like normal?
如果我只是将这些函数复制到一个 JS 文件并将该 JS 文件包含在我的 html 文档中，它会起作用吗，我可以像平常一样调用这些函数吗？
Grtz
格茨
回答by Philipp
Just copy your JS functions into a .js file and include it like this in the <head>section of your HTML documents:
只需将您的 JS 函数复制到 .js 文件中，并将其包含在<head>您的 HTML 文档部分中：
<script type="text/javascript" src="mylibrary.js"></script>
<script type="text/javascript" src="mylibrary.js"></script>
The document.ready event won't be fired before all scripts linked that way are loaded and executed, so all functions defined in it will be available when it happens.
在加载和执行所有以这种方式链接的脚本之前，不会触发 document.ready 事件，因此在它发生时，其中定义的所有函数都将可用。
To avoid nameclashes with other libraries, you can optionally put all your functions into a global object which serves as a namespace.
为避免与其他库发生名称冲突，您可以选择将所有函数放入作为命名空间的全局对象中。
// mylibrary.js
var myLibrary = {
makeStartRefresher: function(refresh, refreshTime) {
//function code
},
readData: function(address){
//function code
}
...
}
and then when you use functions from your library, refer to them like this:
然后当您使用库中的函数时，请像这样引用它们：
myLibrary.makeStartRefresher(refresher, 1000);
回答by Dmitry Volokh
Ordinary I use something like this to define separate module.
通常我使用这样的东西来定义单独的模块。
LibName= window.LibName || {};
LibName = function () {
var yourVar1;
var yourVar2;
publicFunc1 = function() {
};
privateFunc2 = function() {
};
return {
"publicFuncName" : publicFunc1
}
}();
In HTML it could be called like LibName.publicFuncName()
在 HTML 中，它可以被称为 LibName.publicFuncName()
Also, look at Module Pattern here - http://addyosmani.com/resources/essentialjsdesignpatterns/book/
另外，在这里查看模块模式 - http://addyosmani.com/resources/essentialjsdesignpatterns/book/
UPD:
更新：
Now ES6 is quite ready-for-production and the answer should be updated:
现在 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 };
And when you need it:
当您需要时：
import { MyLib } from './MyLib';
