我将继续同意 cdhowie 关于 125% 的评论。
尝试使用像 Java/C#/C++/ActionScript/etc 这样的 JS 会奏效。
一旦你绕过它一段时间,你就可以勉强完成一些事情,并且它会做一些功能性的事情。
但这真的,真的不是语言应该使用的方式。
如果您对其他语言有技术上的了解,Crockford 的“JavaScript: the Good Parts”是一个很好的入门方法。
如果您对语言的解析方式了解有限/不了解,或者与您的舒适区相比,您真的迷失在 JavaScript 中,那么 Crockford 的书就像一个训练营,适合那些想要一个坚实的起点来掌握低级语言(按原样使用语言,没有库并且最少使用设计模式)。
我会说 Stoyan Stefanov 的“JavaScript 模式”是一个了不起的下一步,因为它完全按照标签上所说的那样做,而且做得很好。
无论如何,这里有很多问题。
首先是您的脚本甚至在它们存在之前就要求元素及其值。
JS/DOM 没有预编译。在大多数情况下,直到您进入客户端/服务器通信,或者您正在定义功能并在其他地方使用它们,您所见即所得,按照您放下它们的顺序。
在这种情况下,您需要一个元素 where el.id === "name"
。
如果您查看代码中这一行的上方,您会注意到它上方的任何元素都没有id
.
这里的解决方案是确保您的脚本低于预期目标(或将所有内容包装在函数中,并调用下面的函数,<select>
以便您知道它存在)。
这将我们带到第二个问题:您的元素没有 ID。
如果您没有 ID,则通过 ID 获取这些元素是行不通的。
<select id="my-select-box"></select>
<script>
var select = document.getElementById("my-select-box");
</script>
如果你把它们反过来,它就行不通了。
如果您缺少一个.id
属性,它将不起作用。
至于“类”,不要认为它是定义硬类然后创建实例。
有时,这是有用的/必要的。
其他时候,您只需要关心实例。
我的意思是:在 C++ 中,想想你可能想创建一个成熟的类的所有时间,而实际上一个简单的结构可能已经完成了。
那么你真正需要的只是一个实例的结构呢?
现在想象一下给出该结构方法,而不需要做任何其他工作(标题等)。
<select id="fruit-list">
<option value="apples">apple</option>
<option value="oranges">orange</option>
<option value="bananas">banana</options>
</select>
<p id="fruit-output"></p>
var Fruit = function (name, colour, starting_amount) {
var public_interface = {
name : name,
colour : colour,
amount : starting_amount
};
return public_interface;
};
var apples = Fruit("apple", "red", 4),
oranges = Fruit("orange", "orange", 2),
bananas = Fruit("banana", "yellow", 1);
var fruit_basket = {
selected : "",
output_el : null,
apples : apples,
oranges : oranges,
bananas : bananas,
add : function (fruit, num) {
this[fruit].amount += num;
},
remove : function (fruit, num) {
this[fruit].amount -= num;
},
print : function () {
var fruit = fruit_basket.selected,
el = fruit_basket.output_el,
message = "I want " + fruit.amount
+ " " + fruit.colour
+ " " + fruit.name;
if (fruit.amount !== 1) { message += "s" }
if (el.hasOwnProperty("textContent")) {
el.textContent = message;
} else {
el.innerHTML = message;
}
},
select : function (el) {
var index = el.selectedIndex,
fruit = el.options[index].value;
fruit_basket.selected = fruit_basket[fruit];
},
set_output : function (el) {
fruit_basket.output_el = el;
}
};
var select_box = document.getElementById("fruit-list"),
output_el = document.getElementById("fruit-output");
fruit_basket.set_output(output_el);
select_box.addEventListener("change", function () {
fruit_basket.select(this);
fruit_basket.print();
});
这不是答案,但考虑一下这比 C++ 或 Java 解决方案要简单得多,在这些解决方案中,您必须为上述所有内容构建类。
如果这更高级,也许您会考虑以更明显分离的方式将数据与视图和控件分开。
但同样,这并不意味着您需要巨大的继承层次结构,或大量相对较少的类。
这是一种非常简单的语言,它支持构造/初始化,但您也可以通过在现场发明一个对象来制作“单例”。
如果您打算认真使用该语言,我建议您进行这项研究。