为什么JavaScript会吞噬HTML：代码示例

Likbez：HTML，CSS和JavaScript

HTML：用于结构和语义

CSS：改变外观

JavaScript：实现行为

命令式与声明式编程

• . «» , . ( ) : , , . , , . - «». Vanilla JavaScript , jQuery. JavaScript .
  
  • « X, Y, Z».
  • : , .selected; , .selected.

• . , . , , «» (), , - . , . (, React), , , . , , , , . , :
  
  • « XYZ. , , .
  • 示例：如果用户选择了此元素，则该元素具有.selected类。
  
  

HTML是一种声明性语言

<section>
  <h1>Hello</h1>
  <p>My name is Mike.</p>
</section>

1. 创建一个section元素。
2. 创建一个1级标题元素（h1）。
3. 将标题元素文本设置为“ Hello”。
4. 将title元素放置在section元素中。
5. 创建一个段落元素（p）。
6. 将段落元素的文本设置为“我的名字是麦克”。
7. 将段落元素放置在section元素中。
8. 将section元素放置在HTML文档中。
9. 在屏幕上显示文档。

JavaScript是命令式语言

• 标记标志的列表，选中后每行颜色会改变；
• 下面的文本，例如“ 1 of 4 selected”（当选择标志时应更新）；
• 全选按钮，如果已经选中所有复选框，则应禁用该按钮；
• 选择无按钮，如果未选中复选框，则应禁用该按钮。

const captionText = document.getElementById('caption-text');
const checkAllButton = document.getElementById('check-all-button');
const uncheckAllButton = document.getElementById('uncheck-all-button');
const checkboxes = document.querySelectorAll('input[type="checkbox"]');

function updateSummary() {
  let numChecked = 0;
  checkboxes.forEach(function(checkbox) {
    if (checkbox.checked) {
      numChecked++;
    }
  });
  captionText.innerHTML = `${numChecked} of ${checkboxes.length} checked`;
  if (numChecked === 0) {
    checkAllButton.disabled = false;
    uncheckAllButton.disabled = true;
  } else {
    uncheckAllButton.disabled = false;
  }
  if (numChecked === checkboxes.length) {
    checkAllButton.disabled = true;
  }
}

checkAllButton.addEventListener('click', function() {
  checkboxes.forEach(function(checkbox) {
    checkbox.checked = true;
    checkbox.closest('tr').className = 'checked';
  });
  updateSummary();
});

uncheckAllButton.addEventListener('click', function() {
  checkboxes.forEach(function(checkbox) {
    checkbox.checked = false;
    checkbox.closest('tr').className = '';
  });
  updateSummary();
});

checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function(event) {
    checkbox.closest('tr').className = checkbox.checked ? 'checked' : '';
    updateSummary();
  });
});

头痛

• 有四个行元素（一个表的一行，它是一个列表），每个元素都包含一个标志。第三个标志被检查。

• 文本为“已选择4个中的1个”。

• 有一个全选按钮已打开。

• 有一个全选按钮，已禁用。

• 找到包含复选框的行，然后将.selected CSS类添加到其中。

• 在列表中找到所有标志，并计算其中有多少标志，没有多少标志。

• 查找文本并进行更新，以指示所选购买的正确数量及其总数。

• 找到“全选”按钮，然后将其打开（如果已禁用）。

• 如果现在选中所有复选框，请找到“全选”按钮并将其关闭。

• 找到包含标志的行，然后从中删除.selected类。

• 在列表中找到所有复选框，并计算选中了多少复选框，未选中的复选框。

• 查找简历文本项，并使用已验证的数字和总数进行更新。

• 找到“全选”按钮，然后将其打开（如果已禁用）。

• 如果未选中所有复选框，请找到“全选”按钮并将其关闭。

• 在列表中找到所有复选框并标记它们。

• 在列表中找到所有行，然后向其添加.selected类。

• 查找文本并进行更新。

• 找到全选按钮并将其关闭。

• 找到“全选”按钮并将其打开。

• 在列表中找到所有复选框，然后清除所有复选框。

