javascript制作官网源码（用纯JavaScript写一个简单的MVC）

我写了些CSS让它看起来更加可被接受，你可以通过连接找到它，并且放在style.css中保存。我不会再写更多关于CSS的东西，因为它不是本文的焦点。

好了，现在我们有了HTML和CSS，所以是时候开始写这个应用程序了。

我们将使它变得非常好用和简单，以了解哪些类对应MVC的哪部分。

我将创建一个Model类，一个View类和一个Controller类，它们将包含model和view。该应用是控制器的一个实例。

如果你不熟悉类是怎么工作的，先去读下Understanding Classes in JavaScript文章

brclass Model {br constructor() {}br}brbrclass View {br constructor() {}br}brbrclass Controller {br constructor(model, view) {br this.model = modelbr this.view = viewbr }br}brbrconst app = new Controller(new Model(), new View())br复制代码

非常棒，而且抽象。

Model

我们先来处理model先，因为它是三部分中最简单的。它并不涉及任何事件和DOM操作。它只是存储和修改数据。

br// Modelbrclass Model {br constructor() {br // The state of the model, an array of todo objects, prepopulated with some databr this.todos = [br { id: 1, text: 'Run a marathon', complete: false },br { id: 2, text: 'Plant a garden', complete: false },br ]br }brbr addTodo(todoText) {br const todo = {br id: this.todos.length > 0 ? this.todos[this.todos.length - 1].id 1 : 1,br text: todoText,br complete: false,br }brbr this.todos.push(todo)br }brbr // Map through all todos, and replace the text of the todo with the specified idbr editTodo(id, updatedText) {br this.todos = this.todos.map(todo =>br todo.id === id ? { id: todo.id, text: updatedText, complete: todo.complete } : todobr )br }brbr // Filter a todo out of the array by idbr deleteTodo(id) {br this.todos = this.todos.filter(todo => todo.id !== id)br }brbr // Flip the complete boolean on the specified todobr toggleTodo(id) {br this.todos = this.todos.map(todo =>br todo.id === id ? { id: todo.id, text: todo.text, complete: !todo.complete } : todobr )br }br}br复制代码

我们有一个 addTodo， editTodo， deleteTodo 和 toggleTodo。 这些应该都很容易解析 - 添加一个新的待办事项到数组，编辑查找要编辑的待办事项的ID并替换它，删除并过滤器筛选出数组中的待办事项，以及切换complete的布尔值。

因为我们都是在浏览器中进行此操作，并且可以从window(golbal)中访问应用程序，因此你可以轻松地进行测试，键入以下内容：

brapp.model.addTodo('Take a nap')br复制代码

上面的命令行将添加一件待办事项到列表中，你可以打印出app.model.todos查看。

这对于当前的model已经足够了。最后，我们将待办事项存储在local storage中，使其成为永久性文件，但目前，待办事项只要刷新页面就可以刷新了。

如我们所见，model只是处理实际的数据，并修改数据。它不了解或不知道输入 - 正在修改的内容，或输出 - 最终将显示的内容。

此时，如果你通过控制台手动键入所有操作并在控制台中查看输出，则你的app具备了功能全面的CRUD。

View

我们将通过操作DOM（文档对象模型）来创建视图。由于我们在没有React的JSX或模版语言的情况下使用纯JavaScript进行此操作的，因此它有些冗长和丑陋，但是这就是直接操作DOM的本质。

controller和model都不应该了解有关DOM、HTML元素、CSS或者其他方面的信息。任何与这些信息相关的东西都应该在view层。

如果你不熟悉DOM或DOM与HTML源码有何不同，阅读下Introduction to the DOM文章。

我要做的第一件事情就是创建辅助方法检索一个元素并创建一个元素。

br// Viewbrclass View {br constructor() {}brbr // Create an element with an optional CSS classbr createElement(tag, className) {br const element = document.createElement(tag)br if (className) element.classList.add(className)brbr return elementbr }brbr // Retrieve an element from the DOMbr getElement(selector) {br const element = document.querySelector(selector)brbr return elementbr }br}br复制代码

到目前为止一切顺利。在构造器中，我将设置我所需的全部内容。那将会：

• 应用程序的根元素 - #root
• 标题 - h1
• 一个表单，输入框和提交按钮去添加事项 - form，input，button
• 待办列表 - ul

我将使它们成为构造函数中的所有变量，以便我们可以轻松地引用它们。

br// Viewbrclass View {br constructor() {br // The root elementbr this.app = this.getElement('#root')brbr // The title of the appbr this.title = this.createElement('h1')br this.title.textContent = 'Todos'brbr // The form, with a [type="text"] input, and a submit buttonbr this.form = this.createElement('form')brbr this.input = this.createElement('input')br this.input.type = 'text'br this.input.placeholder = 'Add todo'br this.input.name = 'todo'brbr this.submitButton = this.createElement('button')br this.submitButton.textContent = 'Submit'brbr // The visual representation of the todo listbr this.todoList = this.createElement('ul', 'todo-list')brbr // Append the input and submit button to the formbr this.form.append(this.input, this.submitButton)brbr // Append the title, form, and todo list to the appbr this.app.append(this.title, this.form, this.todoList)br }br // ...br}br复制代码

现在，视图不变的部分已经设置好。

编辑

搜图

两个小事情 - 输入（新待办事项）值的获取和重置。

我在方法名称中使用下划线表示它们是私有（本地）的方法，不会在类外部使用。

br// Viewbrget _todoText() {br return this.input.valuebr}brbr_resetInput() {br this.input.value = ''br}br复制代码

现在所有的设置已经完成了。最复杂的部分是显示待办事项列表，这是每次更改待办事项都会更改的部分。

br// ViewbrdisplayTodos(todos) {br // ...br}br复制代码

displayTodos方法将创建待办事项列表所组成的ul和li，并显示它们。每次更改，添加，或者删除待办事项时，都会使用模型中的待办事项todos，再次调用displayTodos方法，重置列表并显示它们。这将使得视图和模型的状态保持同步。

我们要做的第一件事是每次调用时都会删除所有待办事项的节点。然后我们将检查是否有待办事项。如果没有，我们将显示一个空列表消息。

br// Viewbr// Delete all nodesbrwhile (this.todoList.firstChild) {br this.todoList.removeChild(this.todoList.firstChild)br}brbr// Show default messagebrif (todos.length === 0) {br const p = this.createElement('p')br p.textContent = 'Nothing to do! Add a task?'br this.todoList.append(p)br} else {br // ...br}br复制代码

现在，我们将遍历待办事项，并为每个现有待办事项显示一个复选框，span和删除按钮。

br// Viewbrelse {br // Create todo item nodes for each todo in statebr todos.forEach(todo => {br const li = this.createElement('li')br li.id = todo.idbrbr // Each todo item will have a checkbox you can togglebr const checkbox = this.createElement('input')br checkbox.type = 'checkbox'br checkbox.checked = todo.completebrbr // The todo item text will be in a contenteditable spanbr const span = this.createElement('span')br span.contentEditable = truebr span.classList.add('editable')brbr // If the todo is complete, it will have a strikethroughbr if (todo.complete) {br const strike = this.createElement('s')br strike.textContent = todo.textbr span.append(strike)br } else {br // Otherwise just display the textbr span.textContent = todo.textbr }brbr // The todos will also have a delete buttonbr const deleteButton = this.createElement('button', 'delete')br deleteButton.textContent = 'Delete'br li.append(checkbox, span, deleteButton)brbr // Append nodes to the todo listbr this.todoList.append(li)br })br}br复制代码

现在视图和模型都设置好了。我们只是还没办法连接它们 - 没有事件监听用户的输入，也没有处理程序来处理此类事件的输出。

控制台仍然作为临时控制器存在，你可以通过它添加和删除待办事项。

编辑

搜图

Controller

最后，控制器是模型（数据）和视图（用户所见）之间的连接。到目前为止，下面就是控制器中的内容。

br// Controllerbrclass Controller {br constructor(model, view) {br this.model = modelbr this.view = viewbr }br}br复制代码

视图和模型之间的第一个连接是创建一个方法，该方法在每次待办事项更改时调用displayTodos。我们也可以在构造函数中调用一次，以显示初始待办事项，如果有。

