Vue组件化京东金融项目实战详细笔记二：css模块化，js组件化，自适应等原理概念

一、概述

1、css模块化设计

设计原则
可复用：每一个样式都要最大限度的实现可复用性
能继承：每个样式尽量可以让其他样式继承
要完整：样式要完整，不要缺斤少两，让继承样式来补充
周期性迭代：不可能一步到位，要周期性的补充完善

设计方法
先整体化
后部分化
再颗粒化

考虑规则
先确定布局
确定多少个页面，每个页面是什么风格，有多少可重用代码
每个页面的功能
业务流程

2、css模块设计举例

先布局

文件举例
reset.scss用来设计不同浏览器兼容css样式
layout.scss用来存放布局样式
element.scss用来存放按钮，组件等样式
global.scss引入element.scss模块，实现复用继承

3、JS组件设计

设计原则
高内聚：任何一个组件内容，尽量封装到组件本身，每个组件不依赖于任何其它组件
低耦合：假如有两个基本相同的组件，我们不能让这两个组件有直接联系，而是要将他俩共有的部分抽象成一个抽象组件，然后共同继承这个抽象组件，实现低耦合
周期性迭代：和css一样，不可能一步到位，要周期性的补充完善

设计方法
先整体化
后部分化
再颗粒化

二、编写Sass模块化

我们先确定布局

@charset "UTF-8";//使用UTF-8编码

@mixin flex($direction:column,$inline:block){
	display: if($inline==block,flex,inline-flex);//如果inline不是默认值，采用inline-flex布局
	flex-direction: $direction;//定义布局方向，默认为列
	flex-wrap: wrap;//让弹性盒元素必要的时候拆行
}

然后到组件

@import "./layout.scss";//引入布局模块

//按钮
@mixin btn($size:14px,$color:#ffffff,$bgcolor:#F04752,$padding:5px,$radius:5px) {
	//动态样式
	padding: $padding;
	background-color: $bgcolor;
	border-radius: $radius;
	border: 1px solid $bgcolor;
	font-size: $size;
	color: $color;
	//静态样式
	text-align: center;
	line-height: 1;
	display:inline-block;
}
//列表
@mixin list($direction:cloumn) {
	@include flex($direction);//引用混合样式，传入布局方向
}
//面板
@mixin panel($bjcolor:#fff,$padding:0,$margin:20px 0,$height:12px,$textPadding:0 32px,$color:#333,$fontSize:32px) {
	background-color: $bjcolor;
	padding: $padding;
	margin: $margin;
	>h4{//面板里面的标题
		height: $height;//高
		line-height: $height;//行高
		text-overflow: ellipsis;//如果内容过长设置一个...显示
		white-space: nowrap;//不进行换行
		overflow: hidden;//超出内容隐藏
		text-align: center;//标题居中
		color: $color;//颜色
		font-size: $fontSize;//字体大小
	}
}

三、自适应

1、基本概念

GitHub详细解释：https://github.com/jawil/blog/issues/21

CSS像素
虚拟像素，可以理解为“直觉”像素，CSS和JS使用的抽象单位，浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px
px它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念

设备像素（DP）
真实的物理像素，由显卡提供物理像素点（具体多少看显卡性能，以及其它因素），我们代码中height：1px width:1px
就相当于一个物理像素点
顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。

逻辑像素
和CSS像素差不多，不是真实的物理像素，而是人为判定的逻辑尺寸

设备像素比DPR(device pixels ratio)
设备像素比（dpr 描述的是未缩放状态下，物理像素和CSS像素的初始比例关系
设备像素比(dpr) 是指在移动开发中1个css像素占用多少设备像素，如2代表1个css像素用2x2个设备像素来绘制。
设备像素比(dpr)，公式为1px = (dpr)^2 * 1dp，可以理解为1px由多少个设备像素组成；

viewport
viewport是非常重要的概念，分为三类
1、layout viewport 网站原始大小
document.documentElement.clientWidth可以获取layout viewport的宽度值
2、visual viewport 你浏览器的大小
window.innerWidth可以获取visual viewport的宽度
3、ideal viewport 完美适配你设备的尺寸
此类没有固定的一个宽度，和你设备宽度一致

rem和em的区别
rem是根据项目根标签确定单位，也就是< html>标签的font-size属性
em是根据它父级标签确定单位

2、工作原理

由上面的viewport和设备像素比概念可知

当你网页的设计尺寸宽度为320px，dpr=2，那么实际宽度为640
设备尺寸宽度为375像素，dpr=3，那么宽度为1125
那么响应的比例就是1125/640
这样我们就知道现在的设备上宽度应该自适应成什么样子