gpt4 book ai didi

javascript - 将 Javascript 命名空间分配给 HTML 元素并从元素调用命名空间中定义的函数

转载 作者:搜寻专家 更新时间:2023-10-31 23:12:13 26 4
gpt4 key购买 nike

如何将 Javascript 命名空间分配给 HTML 元素,并在该元素上调用命名空间中定义的函数?

我问了另一个问题: Attaching JavaScript to the prototype of an ASCX client side instance

上一个问题回答了如何去做,但现在我很好奇这在纯 Javascript/HTML 级别上是如何工作的。我离弄明白还差得很远。

假设我有一个只有文本框的 HTML 页面:

<html>
<body>
<div>
<input type="text" id="MyTextBox" />
</div>
</body>
</html>

在浏览器中,我可以执行 document.getElementById('MyTextBox')

但是,我的问题是,仅使用 javascript,如何为返回的对象分配 javascript 类型,以便我可以从该对象调用命名空间中定义的函数?

例如,我想做:

var x = document.getElementById('MyTextBox');
x.SetTheText('blah');

在我的自定义命名空间/类型/类中,我会将 SetTheText 定义为

function SetTheText(text) {
this.value = text;
}

我怎么说 MyTextBox 是一个可以运行在 JS 命名空间中定义的函数的对象。我希望这是有道理的

最佳答案

基本上,您可以向(几乎)任何类型的 JS 对象添加任何类型的属性。如果您将一个函数添加到一个对象,该函数的 this 将成为该对象。

换句话说

var x = document.getElementById('MyTextBox'); // a DOM object
x.setTheText = function(text) {
this.value = text;
};
x.setTheText('blah'); // bingo

如果你想扩展整个类的对象,你也可以通过原型(prototype)来实现

HTMLTextAreaElement.prototype.setTheText = function(text) {
this.value = text;
};
someRandomTextArea.setTheText("blah"); // bingo. Again.

但是,这并不是真正推荐的做法,因为您会弄乱您无法控制的对象(即它很脆弱,因为其他脚本和浏览器更新以及诸如此类的东西可能会妨碍您)。此外,这样做可能会破坏其他一些代码。

一个更好的解决方案(在很多方面)是 jQuery 解决方案,将未修改的 DOM 元素包装在另一个对象中,并在包装​​对象上调用方法而不是直接调用元素(就个人而言,我更喜欢“漂亮”的代码可以来自只是扩展 native JS 对象,但唉,它不安全,所以我试图退出它。)

附注类在javascript中被Captilized;方法是驼峰命名法。我已经相应地编辑了代码。这不是由任何东西强制执行的东西,而是风格的风格。


编辑:为了比较,你可以看看the prototype.js library ,它通过扩展 DOM 来发挥它的魔力。同样,在我看来,与 jQuery 不断调用 $(...).xyz(...) 相比,它生成了一些非常漂亮的代码,但它仍然是一条有点危险的路线

关于javascript - 将 Javascript 命名空间分配给 HTML 元素并从元素调用命名空间中定义的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7005023/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com