用 Javascript 和 bootstrap 创建简单 Todo List 应用

Published in

ZZAX

9 min readDec 15, 2018

我们的应用可以分为几个层面：

数据库层面

const tasks = [
  { taskName: "Go To Dentist", isComplete: false },
  { taskName: "Go To ZZAX", isComplete: true },
  { taskName: "Go To Coding", isComplete: false }
];

2. 数据库操作层面

function addTask(taskName) {
  const newTask = {
    taskName,
    isCompleted: false
  };tasks.push(newTask);
}function deleteTask(index) {
  tasks.splice(index, 1);
}function toggleTaskStatus(index) {
  const task = tasks[index];
  task.isComplete = !task.isComplete;
}

3. 界面交互操作层面

function addTaskClicked() {
  const taskName = document.getElementById("taskName").value;
  addTask(taskName);
  renderTasks();
}function toggleTaskStatusClicked(index) {
  toggleTaskStatus(index)
  renderTasks();
}function deleteTaskClicked(index) {
  deleteTask(index)
  renderTasks();
}

4. 渲染页面层面

function renderTasks() {
    const taskHtml = tasks.reduce((html, task, index) => html += generateHtmlForTask(task, index), '');
    document.getElementById('taskList').innerHTML = taskHtml;
}function generateHtmlForTask(task, index) {
  return `
    <li class="list-group-item checkbox">
      <div class="row">
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1 checkbox">
          <label>
            <input type="checkbox" onchange="toggleTaskStatusClicked(${index})" ${task.isComplete ? 'checked' : ''}>
          </label>
        </div>
        <div class="col-md-10 col-xs-10 col-lg-10 col-sm-10 ${task.isComplete ? 'complete' : ''}">
          ${task.taskName}
        </div>
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">
          <a onClick="deleteTaskClicked(${index})">
            <i class="delete-icon glyphicon glyphicon-trash"></i>
          </a>
        </div>
      </div>
    </li>
  `;
}

最后，以上几个 js 片段可以合成一个 index.js 文件。

const tasks = [
  { taskName: "Go To Dentist", isComplete: false },
  { taskName: "Go To ZZAX", isComplete: true },
  { taskName: "Go To Coding", isComplete: false }
];function addTask(taskName) {
  const newTask = {
    taskName,
    isCompleted: false
  };tasks.push(newTask);
}function deleteTask(index) {
  tasks.splice(index, 1);
}function toggleTaskStatus(index) {
  const task = tasks[index];
  task.isComplete = !task.isComplete;
}// Task html-operation layer
function addTaskClicked() {
  const taskName = document.getElementById("taskName").value;
  addTask(taskName);
  renderTasks();
}function toggleTaskStatusClicked(index) {
  toggleTaskStatus(index)
  renderTasks();
}function deleteTaskClicked(index) {
  deleteTask(index)
  renderTasks();
}// Task render utility
function renderTasks() {
    const taskHtml = tasks.reduce((html, task, index) => html += generateHtmlForTask(task, index), '');
    document.getElementById('taskList').innerHTML = taskHtml;
}function generateHtmlForTask(task, index) {
  return `
    <li class="list-group-item checkbox">
      <div class="row">
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1 checkbox">
          <label>
            <input type="checkbox" onchange="toggleTaskStatusClicked(${index})" ${task.isComplete ? 'checked' : ''}>
          </label>
        </div>
        <div class="col-md-10 col-xs-10 col-lg-10 col-sm-10 ${task.isComplete ? 'complete' : ''}">
          ${task.taskName}
        </div>
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">
          <a onClick="deleteTaskClicked(${index})">
            <i class="delete-icon glyphicon glyphicon-trash"></i>
          </a>
        </div>
      </div>
    </li>
  `;
}renderTasks();

然后，我们可以通过 script tag 把上述 index.js 代码导入到 index.html 中从而搭建出我们的 Todo-List App。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ZZAX - TODO List App</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <div class="container"><div class="content-area row">
      <div class="col-md-2 col-xs-2 col-lg-2 col-sm-2"></div><div class="col-md-8 col-xs-8 col-lg-8 col-sm-8">
        <h2>ZZAX todo-list app</h2><div class="row input-area">
          <div class="form-group col-md-9">
            <input class="form-control" id="taskName">
          </div>
          <div class="form-group col-md-1">
            <button class="btn btn-primary" onclick="addTaskClicked()">Add</button>
          </div>
        </div><ul class="list-group" id="taskList"></ul>
      </div><div class="col-md-2 col-xs-2 col-lg-2 col-sm-2"></div>
    </div></div><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="./index.js"></script>
</body>
</html>

如果大家对于上述代码有任何疑问，欢迎来联系我们鸭！还有关注一下我们的公众号鸭！

用 Javascript 和 bootstrap 创建简单 Todo List 应用

Written by ZZAX