项目设计与原理分析

一、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

        分类：layout viewport    visual viewport    ideal viewport

        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事件，在事件里执行动作