br// Controllerbrclass Controller {br constructor(model, view) {br this.model = modelbr this.view = viewbrbr // Display initial todosbr this.onTodoListChanged(this.model.todos)br }brbr onTodoListChanged = todos => {br this.view.displayTodos(todos)br }br}br复制代码

触发事件之后，控制器将对其进行处理。当你提交新的待办事项，单击删除按钮或单击待办事项的复选框时，将触发一个事件。视图必须监听那些事件，因为它是视图中用户的输入，但是它将把响应该事件将要发生的事情责任派发到控制器。

我们将在控制器中为事项创建处理程序。

br// ViewbrhandleAddTodo = todoText => {br this.model.addTodo(todoText)br}brbrhandleEditTodo = (id, todoText) => {br this.model.editTodo(id, todoText)br}brbrhandleDeleteTodo = id => {br this.model.deleteTodo(id)br}brbrhandleToggleTodo = id => {br this.model.toggleTodo(id)br}br复制代码

设置事件监听器

现在我们有了这些处理程序，但是控制器仍然不知道何时调用它们。我们必须将事件监听器放在视图的DOM元素上。我们将响应表单上的submit事件，然后单击click并更改change待办事项列表上的事件。（由于略为复杂，我这里略过"编辑"）。

br// ViewbrbindAddTodo(handler) {br this.form.addEventListener('submit', event => {br event.preventDefault()brbr if (this._todoText) {br handler(this._todoText)br this._resetInput()br }br })br}brbrbindDeleteTodo(handler) {br this.todoList.addEventListener('click', event => {br if (event.target.className === 'delete') {br const id = parseInt(event.target.parentElement.id)brbr handler(id)br }br })br}brbrbindToggleTodo(handler) {br this.todoList.addEventListener('change', event => {br if (event.target.type === 'checkbox') {br const id = parseInt(event.target.parentElement.id)brbr handler(id)br }br })br}br复制代码

我们需要从视图中调用处理程序，因此我们将监听事件的方法绑定到视图。

我们使用箭头函数来处理事件。这允许我们直接使用controller的上下文this来调用view中的表单。如果你不使用箭头函数，我们需要手动bind绑定它们，比如this.view.bindAddTodo(this.handleAddTodo.bind(this))。咦～

br// Controllerbrthis.view.bindAddTodo(this.handleAddTodo)brthis.view.bindDeleteTodo(this.handleDeleteTodo)brthis.view.bindToggleTodo(this.handleToggleTodo)br// this.view.bindEditTodo(this.handleEditTodo) - We'll do this one lastbr复制代码

现在，当一个submit,click或者change事件在特定的元素中触发，相应的处理事件将被唤起。

响应模型中的回调

我们遗漏了一些东西 - 事件正在监听，处理程序被调用，但是什么也没有发生。这是因为模型不知道视图应该更新，也不知道如何进行视图的更新。我们在视图上有displayTodos方法来解决此问题，但是如前所述，模型和视图不互通。

就像监听起那样，模型应该触发回来控制器这里，以便其知道发生了某些事情。

我们已经在控制器上创建了onTodoListChanged方法来处理此问题，我们只需要使模型知道它就可以了。我们将其绑定到模型上，就像绑定到视图的方式一样。

在模型上，为onTodoListChanged添加bindTodoListChanged方法。

br// ModelbrbindTodoListChanged(callback) {br this.onTodoListChanged = callbackbr}br复制代码

然后将其绑定到控制器中，就像与视图一样。

br// Controllerbrthis.model.bindTodoListChanged(this.onTodoListChanged)br复制代码

现在，在模型中的每个方法之后，你将调用onTodoListChanged回调。

br// ModelbrdeleteTodo(id) {br this.todos = this.todos.filter(todo => todo.id !== id)brbr this.onTodoListChanged(this.todos)br}br复制代码

添加 local storage

至此，该应用程序已基本完成，所有概念都已演示。通过将数据持久保存在浏览器的本地存储中，我们可以使其更加持久，因此刷新后将在本地持久保存。

