21 lines
3.9 KiB
XML
21 lines
3.9 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
|
|
<title id="title">Учебная pipeline от DOM contract к вопросам для записи</title>
|
|
<desc id="desc">Пять последовательных блоков JS mutation, style, layout, paint и composite. Под каждым блоком указан вопрос к выбранному диапазону записи. Пунктирная рамка отмечает, что это модель, а не обязательные имена событий браузера.</desc>
|
|
<defs><marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0 0L10 5L0 10Z" fill="#68d6b0"/></marker></defs>
|
|
<rect width="1200" height="720" fill="#0b1722"/>
|
|
<text x="60" y="70" fill="#f3fbff" font-family="Arial, sans-serif" font-size="36" font-weight="700">Не «виновник», а последовательность вопросов</text>
|
|
<text x="60" y="108" fill="#b8d6e8" font-family="Arial, sans-serif" font-size="22">DOM contract сначала, trace range потом, изменение — только после гипотезы</text>
|
|
<rect x="44" y="142" width="1112" height="410" rx="22" fill="none" stroke="#4d7593" stroke-width="3" stroke-dasharray="12 10"/>
|
|
<text x="72" y="180" fill="#8ed6ff" font-family="Arial, sans-serif" font-size="20">LABELS УЧЕБНОЙ МОДЕЛИ, НЕ ОБЯЗАТЕЛЬНЫЕ EVENT NAMES</text>
|
|
<g font-family="Arial, sans-serif">
|
|
<rect x="70" y="230" width="184" height="218" rx="16" fill="#173d57"/><text x="91" y="276" fill="#f4fcff" font-size="24" font-weight="700">JS mutation</text><text x="91" y="320" fill="#b9eaff" font-size="19">Что записал</text><text x="91" y="347" fill="#b9eaff" font-size="19">handler?</text><text x="91" y="408" fill="#85d5ff" font-size="20">className X → Y</text>
|
|
<rect x="282" y="230" width="184" height="218" rx="16" fill="#195047"/><text x="333" y="276" fill="#effff9" font-size="24" font-weight="700">style</text><text x="303" y="320" fill="#bff4de" font-size="19">Какой selector</text><text x="303" y="347" fill="#bff4de" font-size="19">state изменён?</text><text x="322" y="408" fill="#8de0bb" font-size="20">вопрос к range</text>
|
|
<rect x="494" y="230" width="184" height="218" rx="16" fill="#5d4b27"/><text x="543" y="276" fill="#fff9e2" font-size="24" font-weight="700">layout</text><text x="515" y="320" fill="#ffeba5" font-size="19">Какая geometry</text><text x="515" y="347" fill="#ffeba5" font-size="19">стала нужна?</text><text x="534" y="408" fill="#ffd56c" font-size="20">не verdict</text>
|
|
<rect x="706" y="230" width="184" height="218" rx="16" fill="#653a36"/><text x="762" y="276" fill="#fff1ed" font-size="24" font-weight="700">paint</text><text x="727" y="320" fill="#ffc8bd" font-size="19">Какой visual</text><text x="727" y="347" fill="#ffc8bd" font-size="19">area обновился?</text><text x="746" y="408" fill="#ffab9b" font-size="20">проверить факт</text>
|
|
<rect x="918" y="230" width="184" height="218" rx="16" fill="#44376b"/><text x="937" y="276" fill="#f8f2ff" font-size="24" font-weight="700">composite</text><text x="939" y="320" fill="#ddcffd" font-size="19">Какая финальная</text><text x="939" y="347" fill="#ddcffd" font-size="19">работа видна?</text><text x="956" y="408" fill="#cbb9ff" font-size="20">не «дёшево»</text>
|
|
</g>
|
|
<path d="M254 339H274M466 339H486M678 339H698M890 339H910" stroke="#68d6b0" stroke-width="4" marker-end="url(#arrow)"/>
|
|
<rect x="70" y="594" width="1030" height="70" rx="14" fill="#122b38"/>
|
|
<text x="98" y="638" fill="#d4f6e9" font-family="Arial, sans-serif" font-size="24">Факт записи + DOM result → один owner → обратимое действие → повтор того же сценария</text>
|
|
</svg>
|
