MVC模式的本质

于 2019-10-06 19:22:50 发布
阅读量328 收藏 1
点赞数 1
分类专栏： web相关 文章标签： 前端 设计模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37051465/article/details/102244885
版权

总述

MVC模式的本质

参考文章：
Writing a Simple MVC App in Plain JavaScript
用纯Javascript撸一个MVC程序

上代码：

<!--html部分-->
<!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>Todo App</title>

    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="root"></div>

    <script src="script.js"></script>
  </body>
</html>

样式：直接复制就行了不用看

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  font-family: sans-serif;
  font-size: 1rem;
  color: #444;
}

#root {
  max-width: 450px;
  margin: 2rem auto;
  padding: 0 1rem;
}

form {
  display: flex;
  margin-bottom: 2rem;
}

[type="text"],
button {
  display: inline-block;
  -webkit-appearance: none;
  padding: .5rem 1rem;
  font-size: 1rem;
  border: 2px solid #ccc;
  border-radius: 4px;
}

button {
  cursor: pointer;
  background: #007bff;
  color: white;
  border: 2px solid #007bff;
  margin: 0 .5rem;
}

[type="text"] {
  width: 100%;
}

[type="text"]:active,
[type="text"]:focus {
  outline: 0;
  border: 2px solid #007bff;
}

[type="checkbox"] {
  margin-right: 1rem;
  font-size: 2rem;
}

h1 {
  color: #222;
}

ul {
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #f4f4f4;
  border-radius: 4px;
}

li span {
  display: inline-block;
  padding: .5rem;
  width: 250px;
  border-radius: 4px;
  border: 2px solid transparent;
}

li span:hover {
  background: rgba(179, 215, 255, 0.52);
}

li span:focus {
  outline: 0;
  border: 2px solid #007bff;
  background: rgba(179, 207, 255, 0.52)
}

核心代码：

/**
 * @Class Model
 *
 * 管理应用的数据
 */
class Model {
    constructor() {
        //从 localStorage 里面取值
        this.todos = JSON.parse(localStorage.getItem('todos')) || [];
    }

    bindTodoListChanged(callback) {
        this.onTodoListChanged = callback;
    }

    //保存在本地
    _commit(todos) {
        this.onTodoListChanged(todos);
        localStorage.setItem('todos', JSON.stringify(todos))
    }

    addTodo(todoText) {
        const todo = {
            id: this.todos.length > 0 ? this.todos[this.todos.length - 1].id + 1 : 1,
            text: todoText,
            complete: false,
        };

        this.todos.push(todo);

        this._commit(this.todos);
    }

    editTodo(id, updatedText) {
        this.todos = this.todos.map(todo =>
            todo.id === id
                ? {id: todo.id, text: updatedText, complete: todo.complete}
                : todo
        );
        this._commit(this.todos)
    }

    deleteTodo(id) {
        this.todos = this.todos.filter(todo => todo.id !== id);

        this._commit(this.todos)
    }

    toggleTodo(id) {
        this.todos = this.todos.map(todo =>
            todo.id === id
                ? {id: todo.id, text: todo.text, complete: !todo.complete}
                : todo
        );

        this._commit(this.todos)
    }
}

/**
 * @class View
 * model层的可视化展示
 */
class View {
    constructor() {
        //创造DOM树需要展示的各种节点
        //DOM树根节点
        this.app = this.getElement("#root");

        //heading
        this.title = this.createElement("h1");
        this.title.textContent = "Todos";

        //form
        this.form = this.createElement("form");
        //form content
        this.input = this.createElement("input");
        this.input.type = "text";
        this.input.placeholder = "Add todo";
        this.input.name = "todo";
        //add button
        this.submitButton = this.createElement("button");
        this.submitButton.textContent = "Submit";
        this.form.append(this.input, this.submitButton);
        //todo things List
        this.todoList = this.createElement("ul", "todo-list");
        this.app.append(this.title, this.form, this.todoList);

        this._temporaryTodoText = '';
        this._initLocalListeners()
    }

    //获得输入的input 的 value
    get _todoText() {
        return this.input.value;
    }

    //重置
    _resetInput() {
        this.input.value = "";
    }

    //重载createElement 方法
    createElement(tag, className) {
        const element = document.createElement(tag);
        if (className) {
            element.classList.add(className);
        }
        return element;
    }

    //根据selector 获得 节点
    getElement = selector => document.querySelector(selector);

    //Todo 列表的展示
    displayTodos(todos) {
        //先删除所有的子节点元素
        while (this.todoList.firstChild) {
            this.todoList.removeChild(this.todoList.firstChild);
        }
        //展示默认的消息
        if (todos.length === 0) {
            const p = this.createElement("p");
            p.textContent = "Nothing to do ! Add a task?";
            this.todoList.append(p);
        } else {
            //创建节点
            todos.forEach(todo => {
                const li = this.createElement("li");
                li.id = todo.id;

                //每个代办项都有一个checkbox
                const checkbox = this.createElement("input");
                checkbox.type = "checkbox";
                checkbox.complete = todo.complete;

                const span = this.createElement("span");
                span.contentEditable = true;
                span.classList.add("editable");

                //如果已经完成，添加一条删除线 表示已经完成
                if (todo.complete) {
                    const strike = this.createElement("s");
                    strike.textContent = todo.text;
                    span.append(strike);
                } else {
                    //直接展示文字
                    span.textContent = todo.text;
                }
                //删除按钮
                const deleteButton = this.createElement("button", "delete");
                deleteButton.textContent = "Delete";
                li.append(checkbox, span, deleteButton);

                //将li 节点 加入到 todoList
                this.todoList.append(li);
            });
        }
        //调试
        console.log(todos)
    }

