MVC笔记，加深理解

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量143 收藏
点赞数
分类专栏： 库类 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35898059/article/details/104305149
版权

搭建MVC实现：

MVC 模式

​ MVC模式 是将程序分为三层：

​ M层（Model）： 负责数据层

​ V层（View）: 负责视图层

​ C层 （contraller）: 控制器 负责交互

在MVC 模式中：

​ C层是 核心层： 既可以更新数据，又可以更新视图

​ V层： 可以获取数据

​ M层： 存储数据

在这里插入图片描述

MVC的主要思想 就在图中， 控制器 要获得 更新视图 更新数据。

返回一个对象，该对象中可以操作MVC，但是不可以直接访问。 是为了保护数据。

推演：

不使用MVC的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div"></div>
    <script>
        let data = {
            data: "我是一组数据"
        }

        // 获得元素
        var div = document.getElementById('div');
        // console.log(div);
        div.innerHTML = data.data;

        // 交互
        div.onclick = function() {
            this.style.color = 'red';
        }
    </script>
</body>
</html>

使用MVC ， 先分析：

​ MVC中的M 数据层 ： 是data

​ MVC中的V 视图层 ： 是div元素，以及div的内容

​ MVC中的 C 控制层 ： 作为交互 就是 onclick

MVC的架子， 为什么要暴露接口呢？ 为了保护数据安全，不让直接操作 M V C 方法

​ 为什么都是自执行函数（IIFE） 还是为了保护数据安全。

let MVC = (function() {
    //  M层 负责 数据层
    let M = ()();
    //  V层  负责视图层
    let V = ()();
    //  C层   负责交互层
    let C = ()();
   
    // 暴露接口
    return {
        Method(){}
    }
})()

然后开始补充内容： 思路 数据层 应该有 获得数据方法 ， 存储数据的方法

​ M层 就会是

//  M层 负责 数据层
let M = (function(){

        // 定义数据对象  用来存放 数据
        let data = {};

    return {
        // 添加数据的方法
        add() {},
        // 获得数据的方法
        get() {}
    }
})();

​ 然后思考 视图层将会有什么呢？

​ 视图层 要有一个对象， 用来存放 视图的方法

​ 同样为了 保护 视图的方法。 我们返回接口 。这个接口有两个方法

​ （为什么会这样分开呢？ 观察者模式）

​ 观察者模式博客：：：：

​ 添加视图的方法

​ 执行视图的方法

//  V层  负责视图层
let V = (function(){
    // 定义一个数据对象  用来存放  视图的方法
    let data = {}; 
    return {
        // 咱们把  添加方法  和 执行  分开做。  添加只管添加的方法。  渲染进行执行函数的操作
        // 添加视图的方法 
        add(){},
        // 渲染视图的方法
        render(){},
    }
})();

思考 C层 控制层 这层主要的作用是 复制交互

​ 要一个对象 用来存放 交互的方法

​ 同样 为了保护 交互的方法 我们使用 return 接口

​ 接口中 要有 添加交互的方法 和执行交互的方法

//  C层   负责交互层  这层主要有很多  交互的方法
let C = (function(){
	// 用来存放  交互的方法
    let data = {};
    return {
        // 添加交互的方法
        add(){},
        // 初始化函数。  作用就是   交互的方法的实现
        init(){}
    }
})();

那么MVC返回的接口 ， 也可以填充了

​ 思考： 将要暴露什么接口： 对外界 肯定是要暴露 添加数据 添加视图 添加控制器的方法

let MVC() {
	return {
		// 添加数据的方法
		addModel(name, data) {
			M.add(name, data);
		},

		// 添加视图
		addView(name, fn) {
			V.add(name, fn);
		},
		
		// 添加控制器
		addCtrl(name, fn) {
			C.add(name, fn);
		},
	}
}()

此时大概的框架就有了

let MVC = (function() {
    //  M层 负责 数据层
    let M = (function(){

         // 定义数据对象  用来存放 数据
         let data = {};
        
        //  这样返回的方法  是为了  保护  data  数据
        return {
            // 添加数据的方法
            add() {},
            // 获得数据的方法
            get() {}
        }
    })();

    //  V层  负责视图层
    let V = (function(){
        // 定义一个数据对象  用来存放  视图的方法
        let data = {}; 
        return {
            // 咱们把  添加方法  和 执行  分开做。  添加只管添加的方法。  渲染进行执行函数的操作
            // 添加视图的方法 
            add(){},
            // 渲染视图的方法
            render(){},
        }
    })();


    //  C层   负责交互层  这层主要有很多  交互的方法
    let C = (function(){

        let data = {};
        return {
            // 添加交互的方法
            add(){},
            // 初始化函数。  作用就是   交互的方法的实现
            init(){}
        }
    })();
   
    // 暴露接口
    return {
       // 添加数据的方法
		addModel(name, data) {
			M.add(name, data);
		},

		// 添加视图
		addView(name, fn) {
			V.add(name, fn);
		},
		
		// 添加控制器
		addCtrl(name, fn) {
			C.add(name, fn);
		},
    }
})()

