Пользовательские функции, подобные jQuery

#javascript

Вопрос:

Мне было интересно, как я могу создавать функции, подобные jQuery. Например: $(ID).function()

Где ID — это идентификатор HTML-элемента, $ это функция, которая возвращает document.getElementById ссылка на элемент «ID», а function — это пользовательская функция javascript.

Я создаю небольшую библиотеку, которая реализует некоторые функции. И я хочу использовать этот синтаксис без использования jQuery.

Теперь мои вопросы таковы: как я могу это реализовать? Как называется технология, которая позволяет это?

Редактировать:

Что я хочу сделать, так это:

HTMLElement.prototype.AlertMe = функция() {оповещение(this.value);}

Затем, когда я вызываю document.getElementById('html_input_id').alertMe() , он должен показывать окно предупреждения с входным значением. Но HTMLElement.prototype не работает в IE.

1. Почему бы не получить исходный код jQuery и не взглянуть на него?

2. Да, но я не хочу создавать плагин. Я вообще не буду использовать jQuery.

3. Андре, я уже пробовал object.prototype, но он не работает в IE

4. наследование в стиле прототипа определенно работает в IE

Ответ №1:

 $ = function(id) {
    return document.getElementById(id);
}

Ответ №2:

Хорошо, послушайте, то, о чем вы спрашиваете, содержит много деталей и последствий. Код для jQuery с открытым исходным кодом, вы можете прочитать его для получения подробной информации; вам также не мешало бы найти хорошую книгу по Javascript, the O’Reilly Definitive Guide.

$ это просто символ для имен в JS, поэтому, как показали некоторые другие ответы, нет причин, по которым вы не можете просто написать функцию с этим именем:

 var $ = function(args){...}

Поскольку каждый, включая его брата, использует этот трюк, вы также хотите иметь более длинное имя, чтобы вы могли смешивать вещи.

 var EstebansLibrary = function(args){...}
var $ = EstebansLibrary; // make an alias

Поскольку в конечном итоге вы выполняете разные действия с функцией точки входа, вам нужно знать, как JS использует аргументы — найдите arguments объект.

Вы захотите упаковать это так, чтобы ваши внутренние компоненты не загрязняли пространство имен; вам понадобится какой-нибудь вариант шаблона модуля, который сделает его чем-то вроде

 var EstebansLibrary = (function(){
    // process the arguments object
    // do stuff
    return {
       opname : implementation,...
    }
})();

И в конечном итоге вы захотите подготовиться к наследованию, а это означает помещение этих функций в prototype объект.

Ответ №3:

Вы можете использовать prototype, чтобы назначить новую функцию прототипу элемента.

Элемент.prototype.testFunction=функция(str){оповещение (str)};

Это обеспечило бы функцию ‘testFunction’ для всех элементов HTML.

Таким образом вы можете расширить любой базовый объект, то есть массив, строку и т.д.

Это будет работать вообще без какого-либо плагина — хотя, с учетом сказанного, я не думаю, что это будет работать в IE. Я полагаю, что такие библиотеки, как MooTools и jQquery, создают свое собственное наследование с элементами DOM для обеспечения кроссбраузерной совместимости, хотя не цитируйте меня по этому поводу.