web应用开发实战（一）

什么是MVVM？

MVVM，是Model-View-ViewModel的简写，是M-V-VM三部分组成。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，其中ViewModel将视图 UI 和业务逻辑分开，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

MVVM采用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，model中数据变化也将会自动展示在页面上。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

MVVM核心思想，是关注model的变化，让MVVM框架利用自己的机制自动更新DOM，也就是所谓的数据-视图分离，数据不会影响视图。

MVVM的优点：

1、低耦合：MVVM模式中，数据是独立于UI的，ViewModel只负责处理和提供数据，UI想怎么处理数据都由UI自己决定，ViewModel不涉及任何和UI相关的事，即使控件改变（input换成p）,ViewModel几乎不需要更改任何代码，专注自己的数据处理就可以了

2.自动同步数据:ViewModel通过双向数据绑定把View层和Model层连接了起来，View和Model这两者可以自动同步。程序员不需要手动操作DOM, 不需要关注数据状态的同步问题，MVVM 统一管理了复杂的数据状态维护

3、可重用性：你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

4、独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

5、可测试：ViewModel里面是数据和业务逻辑，View中关注的是UI，这样的做测试是很方便的，完全没有彼此的依赖，不管是UI的单元测试还是业务逻辑的单元测试，都是低耦合的
 

什么是CDN？

CDN,顾名思义是一个英文缩写，全称是contentdeliverynetwork（内容分发网络），即服务商通过在世界各地部署大量服务器节点，缓存源站静态资源（目标服务器），当用户访问时返回最优线路的资源，提高网页响应速度，给用户带来更好的体验。CDN就是采用更多的缓存服务器（CDN边缘节点），布放在用户访问相对集中的地区或网络中。当用户访问网站时，利用全局负载技术，将用户的访问指向距离最近的缓存服务器上，由缓存服务器响应用户请求。（有点像电商的本地仓吧？）

清除浮动

一.为什么清除浮动？

在我们的开发过程中，浮动元素是css中最常用的属性，浮动起来的元素会脱离标准流，如果我们的父级盒子没有设置高度就会造成父级盒子的高度坍塌，就会影响我们下面盒子的正常显示。

二.清除浮动的方式：

1.给父级盒子添加高度

造成高度塌陷的原因就是父盒子没有高度，我们只需要给父盒子添加一个高度即可

2.额外标签法

额外标签法会在浮动元素末尾添加一个空的标签。给这个标签设置clear属性，（注意这个标签必须是块级元素）

3.给父级添加overflow属性

向浮动元素的父级盒子添加voerflow：hidden属性，这样就可以达到清除浮动的效果

4.给父级添加after伪元素

利用after伪元素定义一个clearfix类，浮动元素的父级元素调用此类可以实现清除浮动的效果

什么是HTML语义化？

HTML语义化是指在用标签构建HTML页面时避免大篇幅地使用无语义的标签

常见的语义化标签：

<header></header>头部

<nav></nav>导航栏

<section></section>区块（有语义化的div）

<main></main>主要区域

<artical></artical>主要内容

<aside></aside>侧边栏

<footer></footer>底部

语义化标签的好处：

1.去掉或者丢失样式的时候能够让页面呈现出清晰的结构；

2.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

3.方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页；

4.便于团队开发和维护，语义化更具可读性，遵循W3C标准，可以减少差异化。
 

盒子模型

什么是盒子模型？

盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

盒子的大小是由盒子的宽度和高度决定

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom