Какой синтаксис JavaScript/JQuery?

Я не знаю, как искать это, поэтому я прошу здесь.

Я унаследовал проект, и никто не знает, что этот трюк синтаксиса называется.

Здесь вы можете выбрать событие с выпадающим отображением, которое вызовет функцию, если из списка выбран одно или другое конкретное значение.

$('#accordion select[name=x_range]').change(function(){
  $('#custom-time')[$(this).val() == 'custom' ? 'show' : 'hide']();
  $('#custom-time-to-now')[$(this).val() == 'custom_to_now' ? 'show' : 'hide']();
  updateTimeIntervalOptions();
}).triggerHandler('change');

В этом функция show или hide вызывается в div #custom-time или #custom-time-to-now.

Что вызывает вызывающие функции, подобные этому?

EDIT:
Я должен был сказать, что я понимаю тройную if/else, но не часть $(selector)[function_name]().

ОТВЕТЫ

Ответ 1

Я бы сказал, что это не трюк, а понимание трех особенностей javascript.

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

 var f = function () { ... }
 var b = [];
 b[1] = f; // assigning function to array element
 b[1]();   // calling function assigned to array element

Во-вторых, удобный тернарный оператор, который является эффективным сокращенным обозначением комбинации if и присваивания:

 var a = (b >c ) ? b : c;

 // is the same as

 if (b > c ) {
     a = b;
 } else {
     a = c;
 }

И последнее, но не менее важное: факт, что к каждому объекту можно обращаться как к элементам словаря, т.е.

 a.b = 5
 a['b'] === 5 // true!

Таким образом, все это вместе, вы можете иметь выражение, подобное этому

$(selector)[condition?'show':'hide']();

Что равно

if (condition) {
   $(selector).show();
} else {
   $(selector).hide();
}

ОБНОВЛЕНИЕ: одна заметка в этом конкретном случае. В большинстве случаев вам не нужно делать такие сложные вещи, как $().toggle() принимает логический аргумент для включения и выключения, поэтому

$(selector)[condition?'show':'hide']();

будет работать так же, как

$(selector).toggle(!!condition);

Заметьте, что я использую!! для того, чтобы выдать значение в boolean, в качестве параметра проверки переключения с помощью ===

Ответ 2

Что вызывает вызывающие функции, подобные этому?

Плохая практика кодирования.

Это способ динамического вызова функций show() или hide(). Это кровавый неприятный взгляд.

Изменить: по-видимому, мой ответ "спорный" для некоторых людей. Пожалуйста, дайте мне пояснить: если я могу написать инструкции if-else над тернарным оператором - особенно для таких вещей, как сравнение строк, я определенно возьму ясность в отношении более короткого кода.

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

Тернарные операторы неплохие. Доступ к скобкам неплох. Но это изменчивые концепции, которые легко злоупотребляют.

Ответ 4

Тернарные операторы задают значения для двух или более параметров (могут быть вложенными).

Подумайте о них как о switch или if/else или if/elseif/.../else, но только для установки значения ONE.

Итак, посмотрите на что-то вроде:

var name = X === Y ? "Bob" : "Doug";
sayHello(name);

Это тройное условие, которое необязательно задает имя, основанное на том, является ли условие истинным или ложным.

В вашем jQuery они просто пропустят шаг, используя нотацию с тройной внутренней частью.

People[ (selected_person === "Bob") ? "Bob" : (selected_person === "Doug") ? "Doug" : "Jimmy" ].sayHi();

Это вызовет sayHi() для People.Bob, People.Doug или People.Jimmy, в зависимости от значения selected_person.

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

 var person = // ternary from last step
 People[person].sayHi();

EDIT:

Основываясь на вашем редактировании, это скобка-нотация.

MyObj = { myFunc : function () { doStuff(); } };

Вы можете вызвать myFunc несколькими способами.
Либо используя точечную обозначение: var func = MyObj.myFunc; или через обозначение: var func = MyObj["myFunc"];
В любом случае значение func теперь myFunc.

Итак, что они делают, это установить string имя функции, которую они хотят вызвать.

var string = "show";
MyObj[string] // = MyObj.show
MyObj[string]() // = MyObj.show()

В случае вашего кода они используют тройную информацию для определения значения строки.

Ответ 6

Автор использует тернарный оператор (? :) для вызова функции-члена объекта jQuery с использованием нотации массива el['show'](), а не el.show(). Сломанный, он выглядел бы так:

var fnName;
if($(this).val() == 'custom') {
  fnName = 'show';
} else {
  fnName = 'hide';
}

$('#custom-time')[fnName]();  // an alternative to $('#custom-time').show() or .hide()

Ответ 7

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