JQuery автозаполнение специальных символов (норвежских) проблем. Селекторы в jQuery
jquery уроки (6)
Я работаю над проектом с довольно большим количеством JQuery. В JQuery есть много значков в любом месте, например
$(document).ready(function () { $("input").wl_File({ url: "/Admin/PolicyInventory/UploadDocuments", onFileError: function (error, fileobj) { $.msg("file is not allowed: " + fileobj.name, { header: error.msg + " Error ", live: 10000 }); } }); ...
Мой вопрос: что означает этот знак доллара? Почему он используется повсюду и как его понять и интерпретировать? Это напоминает мне о страшных днях, когда я изучал Схему в университете, и мне приходилось класть скобки везде, не зная, почему я это делаю.
$ sign является псевдонимом для jQuery . Краткая версия jQuery , меньше механизма записи.
Только для примера: (в jQuery это сложнее)
Var yourFunction = function() { alert("a function"); } window.Myf = yourFunction;
Теперь вы можете позвонить yourFunction как:
Myf(); // definitely a short syntax
Знак доллара - это просто псевдоним для JQuery.
JQuery(document).ready(function(){});
$(document).ready(function(){});
Жесткость и производительностьКогда мы работаем над библиотекой или языком программирования, мы должны обратить внимание на некоторые правила записи. Благодаря jQuery они уже реализовали множество опций. Вы можете использовать $ или вы можете использовать jQuery или можете использовать _
(function (_) { _("#wow").click() })(jQuery);
Или, может быть, вы можете делать фантастические изменения, javascript-идентификаторы являются unicode, поэтому вы можете использовать Ω
(function (Ω) { Ω("#wow").click() })(jQuery);
Но основная идея этого, нажимая один раз на клавиатуру, лучше, чем набирать jQuery
С другой стороны у нас есть производительность... Я просто случайно открыл свой проект и искал $ , я использовал 54 $ в одном файле javascript.
jQuery - 6 байт.
Разница огромная 54 * 5 = 220 байт.
В 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, просто из удобства. Это значит, что не стоит использовать его в своём коде только потому что это здорово смотрится, но при разработке фреймворка из этого действительно можно извлечь выгоду, так как глобальный объект фреймворка будет выглядеть уникальным и выделяться из остального кода.
Я использую функцию автозаполнения jQuery на моем норвежском сайте. При вводе норвежских символов æ, ø и å функция автозаполнения предлагает слова с соответствующим символом, но не слова, начинающиеся с соответствующего символа. Похоже, мне нужно, чтобы символ кодировал норвежских символов посреди слов, но не символы, начинающиеся с него.
Я использую PHP-скрипт с моей собственной функцией для кодирования норвежских символов в UTF-8 и создания списка автозаполнения.
Это действительно расстраивает!
$q = strtolower($_REQUEST["q"]); if (!$q) return; function rewrite($string){ $to = array("%E6","%F8","%E5","%F6","%EB","%E4","%C6","%D8","%C5","%C4","%D6","%CB", "%FC", "+", " "); $from = array("æ", "ø", "å", "ä", "ö", "ë", "æ", "ø", "å", "ä", "ö", "ë", "-", "-"); $string = str_replace($from, $to, $string); return $string; }
$items – массив, содержащий подсказки-слова.
Foreach ($items as $key=>$value) { if (strpos(strtolower(rewrite($key)), $q) !== false) { echo utf8_encode($key)."\n"; } }
$(document).ready(function(){ $("#autocomplete").autocomplete("/search_words. ", { position: "after", selectFirst: false, minChars: 3, width: 240, cacheLength: 100, delay: 0 }) });
Ошибка (я думаю):
- Strtolower() не будет Strtolower() строчные символы.
- Таким образом, вы не конвертируете специальные символы в функцию повторной записи (Ä Æ Ø Å и т. Д.),
если я правильно понял код, запрос для Øygarden (обратите внимание на капитал Ø) оставил бы первый символ в его исходной форме Ø , но вы запрашиваете форму urlencode () d, которая должна быть %C3%98
Вы должны использовать mb_convert_case() определяющий UTF-8 как кодировку.
Дайте мне знать, разрешит ли это это.
Ваш код может быть заменен на 100% с использованием стандартных функций PHP, которые могут обрабатывать все символы Unicode вместо тех, которые вы указали, тем самым менее подвержены ошибкам. Я думаю, что функциональность вашей пользовательской функции rewrite() может быть заменена на
- urldecode ()
- iconv ()
вы получили бы правильные кодированные UTF-8 данные, которые вам больше не нужны utf8_encode() . Можно было бы получить более чистый подход таким образом, который работает для всех персонажей. Также может случиться так, что он уже сортирует любую ошибку (если ошибка в вашем коде).
Я использую аналогичную конфигурацию, но с датскими персонажами (æ, ø и å), и у меня нет проблем с любыми символами. Вы уверены, что кодируете все символы правильно?
Мой ответ содержит | список значений. Все значения кодируются в кодировке UTF-8 (так они хранятся в базе данных), и я задал тип содержимого text / plain; charset = utf-8, используя функцию заголовка php. Последний бит для этого не нужен.
- Фрэнк
Спасибо за все ответы и помощь. Я, конечно, узнал некоторые новые вещи о PHP и кодировании 🙂
Но решение, которое сработало для меня, было следующим:
Я узнал, что функция автозаполнения jQuery фактически кодирует UTF-8 и строчный специальный символ перед отправкой его в функцию PHP. Поэтому, когда я выписываю массивы предлагаемого контента, я использовал функцию rewrite() для кодирования специальных символов. Поэтому в моей функции сравнения мне нужно было только опустить все.
Теперь он отлично работает!
У меня была схожая проблема. решение в моем случае было функцией urldecode () php, чтобы преобразовать строку обратно в исходную, а затем отправить запрос в db.
- 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?/