做口碑最好的专业HTML5全栈前端培训机构
最新开班:2019年09月22日  火热报名中!   全国咨询热线:400-089-1708
首页 > 爱前端新闻
爱前端9月22日全栈大前端训练营火热报名中,课程涵盖Node.js、Angular、React、Vue、微信小程序等时下最流行的前端技术!培养年薪30万工程师!报名咨询QQ: 28525152242852515226。咨询电话:4000891708。点击查看前端学习路线

MVC和Angular简介

2017-02-08 分类:技术交流 浏览:129

一、MVC概述

在NodeJS课上,已经学习了MVC的概念,我们已经把项目分为:

models:模型,负责最基本的业务,最累、最重、最原子的算法,模型是和整体业务无关的。

views:视图,就是展示给用户看到的这个层,可以有简单的逻辑,ejs模板引擎可以表达简单逻辑。

controller:控制器,在node中就是路由层,收到req请求,分析交给不同的model完成,指定不同的view显示。

要把MVC概念,引入到前端开发中。

我们从社会现象中看到:

体系小的时候,不用在用分层,体系自己能运转就好了。如果要改变,也非常方便。“船小好调头”。

体系大的时候,必须要分层管理,适应改变,当要发生改变的时候,不容易出错。

前端开发也是一样的!

当我们现在要制作一个小型项目的时候,HTML可以写行内CSS、JS都行。PHP和HTML可以揉着写。

项目变大,HTML、CSS、JS分开。PHP只写接口,JSON接口,HTML用Ajax读取,前后端分离。

项目变更大,js要分出多个包,比如俄罗斯方块,game.js、block.js、map.js等等。采用设计模式,比如终结者模式、观察者模式等等,目的就是降低耦合性。

项目变更大的,此时就要分层开发,看看这个js是负责什么的?负责界面的?负责算法的?把相关的代码集结在一起,用更高级的手段他们的依赖,模块化开发!在我们前端的世界中,模块化开发的优良手段就是MVC。

电脑组装,CPU、主板、内存条、显卡、硬盘都是各个独立模块,有各自的功能,拼合在一起。

模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程,有接口、功能、逻辑、状态属性,分别反映其内部特性。

模块化开发使得关注的东西很小,让我们更专注。此时就要有接口规范,否则就不能拼接在一起。

模块是可能分开地被编写的单位。这使他们可再用和允许广泛人员同时协作、编写及研究不同的模块。模块化的目的是为了降低程序的复杂度,让程序的设计、调试都变得简单。

企业中:

按逻辑来分工,一个人写admin,一个人写student的逻辑。每个工程师写自己的路由:admin-router.js、student-router.js,写自己的Student、Admin模块中的静态方法,最后整合起来。

按模块来分工,这个人只写Model,你写一个Student,把可能用到的方法都写出来,写在studentSchema.statics.**。功能都是产品经理、架构师给你指定的。

Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。

通常模型对象负责在数据库中存取数据。

View(视图)是应用程序中处理数据显示的部分。

通常视图是依据模型数据创建的。

Controller(控制器)是应用程序中处理用户交互的部分。

通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。

二、Angular简介

AngularJS诞生于2009年,是Google的产品。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。

AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

发明人自述:

“AngularJS是为了克服HTML在构建应用(SPA,单页面应用)上的不足而设计的。HTML是一门很好的文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。”

其他人想改变前端世界,发明的是库或者框架:

类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等

框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。

Angular的创始人病史想用库来改变前端世界,想改变的就是HTML这个语言。Angular是HTML的大补丁,重新定义了HTML和JS的关系。

Angular的版本介绍

现在Angular并存1代和2代,编程风格、语法、哲学、概念都完全不同,可以看做是两个不同的语言!

Angular2采用ECMAScript2016的最新技术,使用了语言内置的import、class特性,所以重构了Angular。但是ECMAScript2016兼容性不行,所以Angular2在中国刚刚开始发展,更多公司用Angular1。

Angular适合开发什么,不适合开发什么?

我们取Github上看Angular开发的项目,基本上都是SPA!单页面项目,CRUD多的项目,关注数据的项目,都适合用Angular开发。

Angular开发,使用开发大中型项目,不适合小型项目,否则就有杀鸡焉用牛刀的感觉!

AngularJS不适合做什么?这是创始人的采访记录:

InfoWorld: Where might AngularJS not be a good fit? Hevery: That's a good question. A lot of people have surprised me because I always thought that building [of] games would not be a good fit. Angular was meant for the form-based Web. You fill out the form, you see some report of your stock portfolio or something like that. And games are something very, very different. But people surprised me because they keep building games with Angular as well. Really, the sweet spot is form reporting-based [development], which is what 80 percent of the Web is.

Angular适合开发表格应用。

三、关于MVC、MVVM、MVP

不管是什么都是MV*类型的架构,目标就是模块化,就是分层。

分享到: