В JavaScript символ доллара обычно встречается в объявлениях переменных и вызовах функций. Позвольте убедить вас, что здесь не кроется ничего таинственного, ведь это всего лишь имя переменной (идентификатор). В этом нет ничего странного. Например, безумно популярный JavaScript-фреймворк, о котором я уже писал (What is jQuery?) использует знак доллара для получения доступа к главному объекту jQuery.
Во многих компилируемых и интерпретируемых языках переменные рассматриваются как идентификаторы. Каждый язык имеет свой синтаксис, будь то C, C++, PHP, Java или JavaScript. И синтаксис каждого языка подчиняется определённому набору правил. Например, в JavaScript правила объявления переменных заключаются в том, что каждый идентификатор должен начинаться с буквы латинского алфавита, символа доллара ($) или подчёркивания (_) и не может начинаться с цифр (от 0 до 9) и прочих символов, таких как знаки препинания. Оба упомянутых символа ($ и _) нестандартны и могут встречаться и в остальной части идентификатора. Так, например, имя переменной, заданное пятью знаками доллара подряд: $$$$$ (или также любым числом подчёркиваний) абсолютно приемлемо, поскольку подчиняется правилам синтаксиса языка JavaScript. Это простое требование языка JavaScript, с которым программисты должны смириться. Поверьте, для этого есть весьма веские причины.
В некотором коде жил да был глобальный объект функции, чьим именем был простой знак $. Такой стиль кода (отсутствие ключевого слова var) опытными программистами признан нежелательным, мы стараемся не использовать глобальные переменные в JavaScript, если, конечно, не пытаемся схитрить. Как бы то ни было, суть в том, что эта функция могла бы быть названа почти как угодно: a, z или даже _.
// Пример корректных идентификаторов var A = function() { alert("функция A была вызвана"); } var $ = function() { alert("функция $ была вызвана"); } var _ = function() { alert("функция _ была вызвана"); }
Более того, в JavaScript версий 1.5 и выше, помимо знака доллара и символа подчёркивания, вы можете использовать в идентификаторах символы кодировок ISO 8859-1 и Unicode, например Ø. Вы можете удивиться, но разрешено использовать даже Unicode-последовательности вида uXXXX, где XXXX - число, например 0024. Unicode-символ u0024 эквивалентен - угадайте, чему? … Знаку доллара. И вы можете даже вызвать функцию, заданную идентификатором u0024, используя для ссылки знак доллара! Конечно, не стоит использовать это повсеместно только потому, что такое возможно. Я полагаю, что это нежелательная практика, многие программисты могут быть осведомлены хуже, чем вы, и из-за таких «фишек» код будет казаться им запутанным и нечитаемым.
Как вы наверняка знаете, JavaScript - объектно-ориентированный язык программирования. Есть несколько различных способов присваивания значения идентификатору. Например, когда мы используем ключевое слово var, JavaScript создаёт переменную в текущей (или локальной) области видимости. Если мы пропустим ключевое слово var, переменная всё равно будет создаваться, но уже в глобальной области видимости программы, что означает, что она будет видима во всём файле.js. И снова хочу напомнить: избегайте глобальных переменных. Я понимаю, что эта статья о знаке доллара, но, если вам всё ещё не очевидно, глобальные переменные напомнят о себе, когда вы столкнётесь с масштабными проектами, различные компоненты которых написаны кем-то другим или разработаны в команде программистов. Итак, если кто-то говорит вам, что использовать глобальные переменные без ключевого слова var – вполне нормально, не верьте – вас обманывают.
И ещё. Поскольку переменные в JavaScript являются объектами, вы можете ссылаться на функции своими переменными. Вы даже можете присвоить «функцию-член» уже существующей функции. Но попытка присвоить функцию объекту, который ещё не существует обречена на провал в JavaScript. Если вы действительно хотите хорошо разобраться, обратите особое внимание на приведённый ниже код.
Теперь, используя полученные знания и не запуская этот код в браузере, можете ли вы сказать, будет ли он работать?
По соглашению, символ доллара ($), подчёркивания (_) и даже некоторые символы ASCII могут использоваться в любом месте идентификатора в JavaScript. В документации Ecma Script (7.6 Identifiers, ECMA-262, 3rd Ed.) сказано: «Символ доллара предназначен для использования только в автоматически сгенерированном коде». Это означает, что мы не должны использовать символ доллара ($) в идентификаторах, кроме тех случаев, когда мы пишем фреймворк. Вот список разрешённых символов, которые могут использоваться в идентификаторах:
IdentifierName::
IdentifierStart
IdentifierName IdentifierPart
IdentifierStart::
UnicodeLetter
$
_
UnicodeEscapeSequence
IdentifierPart::
IdentifierStart
UnicodeCombiningMark
UnicodeDigit
UnicodeConnectorPunctuation
UnicodeEscapeSequence
Цель этой статьи - показать, что символ доллара – всего лишь идентификатор (реализованный популярным фреймворком Prototype и затем подхваченный разработчиками jQuery) и ничего больше. Почему программисты используют его? Ну, это очень удобное имя для функции, имеющей чёткое назначение в коде фреймворка. По этой причине главный объект jQuery, определённый как знак доллара, является синонимом объекта jQuery. В обычном коде мы используем объект jQuery вместо $. Если вы хорошо разбираетесь в jQuery и уделяете пристальное внимание документации, использование синонима $ вместо объекта jQuery нежелательно, хотя, почему-то он очень популярен среди программистов, которые находят это изящным.
Подведём итогиРазница в использовании символа доллара - смысловая. Это имя идентификатора. С точки зрения психологии, оно выглядит удобно и изящно. Технически же, это всего лишь функция или символьная ссылка на переменную, на самом деле нет никакой разницы в использовании $ или _ или любого другого символа.
Символ $, как сказано в спецификации Ecmascript, разрешён для использования в идентификаторах. Если идентификатор состоит из единственного символа $, он, конечно, выглядит странно, но такая разница видна только человеку. Насколько я знаю, для компилятора было бы всё равно, если бы переменная состояла из любого другого символа, например a или b.
С другой стороны, спецификация Ecmascript сообщает, что символ $ должен использоваться во внутреннем коде, каким является код фреймворка jQuery, просто из удобства. Это значит, что не стоит использовать его в своём коде только потому что это здорово смотрится, но при разработке фреймворка из этого действительно можно извлечь выгоду, так как глобальный объект фреймворка будет выглядеть уникальным и выделяться из остального кода.
- Tutorial
* Это шутка.
(картинка позаимствована где-то в интернете)
Всем привет.
Уже давно прошли времена обязательной поддержки 6, 7, 8 Ослов и неизбежного использования jQuery, DOM API постепенно приводится к единому виду, но я всё так же часто встречаю на просторах интернета утверждения о том, что VanillaJS - это длинная колбаса.
Мол, зачем мне писать вот так:
document.querySelector(".selector");
Если я могу написать вот так:
$(".selector");
Я отчасти согласен с этим, потому что, периодически, необходимо выбирать элементы много раз в приложении. Приходится определять функции, делающую выборку, прямо в коде:
// selects one node matched given selector
function $(selector, ctx) {
return (ctx || document).querySelector(selector);
}
// selects all nodes matched given selector
function $$(selector, ctx) {
return .slice.call((ctx || document).querySelectorAll(selector));
}
Это касается крошечных скриптов. Для крупных проектов, конечно, нужно юзать какой-нибудь фреймворк, который берет на себя все манипуляции над DOM.
Но я совершенно несогласен с тем, что для обычной выборки нужно подклюать что-то большое (Zepto, jQuery).
«Движение» против использования jQuery и за использование нативных методов DOM существует уже несколько лет. Вспомним два самых известных сайта youmightnotneedjquery и vanilla-js . Оба сразу отталкивают новичка устаревшими альтернативами. vanilla-js показывает ужасные примеры использования AJAX и анимаций, второй грешит только беспощадным XMLHttpRequest. Оба сайта ни слова не говорят о Fetch API.
Хотя, если присмотреться, и с анимациями у второго не всё гладко. В качестве альтернативы они предлагают воспользоваться transition, хотя CSS Animations существуют давно и, самое главное, Web Animations JavaScript API уже имплементирован в Хроме и Файерфоксе и неплохо полифилится для других браузеров.
Для того, чтоб получить небольшую DOM библиотеку с минимальным необходимым набором методов, я когда-то сделал библиотеку, с шуточным названием balalaika.js . Напомню, балалайка - jQuery-подобная микробиблиотека, с очень небольшим набором методов: on , off , is , extend .
Но и она устарела. Метод is потерял свою актуальность, так как метод matches стал кроссбраузерным. extend самоуничтожился, так как в JavaScript пришел Object.assign , on и off просто-напросто не нужны, по причине, озвученной выше: фреймворки.
Я решил немного обновить эту библиотеку, выпилив все методы и оставив только функциональность, отвечающу за выборку элементов. Так как это изменение полностью ломает совместимость с балалайкой, было решено вынести её в отдельный проект с другим названием «bala» - обрубленное старое название (как и библиотека), - «пуля» по-испански.
Кроме всего прочего, целью bala.js является улучшение того, что сейчас иногда называют «плагинами к VanillaJS». Я очень люблю библиотеки без зависимостей, но почти все они предлагают инициализировать скрипт с передачей DOM Element.
MyAwesomeLib(document.getElementByID("block"));
В таких случаях мне бы хотелось иметь больше возможностей: передать селектор, передать NodeList или, на худой конец, инстанс jQuery. Подключив к такому инструменту ~400 символов кода, инициализация скрипта будет более гибкой.
$(".selector").appendChild(node);
Поэтому, была добавлена симпатичная альтернатива в виде статичного метода $.one , который работает в точности так же, как и основная функция, но возвращает нулевой элемент или null
// всего одним символом больше, а выглядит на тысячу символов лучше $.one(".selector").appendChild(node);
$.one , кроме всего, служит двум целям: не создавать дополнительную переменную (в таких библиотеках их обычно две: $$ и $) и оставить возможность симпатичного импорта.
Import $ from "balajs";
var $ = require("balajs");
$(".one, two") $(document.querySelectorAll(".selector")); $(document.body); $(element.children); $(jQuery(".selector")); $()
Поиск элемента в другом элементе
var elements = $(".my-selector", element);
DOM ready
$(function() { alert("DOM is ready"); });
Не забывайте, что вместо использования DOM ready можно просто указать скрипты в конце тега body
...
Парсинг
var div = $("");
Парсинг контекстных элементов
Для персинга элементов, требующих контекст, нужно передать имя тега-родителя (он создается динамически), например, для парсинга td нужно передать tr , для парсинга tr нужно передать tbody , для парсинга option нужно передать select .
var cells = $("", "tr");
Плагины
Расширять bala.js можнно как и любую другую jQuery-подобную библиотеку.
$.fn.toggle = function(boolean) { this.forEach(function(item) { item.hidden = boolean; }); }; $(".button").toggle(false); // hides all buttons Как использовать?Как глобальную переменную на странице
$=function(d,e,c,f,g){c=function(a,b){return new f(a,b)};f=function(a,b){e.push.apply(this,a?a.nodeType||a==window?[a]:""+a===a?/
Guitar Tuner – тюнер для настройки гитары
Какой объем ssd нужен для Windows
Сканирование документов и фотографий с помощью инструмента «Факсы и сканирование
Как отключить платные услуги МТС?
How-To: восстановление и резервное копирование данных EFS на устройствах Samsung Galaxy