59 lines
3.8 KiB
XML
59 lines
3.8 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 790" role="img" aria-labelledby="title desc">
|
|
<title id="title">Повторная инициализация jQuery-виджета без дублирования обработчиков</title>
|
|
<desc id="desc">Схема показывает, как повторный вызов функции инициализации снимает только свои обработчики через пространство имён и затем назначает один новый обработчик.</desc>
|
|
<defs>
|
|
<style>
|
|
.bg { fill: #fffdfa; }
|
|
.title { fill: #1e252d; font: 700 42px Arial, sans-serif; }
|
|
.sub { fill: #64707d; font: 26px Arial, sans-serif; }
|
|
.card { stroke-width: 3; }
|
|
.warm { fill: #fff4e8; stroke: #b4432a; }
|
|
.blue { fill: #eef3fa; stroke: #355c9a; }
|
|
.green { fill: #e5f2ed; stroke: #216869; }
|
|
.card-title { fill: #1e252d; font: 700 30px Arial, sans-serif; text-anchor: middle; }
|
|
.card-copy { fill: #44515d; font: 24px Arial, sans-serif; text-anchor: middle; }
|
|
.code { fill: #18385d; font: 700 21px "Courier New", monospace; text-anchor: middle; }
|
|
.note { fill: #65492e; font: 700 28px Arial, sans-serif; text-anchor: middle; }
|
|
.small { fill: #44515d; font: 23px Arial, sans-serif; text-anchor: middle; }
|
|
.arrow { fill: none; stroke: #64707d; stroke-width: 6; marker-end: url(#arrow); }
|
|
</style>
|
|
<marker id="arrow" markerWidth="14" markerHeight="14" refX="11" refY="7" orient="auto">
|
|
<path d="M0,0 L14,7 L0,14 z" fill="#64707d"/>
|
|
</marker>
|
|
</defs>
|
|
|
|
<rect class="bg" width="1200" height="790"/>
|
|
<text class="title" x="70" y="78">Повторный mount: один обработчик</text>
|
|
<text class="title" x="70" y="126">при любом числе вызовов</text>
|
|
<text class="sub" x="70" y="170">Пространство имён отделяет события виджета от остального legacy-кода.</text>
|
|
|
|
<rect class="card warm" x="70" y="245" width="300" height="235" rx="28"/>
|
|
<text class="card-title" x="220" y="300">1. mount(root)</text>
|
|
<text class="card-copy" x="220" y="345">Виджет вызывают</text>
|
|
<text class="card-copy" x="220" y="380">после Ajax, таба</text>
|
|
<text class="card-copy" x="220" y="415">или повторного рендера.</text>
|
|
|
|
<path class="arrow" d="M370 362 H455"/>
|
|
|
|
<rect class="card blue" x="455" y="245" width="300" height="235" rx="28"/>
|
|
<text class="card-title" x="605" y="300">2. Снять только свои</text>
|
|
<text class="code" x="605" y="360">.off('.orderForm')</text>
|
|
<text class="card-copy" x="605" y="410">Соседние click-события</text>
|
|
<text class="card-copy" x="605" y="443">не трогаем.</text>
|
|
|
|
<path class="arrow" d="M755 362 H840"/>
|
|
|
|
<rect class="card green" x="840" y="245" width="290" height="235" rx="28"/>
|
|
<text class="card-title" x="985" y="300">3. Назначить один</text>
|
|
<text class="code" x="985" y="360">.on('click.orderForm')</text>
|
|
<text class="card-copy" x="985" y="410">Новый обработчик</text>
|
|
<text class="card-copy" x="985" y="443">предсказуемо один.</text>
|
|
|
|
<path class="arrow" d="M600 520 V600"/>
|
|
<rect x="180" y="620" width="840" height="90" rx="22" fill="#f3f6f9" stroke="#64707d" stroke-width="2"/>
|
|
<text class="note" x="600" y="660">Проверка: три вызова mount() → одна отправка формы.</text>
|
|
<text class="small" x="600" y="694">Это свойство функции инициализации, а не удача порядка загрузки.</text>
|
|
|
|
<text class="small" x="600" y="755">Схема для статьи о jQuery 3.x и legacy-интерфейсе, май 2018.</text>
|
|
</svg>
|