此时就要思考了：

在这里插入图片描述

​

​ C层的交互 是要更新对象， 并且 C层控制 更新视图

​ V层的渲染 是要使用到数据的

现在变成现象解释现象了

因此可以得到。 视图方法的执行 要放在 C层

​ 添加视图的方法， 放在 V层

​ 添加数据的方法， 放在M层

​ 执行的方法都放在 C层。

继续填充

M层

// M层 复杂数据层
let M = (function() {
	// 定义数据对象
	let data = {};

	// 定义接口对象  返回了两个接口  add 接口  和  get 接口
	return {
		// 添加数据
		add(name, value) {
			// 第一步将路径层级转为数组
			let pathName = name.split('.');
			// console.log(pathName);
			// 备份数据
			let result = data;
			// 循环添加数据
			for (let i = 0; i < pathName.length - 1; i++) {
				// 判断数据类型
				if (typeof result[pathName[i]] === 'object' && result[pathName[i]] != null) {
					// 说明真的是引用类型, 指向下一层
					result = result[pathName[i]];
				} else if (typeof result[pathName[i]] === 'undefined') {
					// 强制变为对象
					result[pathName[i]] = {};
					// 改变对象的指向
					result = result[pathName[i]];
				} else {
					throw new Error('不能在值类型上添加数据');
				}
			}
			// console.log(pathName[pathName.length - 1]);
			// 最后一项被赋值
			if (typeof result[pathName[pathName.length - 1]] === 'undefined') {
				result[pathName[pathName.length - 1]] = value;
			} else {
				throw new Error('已经被占用了');
			}

			// console.log(42, data);
		},
		// 获取数据
		get(name) {
			// 第一步将路径层级转为数组
			let pathName = name.split('.');
			// 备份数据
			let result = data;
			// 循环
			for (let i = 0; i < pathName.length - 1; i++) {
				// 判断当前层级是否是引用类型
				if (typeof result[pathName[i]] === 'object' && result[pathName[i]] != null) {
					// 指向下一层
					result = result[pathName[i]];
				} else {
					return null;
				}
			}

			// 遍历完成之后返回最后一项数据
			return result[pathName[pathName.length - 1]];
		}
	}
})()

V层

// V层 负责视图层
	let V = (function() {
		// 定义数据对象
		let data = {
			// view: function() {

			// }
		};

		// 定义接口对象
		return {
			// 添加视图的方法
			add(name, fn) {
				data[name] = fn;
			},
			// 渲染方法
			render(name) {
				return data[name](M);
			}
		}
	})()

C层：

// C层 添加控制器
	let C = (function() {
		// 定义数据对象
		let data = {
			// ajax: function() {}
		};

		// 返回接口对象
		return {
			// 添加控制器的方法
			add(name, fn) {
				data[name] = fn;
			},
			// 初始化方法   控制器的执行
			init() {
				for (let i in data) {
					data[i](M, V);
				}
			}
		}
	})()

整个MVC.js 的实现

