Назначение пространства имен Javascript элементу HTML и вызов функций, определенных в пространстве имен из элемента - PullRequest
Новая
       13

Назначение пространства имен Javascript элементу HTML и вызов функций, определенных в пространстве имен из элемента

3 голосов
/ 10 августа 2011

Как можно назначить пространство имен Javascript для элемента HTML и вызвать функции, определенные в указанном пространстве имен для этого элемента?

Я задал этот другой вопрос: Присоединение JavaScript к прототипу экземпляра на стороне клиента ASCX

На предыдущий вопрос ответили, как это сделать, но теперь мне интересно, как это работает на чистом уровне 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. Я надеюсь, что это имеет смысл

Ответы [ 2 ]

3 голосов
/ 10 августа 2011

По сути, вы можете добавить любое свойство к (почти) любому виду объекта JS.И если вы добавите функцию к объекту, то this этой функции будет объектом.

Другими словами 

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

Если вы хотите расширить целый класс объектов, выЭто можно сделать и с помощью прототипа 

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

Однако это не рекомендуется, поскольку вы возитесь с объектами, находящимися вне вашего контроля (т. е. хрупки, как другие скрипты и обновления браузера, и тому подобное).мешать).Кроме того, вы можете сломать какой-то другой фрагмент кода, выполнив это.

Лучшим решением (во многих отношениях) является решение jQuery для обертывания неизмененного элемента DOM в другом объекте и скорее вызовом методов для объекта-оберткичем непосредственно элемент (Лично мне больше нравится «симпатичный» код, который может быть получен из простого расширения нативных объектов JS, но, увы, это небезопасно, поэтому я пытаюсь выйти из этого.)

ps КлассыПодчеркнуты в javascript;методы CamelCase.Я отредактировал код соответственно.Это не что-то, что навязывается ничем, а стилем стиля.

Редактировать: Для сравнения вы можете посмотреть библиотеку prototype.js , которая творит чудеса, расширяя DOM,Опять же, на мой взгляд, это делает некоторый очень симпатичный код по сравнению с постоянными вызовами jQuery $(...).xyz(...), но это все еще немного опасный путь, чтобы пройти

2 голосов
/ 10 августа 2011

Вы не должны изменять объекты хоста, все основные библиотеки согласны с этим. Вместо этого используйте объект-оболочку: 

<input type="text" id="inp0">

<script type="text/javascript">

function CreateCustomElement(el) {
  this.element = el;
}

CreateCustomElement.prototype = {
  setTheValue: function(text) {
    this.element.value = text;
  }
}

var x = new CreateCustomElement(document.getElementById('inp0'));
x.setTheValue('foo');

</script>
...