前端再学习

1. HTML相关

1. labael标签

定义：label标签主要用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点。

性质：内联标签，不允许嵌套，需要闭合

<span class="title">label的作用</span>
<div>
    <label for="input01">绑定第一个input</label>
    <input id="input01">
</div>

当点击文本绑定第一个input时，被绑定的inpyt就会获得焦点

Label中两个属性非常有用，一个是for，一个就是accesskey

for属性

for属性用来绑定需要绑定的元素，值为要绑定的元素的id

<label for="input01">绑定第一个input</label>
<input id="input01">

注意：要将 lable 绑定到控件，必须将 label 元素的 for 属性值设置为与该控件的 id 。将 label 绑定到控件的 name 属性没有意义。但是，如果要提交表单，就必须为 label 元素所绑定到的控件指定 name。

accesskey属性

表示访问label标签所绑定的元素的热键，当按下热键，所绑定的元素将获取焦点。

<label for="input02" accesskey="P">绑定第二个input（快捷键为ALT+P/SHIFT+ALT+P）</label>
<input id="input02">

这里可以看到，accesskey属性值里设置的热键在使用的时候要加上alt

局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先级或浏览器的快捷键。

注意：如果用户单击 LABEL，则会先触发 LABEL 上的 onclick 事件，然后触发由 htmlFor 属性所指定的控件上的 onclick 事件。按下 LABEL 设定的快捷键将设置焦点但并不触发 onclick 事件。

2. img标签

所有的 img 元素 必须 有 alt 属性。 alt 的属性值有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。

注意： 如果图片是纯装饰性的，把 alt 的属性值设置为空是最佳实践。

3. input标签

3.1 type

text 文本框

<input type="text">

radio 单选框

name：所有关联的单选按钮应该拥有相同的 name 属性。 创建一组单选按钮，选中其中一个按钮，其他按钮即显示为未选中，以确保用户只提供一个答案。

最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 单选按钮的 id 属性值相同。 这使得辅助技术能够在标签和相关的 input 元素之间建立关联关系，如下

<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">indoor</label>

checkboxes复选框

就好比多项选择题，正确答案有多个。

所有关联的复选框应该拥有相同的 name 属性。

和单选框一样，可以配合label标签使用

<input id="loving" type="checkbox" name="personality">
<label for="loving"> Loving</label>
<input id="loving" type="checkbox" name="personality">
<label for="loving"> Loving</label>
<input id="loving" type="checkbox" name="personality">
<label for="loving"> Loving</label>

注意：用 checked 属性可以把第一个复选框和单选按钮都设置为默认选中

3.2 value

默认值（可修改）

<input type="text" value="123" >

注：如果是单选框和复选框，提交表单时，所选项的值会发送给服务端。 radio 和 checkbox 的 value 属性值决定了发送到服务端的实际内容。

3.3 placeholder

占位符（不可修改）

<input type="text" placeholder="cat photo URL">

3.4 required

指定某些字段为必填项（required），只有当填写了该字段后，才可以提交表单。

<form action="https://www.freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="cat photo URL" required >
    <button type="submit">Submit</button>
</form>

3.5 autocomplete属性

input 的属性autocomplete 默认为on ，其含义代表是否让浏览器自动记录之前输入的值
很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获取到，可以在input中加入autocomplete="off" 来关闭记录
系统需要保密的情况下可以使用此参数

以下是菜鸟教程给出的注释：

定义和用法

autocomplete 属性规定输入字段是否应该启用自动完成功能。

自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

注释：autocomplete 属性适用于

，以及下面的 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

4. a标签

href

href 是锚点元素的另一个属性，它用来指定链接的 URL：

<a href="https://www.freecatphotoapp.com">cat photos</a>

target="_blank"

target 是锚点元素的一个属性，它用来指定链接的打开方式。 属性值 _blank 表示链接会在新标签页打开

<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>

网页内部跳转

1. 将链接的 href 属性值设置为一个哈希符号 # 加上你想内部链接到的元素的 id

<a href="#footer">Jump to Bottom</a>

1. 然后将相同的 id 属性添加到你链接到的元素中

<footer id="footer">Copyright Cat Photo App</footer>

注意：这个方法在typora内部也起作用！！

4. lorem ipsum text占位符

Lorem ipsum text 自 16 世纪以来就在排版中被用作占位符，这一习惯也在 Web 开发中得以延续。