    _initLocalListeners() {
        this.todoList.addEventListener('input', event => {
            if (event.target.className === 'editable') {
                this._temporaryTodoText = event.target.innerText
            }
        })
    }

    bindAddTodo(handler) {
        this.form.addEventListener('submit', event => {
            event.preventDefault();

            if (this._todoText) {
                handler(this._todoText);
                this._resetInput()
            }
        });
    }

    bindDeleteTodo(handler) {
        this.todoList.addEventListener('click', event => {
            if (event.target.className === 'delete') {
                const id = parseInt(event.target.parentElement.id);

                handler(id)
            }
        })
    }

    bindEditTodo(handler) {
        this.todoList.addEventListener('focusout', event => {
            if (this._temporaryTodoText) {
                const id = parseInt(event.target.parentElement.id);

                handler(id, this._temporaryTodoText);
                this._temporaryTodoText = ''
            }
        })
    }

    bindToggleTodo(handler) {
        this.todoList.addEventListener('change', event => {
            if (event.target.type === 'checkbox') {
                const id = parseInt(event.target.parentElement.id);

                handler(id);
            }
        })
    }
}

/**
 * @class Controller
 *
 * 连接用户输入和视图输出
 * @param model
 * @param view
 */
class Controller {
    constructor(model, view) {
        this.model = model;
        this.view = view;

        //视图与model 绑定
        this.model.bindTodoListChanged(this.onTodoListChanged);
        this.view.bindAddTodo(this.handleAddTodo);
        this.view.bindDeleteTodo(this.handleDeleteTodo);
        this.view.bindToggleTodo(this.handleToggleTodo);
        this.view.bindEditTodo(this.handleEditTodo);

        //初始化展示 todos
        this.onTodoListChanged(this.model.todos);

    }

    onTodoListChanged = todos => {
        this.view.displayTodos(todos);
    };
    //方法函数
    handleAddTodo = todoText => {
        this.model.addTodo(todoText);
    };

    handleEditTodo = (id, todoText) => {
        this.model.editTodo(id, todoText);
    };
    handleDeleteTodo = id => {
        this.model.deleteTodo(id);
    };
    handleToggleTodo = id => {
        this.model.toggleTodo(id);
    };
}

const app = new Controller(new Model(), new View());

以上代码实现了一个完整的todos 网页，

在这里插入图片描述

想要复现整个过程
请参考（推荐英文版，英文版是原作者 )
Writing a Simple MVC App in Plain JavaScript
用纯Javascript撸一个MVC程序

如果ES6的代码有看不懂的地方,请参考：
ECMAScript 6 入门