// 实现MVC
let MVC = (function() {
	// M层 负责数据层
	let M = (function() {
		// 定义数据对象
		let data = {
			
		};

		// 定义接口对象
		return {
			// 添加数据
			add(name, value) {
				// 第一步将路径层级转为数组
				let pathName = name.split('.');
				// console.log(pathName);
				// 备份数据
				let result = data;
				// 循环添加数据
				for (let i = 0; i < pathName.length - 1; i++) {
					// 判断数据类型
					if (typeof result[pathName[i]] === 'object' && result[pathName[i]] != null) {
						// 说明真的是引用类型, 指向下一层
						result = result[pathName[i]];
					} else if (typeof result[pathName[i]] === 'undefined') {
						// 强制变为对象
						result[pathName[i]] = {};
						// 改变对象的指向
						result = result[pathName[i]];
					} else {
						throw new Error('不能在值类型上添加数据');
					}
				}
				// console.log(pathName[pathName.length - 1]);
				// 最后一项被赋值
				if (typeof result[pathName[pathName.length - 1]] === 'undefined') {
					result[pathName[pathName.length - 1]] = value;
				} else {
					throw new Error('已经被占用了');
				}

				// console.log(42, data);
			},
			// 获取数据
			get(name) {
				// 第一步将路径层级转为数组
				let pathName = name.split('.');
				// 备份数据
				let result = data;
				// 循环
				for (let i = 0; i < pathName.length - 1; i++) {
					// 判断当前层级是否是引用类型
					if (typeof result[pathName[i]] === 'object' && result[pathName[i]] != null) {
						// 指向下一层
						result = result[pathName[i]];
					} else {
						return null;
					}
				}

				// 遍历完成之后返回最后一项数据
				return result[pathName[pathName.length - 1]];
			}
		}
	})()
    
	// V层 负责视图层
	let V = (function() {
		// 定义数据对象
		let data = {
			// view: function() {

			// }
		};

		// 定义接口对象
		return {
			// 添加视图的方法
			add(name, fn) {
				data[name] = fn;
			},
			// 渲染方法
			render(name) {
				return data[name](M);
			}
		}
	})()

	// C层 添加控制器
	let C = (function() {
		// 定义数据对象
		let data = {
			// ajax: function() {}
		};

		// 返回接口对象
		return {
			// 添加控制器的方法
			add(name, fn) {
				data[name] = fn;
			},
			// 初始化方法  控制器的执行
			init() {
				for (let i in data) {
					data[i](M, V);
				}
			}
		}
	})()


	// 返回一个对象，该对象中可以操作M V C ,但是不可以直接访问
	return {
		// 添加数据
		// 之前定义方法的方式
		// addModel: function() {
		// 使用ES6语法  在对象字面量中 定义的方法可以省略冒号以及function关键字
		addModel(name, data) {
			M.add(name, data);
		},

		// 添加视图
		addView(name, fn) {
			V.add(name, fn);
		},
		// 添加控制器
		addCtrl(name, fn) {
			C.add(name, fn);
		},
		// 初始化方法
		install() {
			C.init();
		}
	} 
})()

使用MVC之后的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div"></div>
    
    <!-- 引入MVC  文件 -->
    <script src="MVC.js"></script>
    <script>

        console.log(MVC); 
        // 添加数据
        MVC.addModel('model',{ 
            data: "我是一组数据"
        });
        
        // 添加视图
        MVC.addView('view', function(M) {
            // 获得数据
            let data = M.get('model');
            
            // 获得元素
            let dom = document.getElementById('div');
            console.log(data);

            dom.innerHTML = data.data;
            // 返回元素
            return dom;
        });
        // 添加控制器
        MVC.addCtrl('ctrl', function(M, V) {
            // 获得元素
            let dom = V.render('view');

            // 添加事件
            dom.onclick = function(){
                this.style.color = 'red';
            }
        });

        // 执行控制器代码
        MVC.install();


    </script>
</body>
</html>

MVC在项目中的应用：

视图层： 是需要返回容器的。 为什么要返回容器呢。 就是返回整个元素？ 因为元素要在控制层被使用。元素有有交互。要有事件的发生。

​ 七个步骤

1、 获得容器元素

2、 获取数据

3、 定义大模板

4、 定义小模板

5、 定义变量 用来存储格式化之后的模板

6、 格式化模板

7、 上树

8、 返回容器元素

        // 返回元素
        return dom;
    });
    // 添加控制器
    MVC.addCtrl('ctrl', function(M, V) {
        // 获得元素
        let dom = V.render('view');

        // 添加事件
        dom.onclick = function(){
            this.style.color = 'red';
        }
    });

    // 执行控制器代码
    MVC.install();


</script>
````

MVC在项目中的应用：

视图层： 是需要返回容器的。 为什么要返回容器呢。 就是返回整个元素？ 因为元素要在控制层被使用。元素有有交互。要有事件的发生。

​ 七个步骤

1、 获得容器元素

2、 获取数据

3、 定义大模板

4、 定义小模板

5、 定义变量 用来存储格式化之后的模板

6、 格式化模板

7、 上树

8、 返回容器元素