• 在列表中找到所有行，然后从中删除.selected类。

• 找到简历文本元素并进行更新。

• 找到全选按钮并将其打开。

• 找到“全选”按钮并将其关闭。

我们正在寻找真理的源头

告诉我你想要什么（你真正想要的）

• 有一个称为checkboxValues的true / false值列表，显示了被标记的字段。
  
  • 示例：checkboxValues \ u003d [false，false，true，false]
  • 此列表显示我们有四个标志，只有第三个被设置。

• 对于表格中checkboxValues中的每个值，都有一行：
  
  • 如果值为true，则具有一个名为.selected的CSS类，并且
  • 包含一个标志，检查该标志是否为true。

• 有一个文本元素，其中包含文本``选择的{y}的文本{x}，其中{x}是checkboxValues中真实值的数量，{y}是checkboxValues中值的总数。
• 如果checkboxValues的值为假，则启用全选按钮。
• Select None, , checkboxValues ​​ true.
• , checkboxValues.
• Select All , checkboxValues ​​ true.
• Select None checkboxValues ​​ false.

function ChecklistTable({ columns, rows, initialValues, ...otherProps }) {
  const [checkboxValues, setCheckboxValues] = React.useState(initialValues);
  
  function checkAllBoxes() {
    setCheckboxValues(new Array(rows.length).fill(true));
  }
  
  function uncheckAllBoxes() {
    setCheckboxValues(new Array(rows.length).fill(false));
  }
  
  function setCheckboxValue(rowIndex, checked) {
    const newValues = checkboxValues.slice();
    newValues[rowIndex] = checked;
    setCheckboxValues(newValues);
  }
  
  const numItems = checkboxValues.length;
  const numChecked = checkboxValues.filter(Boolean).length;
  
  return (
    <table className="pf-c-table pf-m-grid-lg" role="grid" {...otherProps}>
      <caption>
        <span>{numChecked} of {numItems} items checked</span>
        <button
          onClick={checkAllBoxes}
          disabled={numChecked === numItems}
          className="pf-c-button pf-m-primary"
          type="button"
        >
          Check all
        </button>
        <button
          onClick={uncheckAllBoxes}
          disabled={numChecked === 0}
          className="pf-c-button pf-m-secondary"
          type="button"
        >
          Uncheck all
        </button>
      </caption>
      <thead>
        <tr>
          <td />
          {columns.map(function(column) {
            return <th scope="col" key={column}>{column}</th>;
          })}
        </tr>
      </thead>
      <tbody>
        {rows.map(function(row, rowIndex) {
          const [firstCell, ...otherCells] = row;
          const labelId = `item-${rowIndex}-${firstCell}`;
          const isChecked = checkboxValues[rowIndex];
          return (
            <tr key={firstCell} className={isChecked ? 'checked' : ''}>
              <td className="pf-c-table__check">
                <input
                  type="checkbox"
                  name={firstCell}
                  aria-labelledby={labelId}
                  checked={isChecked}
                  onChange={function(event) {
                    setCheckboxValue(rowIndex, event.target.checked);
                  }}
                />
              </td>
              <th data-label={columns[0]}>
                <div id={labelId}>{firstCell}</div>
              </th>
              {otherCells.map(function(cell, cellIndex) {
                return (
                  <td key={cell} data-label={columns[1 + cellIndex]}>
                    {cell}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

function ShoppingList() {
  return (
    <ChecklistTable
      aria-label="Shopping list"
      columns={['Item', 'Quantity']}
      rows={[
        ['Sugar', '1 cup'],
        ['Butter', '½ cup'],
        ['Eggs', '2'],
        ['Milk', '½ cup'],
      ]}
      initialValues={[false, false, true, false]}
    />
  );
}

ReactDOM.render(
  <ShoppingList />,
  document.getElementById('shopping-list')
);

JavaScript击败HTML：饿死了

现代方法的优点：可预测性，可重用性和组合性

相同的JavaScript，仅在配置文件中

有意识的需求与无意识的趋势