前端知识体系
前端三要素
- HTML(结构):超文本标记语言,决定网页的结构和内容;
- CSS(表现):设定网页的表现形式;
- JavaScript(行为):一种弱类型脚本语言,其源代码无需经过编译,而是由浏览器解释运行,用于控制网页的行为。
MVC
MVC指MVC模式的某种框架,它强制性地使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件:模型、视图、控制器。它们各自处理自己的任务。
- 模型:表示业务规则,可理解为代表一个存取数据的对象,一个实体类,一个模型能为多个视图提供数据,由于应用于模型的代码只需写一次就可以被多个视图重用,所以减少了代码的重复性。
- 视图:页面。
- 控制器:控制器接受用户的输入并调用模型和视图去完成用户的需求,所以当单击Web页面中的超链接和发送HTML表单时,控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求,然后再确定用哪个视图来显示返回的数据。
最典型的MVC就是JSP + servlet+ javabean的模式。
MVVM
MVVM(Model-View-ViewModel),它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。
- View
View是视图层,也就是用户界面。前端主要由HTML和CSS来构建,为了更方便地展现ViewModel或者Model层的数据。 - Model
Model是指数据模型,泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则。 - ViewModel
ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层,前端开发者对从后端获取的Model数据进行转换处理,做二次封装,以生成符合View层使用预期的视图数据模型。
需要注意的是ViewModel所封装出来的数据模型包括视图的状态和行为两部分,而Model层的数据模型是只包含状态的
- 比如页面的这一块展示什么,那一块展示什么这些都属于视图状态(展示)
- 页面加载进来时发生什么,点击这一块发生什么,这一块滚动时发生什么这些都属于视图行为(交互)
MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大优点 - 低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
- 可重用性:你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
- 独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xaml代码。
- 可测试:界面素来是比较难于测试的,测试可以针对ViewModel来写。
|