Vue学习笔记01前端知识体系

前端知识体系

前端三要素

• 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来写。