项目设计与原理分析

一、CSS模块化设计

1、设计原则

a、可复用、能集成、要完整

b、周期性迭代

2、设计方法

a、先整体、后部分、再颗粒化

    布局——页面——功能——业务

b、先抽象、再具体

二、JS组件设计

1、设计原则

a、高内聚、低耦合

b、周期性迭代

2、设计方法

a、先整体、后部分、再颗粒化

b、尽可能抽象

三、自适应

1、基本概念

a、CSS像素、设备像素、逻辑像素、设备像素比

CSS像素：样式表里使用的单位px
设备像素：设备的物理像素，单位pt
逻辑像素：设备独立像素，等同于CSS像素
设备像素比：DPR = 设备像素/CSS像素，在移动开发中1个CSS像素占用多少设备像素

b、viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width的作用是使得layout viewport == visual viewport

c、rem

rem是相对于HTML根元素字体尺寸进行计算

em是相对于父元素字体尺寸进行计算

2、工作原理

a、利用viewport和设备像素比调整HTML基准像素

b、利用px2rem自动转换css单位

四、SPA设计

1、设计意义

a、前后端分离

b、减轻服务器压力

c、增强用户体验

d、Prerender预渲染优化SEO

2、工作原理

a、History API

    要能执行打开的动作

    要有历史记录操作单

    通过“前进”、“后退”、“控制”操作能回到任何一个步骤

    pushState创建一个历史记录

    onpopstate响应浏览器的前进、后退、控制事件

b、Hash

    当改变某一个地址的时候（location.hash），监听hashchange事件，在事件里执行动作