一、CSS模塊化設(shè)計(jì)
1、設(shè)計(jì)原則
? ? a、可復(fù)用、能集成、要完整
? ? b、周期性迭代
2、設(shè)計(jì)方法
? ? a、先整體、后部分、再顆粒化
? ? ? ? 布局——頁(yè)面——功能——業(yè)務(wù)
? ? b、先抽象、再具體
二、JS組件設(shè)計(jì)
1、設(shè)計(jì)原則
? ? a、高內(nèi)聚、低耦合
? ? b、周期性迭代
2、設(shè)計(jì)方法
? ? a、先整體、后部分、再顆?；?/p>
? ? b、盡可能抽象
三、自適應(yīng)
1、基本概念
? ? a、CSS像素、設(shè)備像素、邏輯像素、設(shè)備像素比
? ? ? ? CSS像素：樣式表里使用的單位px
? ? ? ? 設(shè)備像素：設(shè)備的物理像素，單位pt
? ? ? ? 邏輯像素：設(shè)備獨(dú)立像素，等同于CSS像素
? ? ? ? 設(shè)備像素比：DPR = 設(shè)備像素/CSS像素，在移動(dòng)開發(fā)中1個(gè)CSS像素占用多少設(shè)備像素
? ? b、viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
????????分類：layout viewport????visual viewport????ideal viewport
????????width=device-width的作用是使得layout viewport ==?visual viewport
? ? c、rem
? ? ? ? rem是相對(duì)于HTML根元素字體尺寸進(jìn)行計(jì)算
? ? ? ? em是相對(duì)于父元素字體尺寸進(jìn)行計(jì)算
2、工作原理
? ? a、利用viewport和設(shè)備像素比調(diào)整HTML基準(zhǔn)像素
? ? b、利用px2rem自動(dòng)轉(zhuǎn)換css單位
四、SPA設(shè)計(jì)
1、設(shè)計(jì)意義
? ? a、前后端分離
? ? b、減輕服務(wù)器壓力
? ? c、增強(qiáng)用戶體驗(yàn)
? ? d、Prerender預(yù)渲染優(yōu)化SEO
2、工作原理
? ? a、History API
? ? ? ? 要能執(zhí)行打開的動(dòng)作
? ? ? ? 要有歷史記錄操作單
? ? ? ? 通過(guò)“前進(jìn)”、“后退”、“控制”操作能回到任何一個(gè)步驟
? ? ? ? pushState創(chuàng)建一個(gè)歷史記錄
? ? ? ? onpopstate響應(yīng)瀏覽器的前進(jìn)、后退、控制事件
? ? b、Hash
? ? ? ? 當(dāng)改變某一個(gè)地址的時(shí)候（location.hash），監(jiān)聽hashchange事件，在事件里執(zhí)行動(dòng)作
