Web 框架的替代方案

<style>    label.error { display: none; }    .app.has-error label.error {display: block; }style><label class="error">Messagelabel>
<script>   app.classList.toggle('has-error', true);script>

const [errorMessage, setErrorMessage] = useState(null);return <label className="error">{errorMessage}label>

<form name="contactForm">  <fieldset name="email">     <output name="error">output>  fieldset>form>
<script>  function setErrorMessage(message) {  document.forms.contactForm.elements.email.elements.error.value = message;  }script>

interface Contact {  id: string;  name: string;  email: string;  subscriber: boolean;}
function updateContact(contact: Contact) { … }

<form name="contactForm">  <input name="id" type="hidden" value="136" />  <input name="email" type="email"/>  <input name="name" type="string" />  <input name="subscriber" type="checkbox" />form>
<script>   updateContact(Object.fromEntries(       new FormData(document.forms.contactForm));script>

<form name="contactForm">  <input name="showErrors" type="checkbox" hidden />  <fieldset name="names">     <input name="name" />     <output name="error">output>  fieldset>  <fieldset name="emails">     <input name="email" />     <output name="error">output>  fieldset>form>
<script>  function setErrorMessage(section, message) {  document.forms.contactForm.elements[section].elements.error.value = message;  }  function setShowErrors(show) {  document.forms.contactForm.elements.showErrors.checked = show;  }script>
<style>   input[name="showErrors"]:not(:checked) ~ * output[name="error"] {      display: none;   }style>

interface Contact {  id: string;  name: string;  email: string;}// "Observe" Directioninterface ContactListModelObserver {  onAdd(contact: Contact);  onRemove(contact: Contact);  onUpdate(contact: Contact);}// "Intent" Directioninterface ContactListModel {  add(contact: Contact);  remove(contact: Contact);  reloadFromServer();  }

<ul id="names">  <template>   <li><label class="name" />li>  template>ul><script>  function addName(name) {    const list = document.querySelector('#names');    const item = list.querySelector('template').content.cloneNode(true).firstElementChild;    item.querySelector('label').innerText = name;    list.appendChild(item);  }script>

interface Task {   title: string;   completed: boolean;}
interface TaskModelObserver {   onAdd(key: number, value: Task);   onUpdate(key: number, value: Task);   onRemove(key: number);   onCountChange(count: {active: number, completed: number});}
interface TaskModel {   constructor(observer: TaskModelObserver);   createTask(task: Task): void;   updateTask(key: number, task: Task): void;   deleteTask(key: number): void;   clearCompleted(): void;   markAll(completed: boolean): void;}

<section class="todoapp">   <header class="header">       <h1>todosh1>       <form name="newTask">           <input name="title" type="text" placeholder="What needs to be done?" autofocus>       form>   header>
   <main>       <form id="main">form>       <input type="hidden" name="filter" form="main" />       <input type="hidden" name="completedCount" form="main" />       <input type="hidden" name="totalCount" form="main" />       <input name="toggleAll" type="checkbox" form="main" />
       <ul class="todo-list">           <template>               <form class="task">                   <li>                       <input name="completed" type="checkbox" checked>                       <input name="title" readonly />                       <input type="submit" hidden name="save" />                       <button name="destroy">Xbutton>                   li>               form>           template>       ul>   main>
   <footer>       <output form="main" name="activeCount">0output>       <nav>           <a name="/" href="#/">Alla>           <a name="/active" href="#/active">Activea>           <a name="/completed" href="#/completed">Completeda>       nav>       <input form="main" type="button" name="clearCompleted" value="Clear completed" />   footer>section>

import TaskListModel from './model.js';
const model = new TaskListModel(new class {

onAdd(key, value) {   const newItem = document.querySelector('.todo-list template').content.cloneNode(true).firstElementChild;   newItem.name = `task-${key}`;   const save = () => model.updateTask(key,  Object.fromEntries(new FormData(newItem)));   newItem.elements.completed.addEventListener('change', save);   newItem.addEventListener('submit', save);   newItem.elements.title.addEventListener('dblclick', ({target}) => target.removeAttribute('readonly'));   newItem.elements.title.addEventListener('blur', ({target}) => target.setAttribute('readonly', ''));   newItem.elements.destroy.addEventListener('click', () => model.deleteTask(key));   this.onUpdate(key, value, newItem);   document.querySelector('.todo-list').appendChild(newItem);}

onUpdate(key, {title, completed}, form = document.forms[`task-${key}`]) {   form.elements.completed.checked = !!completed;   form.elements.title.value = title;   form.elements.title.blur();}

onRemove(key) { document.forms[`task-${key}`].remove(); }

onCountChange({active, completed}) {   document.forms.main.elements.completedCount.value = completed;   document.forms.main.elements.toggleAll.checked = active === 0;   document.forms.main.elements.totalCount.value = active + completed;   document.forms.main.elements.activeCount.innerHTML = `${active} item${active === 1 ? '' : 's'} left`;}

const updateFilter = () => filter.value = location.hash.substr(2);window.addEventListener('hashchange', updateFilter);window.addEventListener('load', updateFilter);

document.querySelector('.todoapp').addEventListener('submit', e => e.preventDefault(), {capture: true});

document.forms.newTask.addEventListener('submit', ({target: {elements: {title}}}) =>       model.createTask({title: title.value}));document.forms.main.elements.toggleAll.addEventListener('change', ({target: {checked}})=>    model.markAll(checked));document.forms.main.elements.clearCompleted.addEventListener('click', () =>    model.clearCompleted());

.task:not(:hover, :focus-within) button[name="destroy"] { opacity: 0 }

.todoapp input[name="filter"][value=""] ~ footer a[href$="#/"] 。nav a:target {   border-color: #CE4646;}

.task input[name="title"]:read-only {…}
.task input[name="title"]:not(:read-only) {…}

input[name="filter"][value="active"] ~ * .task      :is(input[name="completed"]:checked, input[name="completed"]:checked ~ *),input[name="filter"][value="completed"] ~ * .task     :is(input[name="completed"]:not(:checked), input[name="completed"]:not(:checked) ~ *) {   display: none;}