一、MVVM
1、定义
MVVM(Model-view-viewmodel)是一种软件架构模式。本质上就是MVC (Model-View- Controller)的改进版。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。双向绑定原理,使用到Object.defineproperty。
2、组成部分
模型:数据模型;
视图:页面展示;
视图模型:中模型和视图的中介,负责从模型中暴露(转换)数据对象,以便轻松管理和呈现对象
3、组件化思想
组件化是指将页面功能模块进行拆分,封装。组件代码包含了组件所有的功能代码和样式。组件化的作用是复用、高可维护;组件化不局限于前端代码而是一种设计思想。
3.1组件化原则
独立功能模块(松耦合、偏平化、提炼精华)
独立的状态变化(统一的状态管理)
从上而下的逻辑思考,从下而上的组件拆分
3.2 组件化问题
传统开发 VS 单页面应用
代码维护 & 代码管理 & 代码规范
组件通信 & 组件传参
二、JS框架选型
Vue、React、Angular
相同:
(1)都支持ES6语法;
(2)都采用MVVM设计模式
(3)都采用组件化思想
Vue.js特点和优势:
易上手;
中文文档、社区非常丰富;
大公司都在用;