如果你不熟悉local storage是怎么工作的，阅读下How to Use Local Storage with JavaScript文章。

现在，我们可以将初始化待办事项设置为本地存储或空数组中的值。

br// Modelbrclass Model {br constructor() {br this.todos = JSON.parse(localStorage.getItem('todos')) || []br }br}br复制代码

我们将创建一个commit的私有方法来更新localStorage的值，作为模型的状态。

br_commit(todos) {br this.onTodoListChanged(todos)br localStorage.setItem('todos', JSON.stringify(todos))br}br复制代码

在每次this.todos发生更改之后，我们可以调用它。

brdeleteTodo(id) {br this.todos = this.todos.filter(todo => todo.id !== id)brbr this._commit(this.todos)br}br复制代码

添加实时编辑功能

这个难题的最后一部分是编现有待办事项的能力。与添加和删除相比，编辑总是有些棘手。我想简化它，不需要编辑按钮，用输入框input或其他来代替span。我们也不想每次输入时都调用editTodo，因为它将渲染整个待办事项列表UI。

我决定在视图上创建一个方法，用新的编辑值更新一个临时状态变量，然后在视图中创建一个方法，该方法在控制器中调用handleEditTodo方法来更新模型。输入事件是当你键入contenteditable元素时触发事件，而foucesout在你离开contenteditable元素时候触发的事件。

br// Viewbrconstructor() {br // ...br this._temporaryTodoTextbr this._initLocalListeners()br}brbr// Update temporary statebr_initLocalListeners() {br this.todoList.addEventListener('input', event => {br if (event.target.className === 'editable') {br this._temporaryTodoText = event.target.innerTextbr }br })br}brbr// Send the completed value to the modelbrbindEditTodo(handler) {br this.todoList.addEventListener('focusout', event => {br if (this._temporaryTodoText) {br const id = parseInt(event.target.parentElement.id)brbr handler(id, this._temporaryTodoText)br this._temporaryTodoText = ''br }br })br}br复制代码

现在，当你单击任何待办事项时，你将进入"编辑"模式，这将更新临时临时状态变量，并且在你选择或者单击离开待办事件时，它将保存在模型中并重置临时状态。 只需要确保绑定editTodo处理程序就可以。

brthis.view.bindEditTodo(this.handleEditTodo)br复制代码

该contenteditable解决方案得以快速实施。在生产环境中使用contenteditable时，你需要考虑各种问题，many of which I've written about here

总结

现在实现它了。使用纯JavaScript的无依赖待办事项应用程序，演示了模型-视图-控制器结构的概念。下面再次放出完整案例和源码地址。

• View demo
• View source

小Demo

翻译到此结束，上面是经典的todo list展示，引入localstorage也许有些不好理解。我们来个小的案例巩固下：

br<html lang="en">br<head>br <meta charset="UTF-8">br <meta name="viewport" content="width=device-width, initial-scale=1.0">br <title>demo</title>br</head>br<body>br <div id="root"></div>br</body>br<script>br class Model {br constructor() {br this.count = 0br }br increastCount() {br this.count = 1br console.log(this.count)br this.showCount(this.count)br }br bindCountChange(cb) {br this.showCount = cbbr }br }br class View {br constructor() {br this.app = document.querySelector('#root')br this.div = document.createElement('div')br this.button = document.createElement('button')br this.button.textContent = 'increase'br this.button.classList = 'increase'br this.app.append(this.div)br this.app.append(this.button)br }brbr bindIncrease(handler) {br this.button.addEventListener('click', event => {br if(event.target.className === 'increase') {br handler()br }br })br }brbr displayCount(count) {br this.div.textContent = `current count is ${count}`br }br }br class Controller {br constructor(model, view) {br this.model = modelbr this.view = viewbrbr this.model.bindCountChange(this.showCount)br this.view.bindIncrease(this.handleIncrease)brbr this.showCount(this.model.count)br }brbr handleIncrease = () => {br this.model.increastCount()br }brbr showCount = count => {br this.view.displayCount(count)br }br }br const app = new Controller(new Model(), new View())br</script>br</html>br复制代码

上面实现的功能是点击increase按钮递增数字，如下动图：

,