расширение для jQuery: Execute Object

в 10:06, , рубрики: ajax, javascript, jquery, метки: ,

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

Плагин позволяет передавать команды манипуляции ДОМом в одном объекте, то есть заменить много вызовов методов одним вызовом функции.

Использование

$.executeObject({"#my_div": ["text", "новый текст"]})   // можно передать объект
$.executeObject('{"#my_div": ["text", "новый текст"]}') // а можно и JSON

Зачем это?

Яваскрипт, передаваемый с сервера, отлаживать нелегко, поэтому лучше передавать объект, и свести код к минимуму. Вместо

$('table tr:first').remove();
$('input#name').val('John');
$('#my_div').addClass('error').text('Случилась ошибка');

можно создать объект и передать функции executeObject:

var объ =
  { 'table tr:first': 'remove'
  , 'input#name': ['val', 'Иван']
  , '#my_div':
    [ ['addClass', 'error']
    , ['text', 'Случилась ошибка']
    ]
  }

$.executeObject(объ)

В частности, если у вас накопилось нечто уродливое в виде шаблонов на ERB:

$('input#name').val('<%= escape_javascript(@person.name) %>')
$('#my_div').addClass('error').text('<%= escape_javascript(@error) %>')

можно это оформить в контроллере (в примере руби):

obj = {'input#name' => ['val', @person.name], 
  '#my_div' => [%w[addClass error], ['text', @error]]}
  
render js: "$.executeObject( #{obj.to_json} )"
# заметьте, что кавычки внутри скобок не нужны

а шаблон (view) вообще выкинуть. Также можно указать $.executeObject в качестве колбэка аяксного вызова:

$.post('/my/url', {некие: 'данные'}, $.executeObject)

а в ответ просто выдать подготовленный объект:

render json: obj

Иными словами, не надо передавать исполнимый код там, где можно передать данные.

Возвращаемое значение

Функция вернёт количество успешных вызов. Неуспешные вызовы молча игнорируются.

Автор: bubuq

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js