写代码啦
浅谈MVC设计模式
回复数(0) 浏览数(26)
{{topic.upvote_count || 0}} 编辑 回复

- 前言

相信很多人,或者一些初学前端的朋友。听到什么什么设计模式的时候会觉得很难,觉得自己学不会。其实不然,前端很多听起来很高端的的一些专业词语,其实只是一些很简单的技术。MVC设计模式也然如此。

- 设计模式

设计模式,说的简单一点就是一种可以规范化,应用广泛地写代码方式和理念。养成这个习惯,对于自身和团队有较大的帮助。

- MVC设计模式

  • M —— Model(数据类型)负责操作所有数据
  • V —— View(视图)负责所有UI页面
  • C —— Controller(控制器)负责其他

这种设计模式,往往没有一个标准的规范,只是一种习惯一种理念。每个人的理解不同,实现也不同。但是总的理念不会有较大的偏差。
用一段简单的例子来大概理解一下MVC设计模式的思路:
源码
效果图:
图 1 图 1
我们要实现一个页面分为4个板块,每个板块我们要有相应的功能。

如果我们不使用MVC设计模式的时候,我们应该是将所有代码写到一个文件里面,并且里面的代码杂乱无章。那样不方便自己阅读,甚至不方便修改,一个错误将连带影响其他内容。那么如果我们使用MVC设计模式呢?

image.png image.png

  • 将4个模块分类:app1、app2、app3、app4
  • 将每个模块的css、js单独书写:app1.css app1.js、app2.css app2.js等
  • 新建一个main.js,将各自独立的模块组合起来
  • 全局的css文件单独书写:reset.css
    总的分好后,在细分代码
  • 将数据类代码,统一写入M模块中
  • 将视图类代码,统一写入V模块中
  • 将控制类代码,统一写入C模块中

其实说这么多,其实也就是将平时全部堆在一起的代码,进行分类管理,细分成一段段小代码。再将代码分种类,分别放入对应M模块、V模块、C模块。方面自己和他人阅读、开发。

- 前言

相信很多人,或者一些初学前端的朋友。听到什么什么设计模式的时候会觉得很难,觉得自己学不会。其实不然,前端很多听起来很高端的的一些专业词语,其实只是一些很简单的技术。MVC设计模式也然如此。

- 设计模式

设计模式,说的简单一点就是一种可以规范化,应用广泛地写代码方式和理念。养成这个习惯,对于自身和团队有较大的帮助。

- MVC设计模式

  • M —— Model(数据类型)负责操作所有数据
  • V —— View(视图)负责所有UI页面
  • C —— Controller(控制器)负责其他

这种设计模式,往往没有一个标准的规范,只是一种习惯一种理念。每个人的理解不同,实现也不同。但是总的理念不会有较大的偏差。
用一段简单的例子来大概理解一下MVC设计模式的思路:
源码
效果图:
图 1 图 1
我们要实现一个页面分为4个板块,每个板块我们要有相应的功能。

如果我们不使用MVC设计模式的时候,我们应该是将所有代码写到一个文件里面,并且里面的代码杂乱无章。那样不方便自己阅读,甚至不方便修改,一个错误将连带影响其他内容。那么如果我们使用MVC设计模式呢?

image.png image.png

  • 将4个模块分类:app1、app2、app3、app4
  • 将每个模块的css、js单独书写:app1.css app1.js、app2.css app2.js等
  • 新建一个main.js,将各自独立的模块组合起来
  • 全局的css文件单独书写:reset.css
    总的分好后,在细分代码
  • 将数据类代码,统一写入M模块中
  • 将视图类代码,统一写入V模块中
  • 将控制类代码,统一写入C模块中

其实说这么多,其实也就是将平时全部堆在一起的代码,进行分类管理,细分成一段段小代码。再将代码分种类,分别放入对应M模块、V模块、C模块。方面自己和他人阅读、开发。

26
回复 编辑