如何在使用 JavaScript 的 html 文件中的 JavaScript 文件中定义变量?
[英] How can I define variables in a JavaScript file within an html file in which the JavaScript is used?
本文介绍了如何在使用 JavaScript 的 html 文件中的 JavaScript 文件中定义变量?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经搜索了一个答案，但我没有找到解决我的问题的答案，因为我不知道如何将其表述为搜索.我的问题是我想对多个 HTML 文件使用相同的 JS 代码，但是根据 HTML 文件，只需要在 JS 中更改几个值.
HTML
<!--Replace:: 第 14 行，第 82 行:带有项目名称的PROJECT"；第 15 行:'0' 表示最后计数的图像；第 94 行:带有图片文件基本名称的项目"--><!--在文本数组中的每一步填写任何特殊说明.--><头><link type="text/css" rel="stylesheet" href="../defaultStyle.css"/><script type="text/javascript" src = "../buttons.js">变量数 = 0变量名称 = 项目最后一个变量 = 100var LAST1 = LAST-1文本[0] =一个"文本[1] = "b"<!--...等--><link type="text/css" rel="stylesheet" href="../projectStyle.css"/><身体><div><p href="JavaScript:StepDisplay()" id="Step">PROJECT</p>
<div id="文本">
<div><button type="button" onClick="JavaScript:Back()">返回<button type="button" onClick="JavaScript:Next()">下一步
<div><img src="image/PROJECT (0).jpg" id="图片">
</html>***JavaScript***var 文本 = 新数组 [100]变量数 = 0变量名称 = 项目最后一个变量 = 100无功 LAST1 = 99功能下一个(){数量 = 数量 + 1如果(数字==最后){数量 = 0}stepnum = num.toString();document.getElementById("Pic").src = "image/"+ NAME + "(" + stepnum + ").jpg"document.getElementById("Text").innerHTML = text[num]如果(数量== 0)document.getElementById("Step").innerHTML = NAME如果(数量== 1)document.getElementById("Step").innerHTML = "Pieces"如果(数 > 1)document.getElementById("Step").innerHTML = "Step" + (num-1).toString();}函数返回(){数量 = 数量 - 1如果(数量<0){num = LAST1}stepnum = num.toString();document.getElementById("Pic").src = "image/" + NAME + "(" + stepnum + ").jpg"document.getElementById("Text").innerHTML = text[num]如果(数量== 0)document.getElementById("Step").innerHTML = NAME如果(数量== 1)document.getElementById("Step").innerHTML = "Pieces"如果(数 > 1)document.getElementById("Step").innerHTML = "Step" + (num-1).toString();}
解决方案
我不知道这是否比 hutchbat 更好，但它是一种不同的方式.
我所做的是将buttons.js 分成两个文件:buttons_init.js 和buttons.js
buttons_init.js 包括所有的初始化，但不包括使用它的代码
var text = new Array[100]变量数 = 0变量名称 = 项目最后一个变量 = 100无功 LAST1 = 99
所以在你的 HTML 中，你这样做(最好在底部，除非你需要它提前运行):
<script src = "../buttons.js>
这样做的好处是您不必记得检查您的buttons_init.js 中是否有未定义的变量.缺点是你有两个文件要包含(这会稍微减慢加载速度，虽然不像以前那么多)并且你必须记住将你希望人们覆盖的默认变量放在 _init 文件中(它有记录它的影响).有些人会喜欢一种方式，有些人会喜欢另一种方式.我只是将其作为替代方案呈现.
一种完全不同的方法是将选项"结构发送到 Next 和 Prev 函数中(将它们与函数内的默认值合并)，或者将它们变成一个类(或 jQuery 插件)，但这对于这么简单的例子.
I have searched for an answer, but I haven't found a answer that address my issue, as I'm not how to word it as a search. My problem is that I want to use the same JS code for multiple HTML files, but only a few values need to be changed in the JS depending on the HTML file.
HTML
<!DOCTYPE html>
<!--Replace:: Line 14, Line 82: 'PROJECT' with name of the project; Line 15: '0' with the last counted image; line 94: 'PROJECT' with base name of picture files-->
<!--fill in any special instructions at each step in the text array.-->
<html>
<head>
<link type="text/css" rel="stylesheet" href="../defaultStyle.css"/>
<script type="text/javascript" src = "../buttons.js">
var num = 0
var NAME = PROJECT
var LAST = 100
var LAST1 = LAST-1
text[0] = "a"
text[1] = "b"
<!--...etc-->
</script>
<link type="text/css" rel="stylesheet" href="../projectStyle.css"/>
</head>
<body>
<div>
<p href="JavaScript:StepDisplay()" id="Step">PROJECT</p>
</div>
<div id="Text">
</div>
<div>
<button type="button" onClick="JavaScript:Back()"> Back</button>
<button type="button" onClick="JavaScript:Next()"> Next</button>
</div>
<div>
<img src="image/PROJECT (0).jpg" id="Pic">
</div>
</body>
</html>
***JavaScript***
var text = new Array[100]
var num = 0
var NAME = PROJECT
var LAST = 100
var LAST1 = 99
function Next(){
num = num + 1
if (num == LAST)
{num = 0}
stepnum = num.toString();
document.getElementById("Pic").src = "image/"+ NAME + "(" + stepnum + ").jpg"
document.getElementById("Text").innerHTML = text[num]
if (num == 0)
document.getElementById("Step").innerHTML = NAME
if (num == 1)
document.getElementById("Step").innerHTML = "Pieces"
if (num > 1)
document.getElementById("Step").innerHTML = "Step " + (num-1).toString();
}
function Back(){
num = num - 1
if (num < 0)
{num = LAST1}
stepnum = num.toString();
document.getElementById("Pic").src = "image/" + NAME + "(" + stepnum + ").jpg"
document.getElementById("Text").innerHTML = text[num]
if (num == 0)
document.getElementById("Step").innerHTML = NAME
if (num == 1)
document.getElementById("Step").innerHTML = "Pieces"
if (num > 1)
document.getElementById("Step").innerHTML = "Step " + (num-1).toString();
}
解决方案
I don't know if this is better then hutchbat's or not, but it is a different way.
What I did was break up buttons.js into two files: buttons_init.js and buttons.js
buttons_init.js includes all the intialization, but not the code that uses it
var text = new Array[100]
var num = 0
var NAME = PROJECT
var LAST = 100
var LAST1 = 99
So in your HTML, you do this (preferably at the buttom unless you need it to run early):
<script type="text/javascript" src = "../buttons_init.js">
<script>
// overwrite any variables you need to change
num = 5
LAST = 200
LAST1 = LAST-1
</script>
<script src = "../buttons.js>
The advantage of this is that you don't have to remember to check to see a variable is undefined in your buttons_init.js. The disadvantage is that you have two files to include (which slows down the load slightly, although not as much as it used to) and you have to remember to put default variables you want people to override in the _init file (which has the side affect of documenting it). Some people will prefer one way, some will prefer the other. I'm just presenting it as an alternative.
A completely different way would be to send an "options" structure into the Next and Prev functions (merging them with default values inside the functions), or make them into a class (or jQuery plugin), but that seems overkill for such a simple example.
这篇关于如何在使用 JavaScript 的 html 文件中的 JavaScript 文件中定义变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
