一、Rem
1、设置rem 为单位的长宽 或 字体大小
2、寻找一个标准 iphone5 320 / 16
3、比例公式 ：标准屏幕宽度 / 标准字体大小 = 新屏幕宽度 / 新的字体大小
新屏幕宽度 = window.innerWidth
新的字体大小 = window.innerWidth / (320 / 16)
4、监听窗口大小改变 window 的 'resize' 监听事件
监听窗口加载 window 的 'load' 监听事件
5、将新字体的大小设置给html标记
二、等比例缩放
paddingTop使用百分比作为参数，那么这个百分比主要针对父容器的宽度
比例原理：父元素的第一个子元素的paddingTop百分比就是父元素宽度的百分比
三、bootstrap
是一个用于制作页面界面的框架
1、安装
1. 通过`npm i bootstrap`
在html中引入
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>2. 通过官网下载对应的dist的安装包
解压后里面有css和js文件
2、布局
<body>
<!-- 响应式 -->
<!-- <div class="box"></div> -->
<!-- 断点 -->
<!-- container-{breakpoint} -->
<!-- bg：background -->
<div class="container bg-danger"> XS (Extra Small) </div>
<div class="container-sm bg-warning"> SM (Small) </div>
<div class="container-md bg-info"> MD (Medium) </div>
<div class="container-lg bg-danger"> LG (Large) </div>
<div class="container-xl bg-warning"> XL (Extra Large) </div>
<div class="container-xxl bg-info"> XXL (Extra Extra Large) </div>
<div class="container-fluid bg-danger"> fluid (Fluid) </div>
</body>设置断点的列
col 加断点后，会根据断点的区间切换比例大小
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-lg-4 bg-danger">1</div>
<div class="col-sm-6 col-lg-4 bg-warning">2</div>
<div class="col-sm-6 col-lg-4 bg-info">3</div>
</div>
</div>网格布局
网格（table=> container tr=> row td => col）
网格布局的一行最多只能有 12 列
flex
父元素设置位置 align-items-{start|center|end|baseline}
子元素设置位置 align-self-{start|center|end}
flex-{column|row} flex:1 = flex-grow:1 + flex-shrink:1
浮动
float-{breakpoint}-{start:end} 浮动
float-none 消除浮动影响
color
text-{color}
bg-{color}
btn-{color}
link-{color}
sizing 尺寸
w:width h:height 25 50 75 100 auto
网页全窗口
vh: viewport（视口） height 100%
vw: viewport（视口） width 100%
spacing
<!--
m margin
p padding
___
t top
b bottom
s start
e end
x left & right
y bottom & top
___
0
1
2
3
4
5
auto
-->
3、常见的组件
button、button-group、cards、dropdown、modal、Navbar
dropdown 组件
dropdown 弹出效果 需要bootstrap.bundle.js
dropdown-menu 菜单列表
4、表单验证
原生的表单验证
required 必填项的属性
minlength 最小字符输入个数
maxlength 最多字符输入个数
min 数值的最小要求
max 数值的最大要求
pattern 要求正则表达式格式
<input type="text" id="stuName" class="form-control" required minlength="2" maxlength="3" />
<input min="16" max="30" type="number" id="stuAge" class="form-control"/>
<input pattern="stu[0-9]{5}" type="text" id="stuID" class="form-control"/> 自定义原生表单验证
validity 每个表单元素（input select）的验证状态的对象
validity.valid 只有当表单元素通过校验，valid = true 否则为false
validity.patternMismatch 表单中正则表达式pattern不匹配 返回true
validity.rangeOverflow 表单中要求数值超出max不匹配 返回true
validity.rangeUnderflow 表单中要求数值低于min不匹配 返回true
validity.tooLong 表单中输入的内容超出了maxlength，返回为true
validity.tooShort 表单中输入的内容低于minlength，返回为true
validity.typeMismatch 与表单中输入要求type 不匹配，返回为true（type="email" 输入电话）
validity.valueMissing 如果表单中有required限制，但步步输入 返回为truebootstrap自动验证
novalidate 屏蔽掉原生的校验提示，使用bootstrap中的校验提示
1.对表单标记进行校验属性设置（required min max...）
2.在表单标记的后方 class为 valid-feedback 的div ：当校验成功时，会显示的内容
3.在表单标记的后方 class为 invalid-feedback 的div ：当校验不成功时，会显示的内容
4.在js中设置表单的事件监听 button form
5.阻止form事件对象的默认行为 以及冒泡
6.为form标记添加was-validated class属性
四、懒加载
懒加载就是页面中看不到时，就不去加载它，当页面中出现该内容时再去加载
懒加载多用于图片和媒体文件
好处：
好处在于用户看不见的东西就不用使用浏览器去下载了
还可以让页面加载更快
// 当 container.scrollTop > img.offsetTop - innerHeight 时，应该加载图片
let img = document.querySelector('img')
let container = document.querySelector('.container')
// 给容器绑定滚动事件
container.addEventListener('scroll', ev => {
console.log('scroll')
// container.scrollTop
// 当滚动高度足够大，即将显示图片时
if (container.scrollTop > img.offsetTop - innerHeight) {
// 取出data-src赋值给图片的src
img.src = img.getAttribute('data-src')
}
})五、React
React 是一个用于构建用户界面的`JavaScript库`。
用户界面: HTML页面(前端)
React主要用来写HTML页面,或`构建Web应用`
如果从MVC的角度来看, React仅仅是视图层(V ) , 也就是只负责视图的渲染,而并非提供了
完整的M和C的功能
1、JSX（是JS的预编译语言，需要通过babel处理成JavaScript）
1、JSX中的元素的属性需要用驼峰法命名
2、class在JSX中为className for为htmlFor
3、没有子节点的React元素可以用`/>` 结束
4、推荐：使用`小括号包裹JSX`，从而避免JS中的自动插入分号陷阱
5、所有React组件名称均用驼峰法命名
2、渲染
1、条件渲染
// if else 条件渲染
let isLoading = false
function Content(){
if(isLoading){
return (<h2>正在加载...</h2>)
}else{
return (<h2>加载完成</h2>)
}
}
// 逻辑与，参与布局中的脚本设置
function Content4(){
return (<div className="content3">
{isLoading && (<h2>正在加载...</h2>)}
</div>)
}2、列表渲染
const students = [
{id:1, name:'张三'},
{id:2, name:'李四'},
{id:3, name:'王五'}
]
// 将数组渲染至列表中
function List(){
return (
<ul>
{students.map((item,index) => <li key={index}>{item.name}</li>)}
</ul>
)
}3、组件的定义方式
组件的定义方式：1、函数定义组件 2、class定义组件
1、函数组件定义方式:
首页字母大写、
return 返回React元素或者null,返回null时就不显示内容
注意：return的React元素有且只有一个父级元素作为容器
2、类组件的定义方式：
使用class 定义一个类，类名必须首字母大写
使用extends 继承React.Component
定义一个render函数，作为渲染组件的函数
在render函数定义return返回值，返回React元素
函数组件又被称为“无状态组件” 类组件又被称为“有状态组件”
4、事件
事件绑定的基本格式 on + 事件名称
事件名称 用驼峰法命名 比如 onClick onFocus onMouseDown
在类中调用函数，要使用 this.函数
5、生命周期
意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能，分析组件错误原因等
- 组件的生命周期:组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程
- 生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数。
- 钩子函数的作用:为开发人员在不同阶段操作组件提供了时机。
- 只有"类组件"才有生命周期
1、创建时
constructor -> render -> componentDidMount
渲染页面完成前 constructor（1、初始化state，2、绑定事件函数）
渲染页面 render ： setState 一旦修改成功，render会执行一次
注：render中不能用setState （因为会陷入死循环）
渲染页面完成后 componentDidMount（1、发送网络请求 ：ajax axios fetch...
2、DOM操作： document.querySelector()...）
2、更新时
shouldComponentDidMount->render -> componentDidUpdate
更新时触发条件：
1、有新的props传入
2、setState方法被调用（只有组件本身的setState，才能触发组件本身更新事件,不会更新其他组件的更新事件）
3、forceUpdate(强制重新渲染)执行
3、卸载
卸载生命周期
一旦组件消失就会调用这个函数
6、Fragments
1、组件中去掉最外层的React元素包裹
2、只留下内部的React元素渲染至指定区域中
function App(){
return (
// <div>
// <h2>组件</h2>
// <h2>组件</h2>
// </div>
<React.Fragment>
<h2>组件</h2>
<h2>组件</h2>
</React.Fragment>
)
}7、refs
Ref 主要作用，访问React DOM 结构（非受控组件）
ref在 类组件中的使用
1、通过React.createRef 创建Ref对象的变量
2、在指定的React元素中设置ref属性，属性值为上述的变量
3、通过 变量.current 访问React 元素以及其中内容
函数组件 中的ref使用
1、通过React.useRef() 创建一个变量
2、设置React元素中的ref属性，其属性值是上述变量
3、通过 变量.current 访问React 元素以及其中内容
在React 元素中的ref属性，可以设置一个回调函数
ref = {(el) => {}} 上述的el就是 "变量.current" 就是设置ref属性的React元素
410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