没入门到放弃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MVC笔记理解
12-13
MVC 理解model：访问数据就像我们通常的dal view:显示页面 control:业务逻辑，路由到页面。 model view control简称 mvc model:模型 view:视图 control:控制器
通俗易懂讲解MVC架构
一只未秃顶的不合格程序猿的博客
12-19 1953
首先，我们需要了解MVC的基本概念。MVC是Model-View-Controller的缩写，分别代表模型、视图和控制器。这三个部分分别负责不同的功能，它们之间的关系是相互独立、松散耦合的。
mvc三层架构_项目架构规范：阿里规约，MVC架构以及三层架构(一)
weixin_39929721的博客
12-05 430
本人的CSDN账号：https://blog.csdn.net/lin451791119学习大纲1、 三层职责2、引入领域驱动设计3、何为限界上下文4、何为领域5、领域分层6、实体和值对象7、Service8、生命周期之聚合9、生命周期之Factory10、生命周期之Repository11、命名规范设计12、贫血模型13、领域服务一、MVC模式用一种业务逻辑、数据、界面显示分离的方式View。负...
深入浅出！这份阿里内传的“Spring-MVC源码分析与实践笔记”带你看透Spring-MVC源码！太牛了！
2301_76348206的博客
05-03 617
前面三篇已经将Spring MVC的源代码分析完毕，本篇主要对前面的内容做一个总结， 另外再将异步请求相关的内容给大家做个补充。学习完一样东西之后及时地总结可以在很短的时间内获得很大的收获，这不仅适用于开源框架的学习，同时也适用于其他内容的学习。这么做首先可以加深对所学内容的印象，更重要的是可以站在更高的层次来综合思考，这样就可以将所学的内容整合到一个整体结构中，并且这时候很容易想明白原来没理解的疑点，也就是所谓的将书“先看厚再看薄”中看薄的过程。
深入浅出！这份阿里内传的“Spring-MVC源码分析与实践笔记”带你看透Spring-MVC源码！太牛了！(1)
2301_79055814的博客
05-03 877
前面三篇已经将Spring MVC的源代码分析完毕，本篇主要对前面的内容做一个总结， 另外再将异步请求相关的内容给大家做个补充。学习完一样东西之后及时地总结可以在很短的时间内获得很大的收获，这不仅适用于开源框架的学习，同时也适用于其他内容的学习。这么做首先可以加深对所学内容的印象，更重要的是可以站在更高的层次来综合思考，这样就可以将所学的内容整合到一个整体结构中，并且这时候很容易想明白原来没理解的疑点，也就是所谓的将书“先看厚再看薄”中看薄的过程。
学习笔记之mvc架构模式分析与设计
皆凡人的博客
03-16 1514
为了未来学习成熟稳定的框架，我先找到了一个MVC微框架进行入门学习，掌握一定的理论体系，有利于加深对大框架的理解，加快吸收的速度，避免思维僵化。 一、MVC工作流程初步认识 浏览者 --> 调用控制器，对他发出指令 控制器 --> 按指令选取一个合适的模型 模型 --> 按控制器指令取相应数据 控制器 --> 按指令选取相应视图 视图 --> 把第三步取到...
Spring学习笔记-加深对Spring的理解
HowieLi
03-16 1109
在之前对Spring的学习和开发中，一直处于会用的状态，对Spring以及它的核心IOC、DI和AOP一直处于非常浅的认识。之前一直想找时间好好理解一下Spring，可是拖延症并没有让我这么做。不过，这次的课堂作业就是对Spring的理解，所以正好可以借这个机会查找相关资料来加深下对Spring的理解。
Spring学习笔记
weixin_45776178的博客
01-22 943
一个快速开发的脚手架。基于SpringBoot可以快速的开发单个微服务。约定大于配置！
归空的spring笔记
weixin_54849368的博客
05-15 121
Spring：春天-------->给软件行业带来了春天2002年，首次推出了spring框架的雏形：interfaace21框架Spring框架即以interface21框架为基础，经过重新设计，并不断丰富其内涵，于2004年3月24日发布了1.0正式版Rod Johnson，Spring Framework创始人，著名作者。很难想象Rod Johnson的学历，真的让好多人大吃一惊，他是悉尼大学的博士，然而他的专业不是计算机，而是音乐学。
spring MVC笔记
04-12
spring MVC笔记spring MVC笔记spring MVC笔记spring MVC笔记
ASP.NET MVC学习笔记
10-29
ASP.NET MVC 1.0发布有段儿时间了，刚发布不久的时候试用了一下，做了一个简单的BBS，现在总结一些经验和小技巧和大家分享。
JDBC_MVC个人笔记.md
07-19
JDBC/MVC个人笔记： MVC； 了解三个类的作用：Connection，PreparedStatement，ResultSet； 代码：UserDao.java、DBUtil.java
spring mvc学习笔记
09-17
spring mvc核心组件 mvc请求过程 基本理论
【Spring5学习笔记】
sht1520065366的博客
01-02 900
spring5,个人笔记
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1102
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1061
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 351
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 149
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
ReactJS MVC理解
04-02
ReactJS是一个用于构建用户界面的JavaScript库，它并不是一个完整的MVC框架，但是可以基于ReactJS构建MVC应用程序，以下是ReactJS MVC的理解： 1. Model（模型）：在ReactJS中，模型通常是指应用程序中的数据。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值