星落之地
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MVC模式Demo
07-11
J2EE MVC模式的一个Demo，有主框架，具体细节有待修改
MVC本质论
糖醋舌头
12-14 1325
Normal 0 7.8 磅 0 2 false false false MicrosoftInternetExplorer4 <!-- /* Font
MVC框架的本质
李荣强
12-24 1272
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 在讲struts2之前,我觉得我有必要讲讲框架是什么东西,框架的本质是什么,或者说我们为什么要使用struts2等框架; struts2
MVC学习九：MVC 特性本质
weixin_30868855的博客
08-11 73
一、特性的本质就是：对属性、方法、类加特性，本质就是new 一个特性类对象赋值给属性、方法、类。 可以通过反射的方式取得特性的值，代码如下： ①自定义特性 public class MyAttribute:Attribute { public string Name { get; set; } } ②实体类中使用自定义特性 ...
MVC请求处理过程的本质之个人总结
weixin_30347335的博客
08-25 74
本文纯属个人见解，是对前面学习的总结，如有描述不正确的地方还请高手指正~ 废话就不多说了，开始。。。 首先在网站第一次被请求时会创建一个Application实例，贴源码先 if (application == null) { application = (HttpApplication) HttpRuntime.CreateNonPublicInst...
原生php实现mvc模式
09-25
虽然没有现成框架的帮助，但这种方式有助于我们理解MVC模式的本质，为后续使用ThinkPHP等框架打下坚实基础。在实际项目中，可以根据需求进行扩展，例如引入依赖注入、模板引擎、自动加载等功能，以提升开发效率和...
C++实现简单的MVC框架
06-19
在IT行业中，MVC（Model-View-Controller）是一种广泛应用于软件开发的...通过阅读和分析代码，开发者可以深入理解如何在C++环境中构建可扩展、模块化的应用，以及如何利用MVC模式来解耦业务逻辑、用户界面和数据管理。
mvc2.rar_mvc2
最新发布
09-24
理解JSP、Servlet和MVC模式的工作原理对于任何Java Web开发者来说都至关重要，这有助于构建高效、可维护的Web应用程序。在这个案例中，JSP页面作为视图负责展示登录表单和结果，Servlet作为控制器处理登录请求，而...
MVC的介绍
sorrow_more的博客
08-21 943
一、MVC简介 MVC是开发Web应用程序的通用架构方式： （一）、前端控制器（Front Controller） 前端控制器是spring 团队贡献给java社区的一种设计模式，一种MVC的实现方式。 前端控制器的图如下图所示： 以生活中的场景为例： MVC的本质：核心思想是业务数据抽取同业务数据呈现相分离（相分离：这是一种简化，将复杂的东西相分离了，可以将某个被分离出的...
MVC模式应用Demo
11-29
此Demo是基于MVC模式编写的一个小案例，对于大家了解MVC模式有很好的帮助
增删改查MVC模式demo
09-30
增删改查demo，本人自学java入行网上模仿的第一个例子
MVC相关概念
实践求真知
08-12 633
一前端控制器 二生活小例子类比 分诊台相当于前端控制器。 各科室相当于控制器。 三MVC本质 MVC的核心思想是业务数据抽取同业务数据呈现相分离。 VIEW：视图层，为用户提供UI，重点关注数据的呈现。 Model：模型层，业务数据的信息表示，关注支撑业务的信息构成，通常是多个业务实体的组合。 Controller：控制层，调用业务逻辑产生合适的数据（Model）...
简说MVC
H_L_S的专栏
03-03 275
众所周知，MVC 分别代表的是： M：模型(数据层) V：视图(负责视图呈现，用户直观呈现) C：控制器(接收视图输入的请求，并发送的模型，然后响应视图的请求。) 其实做过开发的人都知道，其实控制器是可以去掉的，类似PHP中，模型和视图是可以混编在一起的。那么为什么我们还需要控制层。原因如下： 1.因为控制器作用是解析请求，然后操做模型。 2.如果控制器与视图混合，增加代...
9. MVC设计模式的 简单Demo实现
丙戌年间
10-27 286
目录导航目的SSM 和 SSH 的简单对比Demo 源代码 目的 熟悉MVC 类设计模式的原理。目前主流企业开发的MVC 开源框架有两种，SSM 和 SSH。框架之所以流行，在于其易复用和简化开发，精髓在思想，掌握了核心思想，掌握其他类似框架也不会有问题，后续有必要阅读一下框架源码，尤其是Spring。 SSM 和 SSH 的简单对比 SSM：SpringMVC 做控制器(controlle...
spring mvc的工作原理及其本质
帅得山崩地裂的专栏
04-08 1505
前言 mvc其实是我们开发web项目的一个通用架构方式，我们把业务数据的处理和业务数据的呈现相分离，这样就把复杂的东西简化了，方便了编程的实现，代码结构也非常的清晰，更有利于后期的维护。 什么是MVC? MVC其实是Model-View-Controller的缩写。View是视图层，负责业务数据的呈现。Model是模型层，是业务数据的信息表示，通常是多个业务实体的组合。Controll...
深入理解MVC
热门推荐
zuiyingong6567的博客
04-30 8万+
MVC无人不知，可很多程序员对MVC的概念的理解似乎有误，换言之他们一直在错用MVC，尽管即使如此软件也能被写出来，然而软件内部代码的组织方式却是不科学的，这会影响到软件的可维护性、可移植性，代码的可重用性。MVC即Model、View、Controller即模型、视图、控制器。我在和同行讨论技术，阅读别人的代码时发现，很多程序员倾向于将软件的业务逻辑放在Controller里，将数据库访问操作的...
对MVC框架的理解
小白菜的博客
07-09 9338
    前几天和同学聊天，突然谈到他去阿里面试的时候，面试官叫他谈谈对MVC框架的理解，然后他没回答好，就被刷了。聊完后想了想要是这个问题换成我的话，我该怎么回答。想了想后，总结了一下。大致回答如下。 1，简单介绍    首先，MVC框架并不是一个复杂的东西，它本质上还是一种GoF，MVC分别指model,view,controler。    即模型，视图，控制器。    模型表示应用程序中处理业...
java中的mvc和三层结构究竟是什么关系
程序员涂小哥的技术博客
12-12 1万+
一件事，要知其然往往很简单，要知其所以然通常不是那么容易，就如最近重新巩固spring的过程中，就觉得还有许多问题其实并不是十分明了。 屈指一算，手头上做过的正式项目也有了四五六七个了，不管用的数据库和其他一些细节上的技术如何，总的来说大的框架结构都是差不多的。 说白了，也就是mvc和三层结构。 而mvc和三层结构究竟是什么关系，我曾在面试的过程中被人问过几次，也曾仔细的想过、查过这个问题，但...
Struts框架详解：MVC模式与业务流程图
"领略MVC流程----Struts讲解技术资料"深入介绍了Struts框架，作为J2EE领域中的轻量级解决方案，它广泛应用于企业级Web开发中，得益于其强大的MVC设计模式。MVC（Model-View-Controller）是一种软件架构模式，将应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值