对前端MVC

MVC分别是model、view、controller的缩写，模型、视图、控制器。这些更加偏向于后台，在以前MVC是只属于后台的。当然随着技术的进步，前端的大牛们将后台的一些东西应用于前端，MVC就是其中之一。

 走进MVC

MVC三者关系图：

图片有点简单，请谅解，是第一次写，而且时间有点紧！！！

 View视图

首先简单介绍一下它的工作原理与承担的业务。首先在这里我们先介绍View，它就是前端的视图界面，负责与用户的交互和拉取数据，如果说的简单点，它就是HTML文件：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

	</head>

	<body>

	</body>

</html>

      当然上面的代码未经任何的渲染和加工，但这就是View的一部分，由于对于公司来说，网站上的信息必须时时的更新，那么这时就必须将数据“写活“，简单就是必须向SQL请求数据，那么此时Controller就要起到作用，后续会讲到控制器。回到View上，前端需要向后台发送require请求，在html中请求数据，更多的用到js中的Ajax请求数据，以JSON的形式解析出来，下面是Ajax异步本地请求:

 function getNews(page){

    var req = new XMLHttpRequest();

    req.open("get", "http://api.avatardata.cn/GuoNeiNews/Query?key=df5093ee14864c3299e4a0cf3bce97de&page="+page+"&rows=5", true);

    req.send();

    req.onreadystatechange = function () {

        if (req.readyState == 4) {

            if (req.status == 200) {

                var text = req.responseText;

                var json = JSON.parse(text);

                var newsList = json.result;//是一个list

                var html = "";

                for (var i = 0; i < newsList.length; i++) {

                    var title = newsList[i].title;

                    var picUrl = newsList[i].picUrl;

                    var url = newsList[i].url;

                    html += "<li>";

                    if (picUrl){

                        html += "<img src=" + picUrl + " />";

                    }

                    html += "<a href=" + url + " >" + title+ "</a>";

                    html += "</li>";

                }

                document.getElementById("content").innerHTML = html;

            }

        }

    }

数据请求和渲染，包括用户的交互，共同构成了View视图。对于View它的主要工作就这些。

 Cotroller控制器

在MVC中,controller起到至关重要的作用，它协调Model与View。controller就可以说是我们常说的后台吧！！写后台的语言有很多，比如.Net、JSP、Java、PHP等等，说的简单一点，在MVC中controller就是专门编写接口的，API接口，View发送请求，contrller接收，根据具体的业务逻辑，调用不同的服务，获取model的数据，在将它发送给View界面。当然controller没有这么简单，contrller下有service服务，就是业务逻辑，每个service下有Dao数据访问接口。在这里必须说的是，控制器写的服务绝对不止一个，而服务下的数据接口也绝对是多个的。那么现在来看看PHP的是如何完成返还数据的:

这是微信API中使用PHP返还数据:

<?php

	require_once("jssdk.php");

	$sdk = new JSSDK("wxd10f8cbcf28c61b1", "aba160481671d4415168d6cbd5455c00");

	$config = $sdk -> getSignPackage();

?>

　　在这你由于本人不擅长后台，所以只给出了返还数据。

 Model模型

   model模型就是SQL，在model数据一般是以Json格式的Key-value形式编写，为了满足业务的需求，model模型可以有多个。

View发送数据请求，经过Controller控制器，控制器根据其业务逻辑调用不同的Dao，通过Dao获取SQL中不同的数据，再将数据返还给View，这就是MVC的整个工作流程。

使用JS编写MVC

使用JS编写MVC就必须要使用面向对象的思想，通过构造函数和原型链来完成，首先需要声明一个超类:

                var BaseClass = function(){};

		BaseClass.prototype.init = function(){};

		BaseClass.extends = function(config){

			var self= this;

			var step=function(){

				self.call(this ,arguments);

			};

			step.prototype = Object.create(self.prototype);

			var child=function(){

				this.init(arguments[0])

			};

			child.prototype = new step;

			for(var i in config){

				child.prototype[i]=config[i];

			}

			child.extends = arguments.callee;

			child.prototype.constructor=child;

			return child;

		}

在超类中返回child，child继承了超类的属性和方法；

再分别声明Model、Controller、View完成超类的继承，在三个子类中，分别定义不同的属性和方法，共同完成一次完整的数据请求。

var Model= BaseClass.extends({//模型 数据

			getData :function(){

				return {name:"liuheng"}

			},

			setData : {

			}

		});

		var View=BaseClass.extends({//视图 前端的界面及交互

			tempview : '<input name="name" value={name}>',

			renderTo :"body",

			render : function(data){

				var html=this.tempview.replace(/{(\w+)}/g ,function(){

					return data[arguments[1]];

				})

				document.querySelector(this.renderTo).innerHTML=html;

			}

		});

		var Controller=BaseClass.extends({

		//控制器 后台的应用程序，接受前端的require,再在数据库中调取数据返还给前端

			Model : Model,

			View : View,

			init : function(){

				var model=new Model();

				var view=new View();

				view.render(model.getData())

			}

		})

		var ctrl=new Controller()

		ctrl.init()

　　其中通过Model存储数据，Controller运行方法完成数据的交互，View编辑用户的界面，将获得数据在网页上展示出来，通过上述的js代码，简短的讲解了MVC在JS中的应用，谢谢！！这是第一次写博客，如发现博客中的解释存在问题，可以在留言板中指出！！谢谢

第一次写博客，关于前端开发deMVC在js中的应用的更多相关文章

  1. 第一次写博客Poj1044

    Date bugs Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 3005   Accepted: 889 Descript ...

  2. HDU 2064 菜鸡第一次写博客

    果然集训就是学长学姐天天传授水铜的动态规划和搜索,今天讲DP由于困意加上面瘫学长"听不懂就是你不行"的呵呵传授,全程梦游.最后面对连入门都算不上的几道动态规划,我的内心一片宁静,甚 ...

  3. 第一次写博客，就写如何向外行介绍自己做的是什么，那个我是做web的

    如果想外行问你是做什么的,改如何回答.和内行说java后台就可以了,但外行听不懂,我们该如何描述呢? 我的方法是:我做的是java web开发,不是内外的外,是个英文单词web,全名叫world wi ...

  4. iOS controller解耦探究实现——第一次写博客

    大学时曾经做过android的开发,目前的工作是iOS的开发.之前自己记录东西都是通过自己比较喜欢的笔记类的应用记录下了.直到前段时一个哥们拉着我注册了一个博客.现在终于想明白了,博客这个东西受众会稍 ...

  5. Magazine Ad CodeForces - 803D（二分 + 贪心，第一次写博客）

    Magazine Ad The main city magazine offers its readers an opportunity to publish their ads. The forma ...

  6. 谈谈自己对C语言中函数指针的一些理解 （第一次写博客，有点小兴奋哈）

    1.函数指针声明的格式及简单的使用 (1)格式:(返回值)(*函数指针名)(参数列表)    例如:声明一个无参数无返回值的函数指针(void)(*p)(void). (2)将函数指针指向某个无参数无 ...

  7. sikuli+eclipse对于安卓app自动化测试的应用（第一次写博客，有些语言还不太专业，望海涵）

    Sikuli是什么? 下面是来自于官网的介绍:Sikuli is a visual technology to automate and test graphical user interfaces ...

  8. ViewPager实现自动翻页功能 --转载出处找不到了，根据自己的理解写个随笔方便以后的记忆以及代码的共享，感谢给我启发的那位高手--第一次写博客哈

    xml文件 textview 用于显示图片的标题 viewpager 用于实现翻页效果 <LinearLayout xmlns:android="http://schemas.andr ...

  9. 写一下SPFA和迪杰斯特拉的模版。。。第一次写博客，有错请提出哦！

    SPFA的模版 #include<bits/stdc++.h> using namespace std; queue <int> q; typedef pair <int ...

随机推荐

  1. java学习笔记（4）：内存管理

    在内存的方面,Java自身带有垃圾运行机制,表面上好像我们可以忽略不计,但是如果我们对其加以理解的话,说不定有时会达到事半功倍的效果. 所以自己花些时间整理一些此类的资料. 一.基本概念 1.栈 对于 ...

  2. web标准(复习)--3 二列和三列布局

    今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...

  3. jQuery插件autoComplete使用

    安装/需要引入的文件 <script type="text/javascript" src="../js/jquery-1.8.3.min.js.js"& ...

  4. MySQL 优化方案

    基本上通过索引来解决 . 通常索引键在where , group by , order by 相关的列 一个表只能用一个索引(查询的时候)所以当要执行复杂查询时最好使用联合索引就是 index (a, ...

  5. 硬盘安装windows7

    微软已经发表声明 Windows XP 操作系统将于2014年4月8日停止提供补丁和安全更新,提醒用户尽快升级现有的XP操作系统.Windows XP曾在2001年10月25日正式发布的,已经走过了十 ...

  6. Qt编程之qrc文件的链接

    在Qt里面,.qrc文件是一种类似XML结构的文件,用结构化数据描述应用程序所需要的资源位置,例如图片,应用程序的图标文件等.它最终是与.ui文件类似都被通过Qt提供的命令行工具生成对应的qrc_XX ...

  7. MVC4.0系统开发新手历程（一）

    接手了一个简单的销售奖金计算的项目,虽然不算大但是业务逻辑比较复杂,还夹杂了很多的特殊情况,毕竟是大公司什么样的人都有,好了不多说切入正题,项目是公司的一个前辈负责的,在他做系统架构的时候让我们了解下 ...

  8. bzoj1145

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1145 神题...... 定义f(abcd)为高度排名为abcd的个数,例如闪电的个数为f(13 ...

  9. JVM基础和调优（六）

    JVM设置过程中的一般的规范 在JVM的设置中,年轻代的设置比较的重要,因为年轻代存储空间分配的比较的块,可以说触发GC的机会比较的大. 默认的情况下:-XX:NewRatio  默认为2 说明:年轻 ...

  10. JAVA车票管理系统(简单GUI)

    一．    需求分析 1.设计题目:车票管理系统 用JAVA语言和数据结构知识设计设计车票管理系统.要求如下所述: 一车站每天有n个发车班次,每个班次都有一个班次号(1.2.3…n),固定的发车时间, ...