嘎嘎学习之前端再学习 | 青训营笔记

闫池
111 阅读7分钟

这是我参与「第四届青训营 」笔记创作活动的第十六天

1. HTML相关

1. labael标签

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

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

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

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

image-20220421160000411

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">

image-20220421155759477

这里可以看到，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">

image-20220426010422341

radio 单选框

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

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

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

image-20220426011331771

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>

image-20220426011816147

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

3.2 value

默认值（可修改）

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

image-20220426005617493

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

3.3 placeholder

占位符（不可修改）

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

image-20220426005704336

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>

image-20220426010138000

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;
 }

详细学习

详细学习文档：布局神器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

  1. 或运算符 ||

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

    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)
},
avatar
文章
阅读
粉丝