在网站还没有建设好的时候会经常出现这个占位符，意思就是让人门不要去理解段落的含义而是只专注于文章的字形或者版形。

2. CSS相关

1. 单位vh 和 vw

css中的vh是一种视窗单位，也是相对单位。相对于视窗的高度。视窗被均分为100单位的vh。vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的。

比如:

h1{font-size:8vh;}
height:100vh
width:90vw;

如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

2. display : flex

1. display : flex 弹性布局

/* 主要使用的属性 */
body{
    display: flex;
    /* 默认为横向布局，更改为纵向布局 */
    flex-direction: column;
    /* 水平居中 */
    justify-content: center;
    /* 分散对齐 */
	justify-content: space-around;
    /* 两端贴标对齐(从两边向中间对齐) */
	justify-content: space-between;
    /* 垂直居中 */ 
    align-items: center;
    /* 允许h */
    flex-wrap: wrap;
}

详细学习

flex浏览器支持

2.1 Flex布局是什么？

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

 .box{     display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/     display: flex; //将对象作为弹性伸缩盒显示 } 

当然，行内元素也可以使用Flex布局。

 .box {     display: inline-flex; //将对象作为内联块级弹性伸缩盒显示 } 

2.1 基本概念

采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

结构示意图

容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。

• main start/main end：主轴开始位置/结束位置；
• cross start/cross end：交叉轴开始位置/结束位置；
• main size/cross size：单个项目占据主轴/交叉轴的空间；

2.1 容器属性

设置在容器上的属性有6种。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-item
• align-content

flex-direction属性：决定主轴的方向（即项目的排列方向）

 .box {    flex-direction: row | row-reverse | column | column-reverse; } 

• row（默认）：主轴水平方向，起点在左端；
• row-reverse：主轴水平方向，起点在右端；
• column：主轴垂直方向，起点在上边沿；
• column-reserve：主轴垂直方向，起点在下边沿。

主轴的4个方向

flex-wrap属性：定义换行情况

默认情况下，项目都排列在一条轴线上，但有可能一条轴线排不下。

一条轴线排不下

  .box{    flex-wrap: nowrap | wrap | wrap-reverse; } 

• nowrap（默认）：不换行；

  

  不换行nowrap

• wrap：换行，第一行在上方；

  

  换行，第一行在上

• wrap-reverse：换行，第一行在下方。

  

  换行，第一行在下

flex-flow属性：flex-direction和flex-wrap的简写，默认row nowrap

 .box{     flex-flow: <flex-direction> || <flex-wrap>; } 

justify-content属性：定义项目在主轴上的对齐方式。

对齐方式与轴的方向有关，本文中假设主轴从左到右。

 .box {    justify-content: start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline; } 

• flex-start（默认值）：左对齐；

  

  左对齐

• flex-end：右对齐；

  

  右对齐

• center：居中；

居中对齐

• space-between：两端对齐，项目之间间隔相等；

两端对齐

• space-around：每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍。

两侧间隔相等

align-items属性：定义在交叉轴上的对齐方式

对齐方式与交叉轴的方向有关，假设交叉轴从下到上。

 .box{     align-items: flex-start | flex-end | center | baseline | stretch; } 

• flex-start：起点对齐；

起点对齐

• flex-end：终点对齐；

终点对齐

• center：中点对齐；

中点对齐

• baseline：项目的第一行文字的基线对齐；

基线对齐

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性：定义多根轴线的对齐方式

如果项目只有一根轴线，该属性不起作用。
所以，容器必须设置flex-wrap：・・・；

 .box{     align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 

• flex-start：与交叉轴的起点对齐；

起点对齐

• flex-end：与交叉轴的终点对齐；

终点对齐

• center：与交叉轴的中点对齐；

中点对齐

• space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布；

轴线之间等间距

• space-around：每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍；

轴线两侧等间距

• stretch（默认值）：轴线占满整个交叉轴。

项目未设置高度时

有意思的是，当你不给项目设置高度但是给容器设置align-content不为stretch时，同一轴线上的项目的高度将等于项目中高度最高的项目。

2.1 项目的属性

设置在项目上的属性也有6个。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order属性：定义项目的排列顺序。

数值越小，排列越靠前，默认为0，可以是负值。

 .item {     order: <整数>; }

展示效果不明显，直接盗图

flex-grow属性：定义项目的放大比例

默认值为0，即如果空间有剩余，也不放大。
可以是小数，按比例占据剩余空间。

默认情况

  .item{     flex-grow: <数字>; } 

若所有项目的flex-grow的数值都相同，则等分剩余空间

等分剩余空间

若果有一个项目flex-grow为2，其余都为1，则该项目占据剩余空间是其余的2倍

不等分占据

flex-shrink属性：定义项目的缩小比例

默认值都为1，即如果空间不足将等比例缩小。
如果有一个项目的值为0，其他项目为1，当空间不足时，该项目不缩小。
负值对该属性无效，容器不应该设置flex-wrap。

  .item{     flex-shrink: <非负整数>; } 

如果一个项目设置flex-shrink为0；而其他项目都为1，则空间不足时，该项目不缩小。

设置flex-shrink为0的项目不缩小

如果所有项目都为0，则当空间不足时，项目撑破容器而溢出。

不缩小

如果设置项目的flex-shrink不为0的非负数效果同设置为1。

flex-basis属性：定义在分配多余空间之前，项目占据的主轴空间。

默认值为auto，浏览器根据此属性检查主轴是否有多余空间。

  .item{     flex-basis:  <auto或者px>; } 

注意设置的flex-basis是分配多余空间之前项目占据的主轴空间，如果空间不足则默认情况下该项目也会缩小。

设置flex-basis为350px，但空间充足

空间不足，项目缩小，小于设定值

flex属性是flex-grow，flex-shrink和flex-basis的简写

默认值为0 1 auto，第一个属性必须，后两个属性可选。

 .item{     flex: none | [<flex-grow><flex-shrink><flex-basis>]; }  

• flex:auto;``flex: 1 1 auto;；
• flex: none;``flex: 0 0 auto；

 ####align-self属性：允许单个项目与其他项目有不一样的对齐方式 >默认值为auto，表示继承父元素的align-items属性，并可以覆盖align-items属性。  

.item{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

详细学习文档：布局神器display:flex | 易学教程 (e-learn.cn)

3. display : grid 网格布局

4. css中常见的@规则

css中常见的@规则_〃不枉俗尘づ的博客-CSDN博客

5. 自定义属性

创建一个 CSS 属性（变量），你只需要在变量名前添加两个连字符号 --，并为其赋值即可。

--penguin-skin: gray;

创建属性（变量）后，在CSS中通过var来调用。

background: var(--penguin-skin);

还可以在后面设置一个备用值，以便在自定义属性不可用的时候使用

background: var(--pengiun-skin,black);

注意：

自定义属性（变量）也会有作用域，变量会在创建变量的选择器里可用。 同时，在这个选择器的后代选择器里也是可用的。

如果想要全局生效，呢么就可以将自定义属性都包裹在 :root 里

/* 全局sh */
:root {
    --penguin-belly : pink;
  }

6. 背景模糊

7. 文本的一些其它美化

/* 使文本不换行 */
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 超出的内容为三个小点 ... */
text-overflow: ellipsis;

3. JavaScript相关

1. 闭包

简单讲，闭包就是指有权访问另一个函数作用域中的变量的函数。
MDN 上面这么说：闭包是一种特殊的对象。
它由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。
换个说法，闭包的关键在于：外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象，这就是闭包的重要概念。

相关解释：(9条消息) 什么是闭包？_Matildan的博客-CSDN博客_闭包

2. 回调函数

回调函数就是一个参数，将这个函数作为一个参数传到另一个函数里面，在执行那个函数的时候，执行传进去的这函数。这个过程就叫做回调。

但是在Vue中推荐使用$emit来进行回调传递

3. 短路运算符和或运算符

1. 短路运算符 &&

​ 可以理解为if，当前面表达式的结果为真时，返回后面的表达式

var a= 1 && 1 + 2; 
执行document.write(a);的值结果为3

​ 反过来，当前面表达式的结果为假时，就返回0或者false

 var b = 0 && 1 + 2;
执行document.write(b);的结果值为0。

​ 如果有多个表达式，同理，依次往后判断，全真才为真，否则只要出现一个假，结果值便为0

2. 或运算符 ||

   刚好和短路运算符反过来。只要有一个 为真就是真，只有全为假的时候才为假，返回最后面的表达式

   var a = 2 || 1
   document.write(a) = 2
   var b = 0 || 1
   document.write(b) = 1
   var c = 0 || 0 || 1
   document.write(c) = 1
   

4. promise和async/await区别

拓展：js中同步、异步
js的同步和异步问题通常是指ajax的回调，如果是同步调用，程序在发出ajax调用后就会暂停，直到远程服务器产生回应后才会继续运行。而如果是异步调用，程序发出ajax调用后不会暂停，而是立即执行后面的代码，服务器返回信息后会自动触发回调函数进行处理。相比较而言，异步调用的性能最佳，程序不会出现卡顿的现象，而同步调用则通常用于需要立即获得结果并实时处理的情况。

promise的用法

Promise,简单来说就是一个容器，里面保存着某个未来才会结束的时间(通常是一个异步操作的结果)

基本语法：

 let p = new Promise((resolve,reject) => {
        //...
        resolve('success')
    });
    
    p.then(result => {
        console.log(result);//success
    });
12345678

promise共有三个状态

pending（执行中）、resolve（成功）、rejected（失败）

链式调用

错误捕获

Promise.prototype.catch用于指定Promise状态变为rejected时的回调函数，可以认为是.then的简写形势，返回值跟.then一样

`let p = new Promise((resolve,reject) => {
    reject('error');
});

p.catch(result => {
    console.log(result);
})`
1234567

async、await

简洁：异步编程的最高境界就是不关心它是否是异步。async、await很好的解决了这一点，将异步强行转换为同步处理。
async/await与promise不存在谁代替谁的说法，因为async/await是寄生于Promise，Generater的语法糖。

用法

async用于申明一个function是异步的，而await可以认为是async wait的简写，等待一个异步方法执行完成。
规则：
1 async和await是配对使用的，await存在于async的内部。否则会报错
2 await表示在这里等待一个promise返回，再接下来执行
3 await后面跟着的应该是一个promise对象，（也可以不是，如果不是接下来也没什么意义了…）

写法：
`async function demo() {
let result01 = await sleep(100);
//上一个await执行之后才会执行下一句
let result02 = await sleep(result01 + 100);
let result03 = await sleep(result02 + 100);
// console.log(result03);
return result03;
}

demo().then(result => {
    console.log(result);
});`
123

错误捕获

如果是reject状态，可以用try-catch捕捉

let p = new Promise((resolve,reject) => {
    setTimeout(() => {
        reject('error');
    },1000);
});

async function demo(params) {
    try {
        let result = await p;
    }catch(e) {
        console.log(e);
    }
}

demo();
123456789101112131415

区别：

1 promise是ES6，async/await是ES7
2 async/await相对于promise来讲，写法更加优雅
3 reject状态：
    1）promise错误可以通过catch来捕捉，建议尾部捕获错误，
    2）async/await既可以用.then又可以用try-catch捕捉

5. 节流和防抖

节流和防抖的目的：都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，防止在短时间内频繁触发同一事件而出现延迟，假死或卡顿的现象。
节流和防抖的区别：
节流：目前有一事件A设置了定时器，那么在delay之前触发，都只会触发一次
防抖：如果不断在delay之前重新触发，那么定时器会不断重新计时，最终会在最后一次完后才执行，对于需要实时响应的，应该用节流。

防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。

代码实现：

可以结合回调函数打开或者关闭节流阀

节流阀1

if(flag){
    flag = false;//关闭节流阀
    ...//执行响应操作
    flag = true；//打开节流阀
    
}

var isloading:false
async getGoodsList(cb){
    // 打开节流阀
    this.isloading = true
    // 发起数据请求
    const {data:res} = await uni.$http.get('http://api-ugo-web.itheima.net/api/public/v1/goods/search',this.queryObj)
    // 关闭节流阀
    this.isloading = false
    if(res.meta.status !==200) return uni.showMsg();
    this.goodsList = [...this.goodsList,...res.message.goods]
    this.total = res.message.total
},

防抖

// input输入事件的处理函数
input(e){
    // 防抖动（就算防止用户输入一个字符就进行一次ajax请求，浪费资源并且影响体验）
    // 当用户进行输入的时候，清除timer
    clearTimeout(this.timer);
    // 启动一个延时器，并且把timerId赋值给this.timer
    this.timer = setTimeout(() =>{
        // 如果500毫秒内，没有触发新的输入事件，则为搜索关键词赋值
        this.kw = e;
        this.getSearchList()
    },500)
},

4.Vue相关