项目设计与原理分析

一、css模块化设计（module，新）

1. 设计原则

• 可复用能继承要完整
• 周期性迭代

2. 设计方法

• 先整体后部分再颗粒化
• 先抽象再具体

二、js组建设计

1. 设计原则

• 高内聚低耦合
• 周期性迭代

2. 设计方法

• 先整体后部分再颗粒化
• 尽可能抽象

三、自适应

1. 基本概念

• css像素、设备像素（物理像素）、逻辑像素（同css像素）、设备像素比 https://github.com/jawil/blog/issues/21

  • 设备像素比 = css像素/物理像素

• viewport

  • <meta name="viewport" content="width=device-width,initial-scale=1.0"> - width:控制viewpoint的大小，可以指定的一个值，如600，或者特殊的值，如device-width为设备的宽度（单位为缩放为100%时的css像素）。 - height：和width相对应，指定高度。 - initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。 - maximum-scale：允许用户缩放到的最大比例。 - minimum-scale：允许用户缩放到的最小比例。 - user-scalable：用户是否可以手动缩放（一般不允许）。

  • 三类：layout viewport（页面窗口，大），visual viewport（可视区域的大小），ideal viewport（ideal viewport的宽度等于移动设备的屏幕宽度）
  • width=device-width所做的就是将layout viewport=ideal viewport

• rem（相对于HTML标签）/em（相对于父级元素）

2. 工作原理

• 利用viewport和设备像素比调整基准像素
• 利用px2rem自动转换css单位

四、SPA设计

1. 设计意义

• 前后端分离（前端做业务逻辑，后端处理接口数据）
• 减轻服务器压力（不需要每个页面都请求服务器）
• 增强用户体验
• Prerender预渲染优化seo （此处有链接）

2. 工作原理

• History API（更优雅，但是对浏览器有要求）
  • 要能执行打开的动作
  • 要有历史操作单
  • pushState：创建历史记录
  • onpopstate：响应浏览器的前进后退
• Hash（兼容性最好的方案）
  • 要能执行打开的动作
  • 要有历史操作单
  • hashchange：当地址改变时，修改hash，监听hashchange事件，在事件里作相应的动作
  • location.hash： 五、构建工具
• webpack：安装、配置、plugin
• Babel：安装、配置、loader
• webpack dev-server：安装、配置

六、上线指导

• html
• css
• javascript

转载于:https://my.oschina.net/stefanieliang/blog/1631427