前端零碎知识补漏

最新推荐文章于 2024-09-11 15:33:18 发布

ColaBottler

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量127

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/HumorousZWJ/article/details/104071068

版权

前言

主要用来记录自己在学习过程中碰到的一些问题和知识点，有错望指正

2020-01-22

使 input/ textarea/ select 标签为必填的属性为：required

input 单选框只有在 name 相同的情况下才有单选效果，label 标签的使用for=“id” 进行绑定，使得点击label也可以触发相应的 checked 发生改变

<input type="radio" name="sex" id="male" value="男"> <label for="male">男</label>
<input type="radio" name="sex" id="female" value="女"> <label for="female">女</label>

垂直对齐方式设置： vertical-align 详情见 CSS vertical-align

标题前icon的设置：

<link rel="shotcut icon" href="./imgs/favicon.ico"/>

font-face 的基本使用方法

@font-face{
	font-family: iconfont;
	src: url('./css/iconfont.woff') format('woff')
}

组件化编码的基本步骤：

拆分组件
静态组件
初始化显示
动态效果

window.confirm(message) ：弹出提示框，点击确认返回true，点击取消返回false
在编写Vue组件时要注意：数据定义在哪个组件，则更新数据的行为就应该定义在哪个组件

array.reduce 的使用，可以用来统计详情见 JavaScript reduce()

语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
例子：todos.reduce((total, todo) => total + (todo.finished?1:0), 0)

存储数据 localStorage和sessionStorage

其中 localStorage 将保存到本地硬盘，除非手动删除不然永久保存
而 sessionStorage将保存在内存中，关闭标签或窗口后消失

基本用法：

存储：window.localStorage.setItem('key', value)
读取：window.localStorage.getItem('key')
删除：window.localStorage.removeItem('key')

由于以键值对（字符串）的形式录入，如果要存入的是数组（对象）记得在存储时调用JSON.stringify(),读取时调用 JSON.parse() 来保持对象的结构

2020-01-27

为什么vue中的data要采用函数形式：如果写成对象的形式，所有组件实例就会共用一个数据空间。详：

组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

2020-04-24

判断数组是否包含某对象

JSON.stringify(arr).indexOf(JSON.stringify(obj)) === -1

判断两个对象是否相等

JSON.stringify(obj1) === JSON.stringify(obj2)

this的指向问题

this 指向的是直接调用该函数的对象
任何函数本质上都是通过对象来进行调用，如果没有指定对象则this指向window（global）
在严格模式下，this 不允许指向全局对象

关于JS代码是否要加分号的问题

加不加分号只是一种代码风格，视情况而定
绝大部分情况下都不需要加分号
在句子以小括号/中括号开头时，需在其前一句末添加分号

深拷贝

如果只有一层，可以利用JSON.stingify和JSON.parse来进行深拷贝
```
let b = JSON.parse(JSON.stringify(a))
```
但也有其局限性，详情见使用JSON深拷贝的局限性

如果不考虑循环引用的情况下，可以采用以下方法进行深拷贝

function deepClone(obj) {
// 如果obj为null或基本数据类型，则直接返回
if (obj === null || typeof obj !== 'object') {
    return obj
}

let newObj
// 如果obj为数组或对象，则对其每项进行递归拷贝
if (Array.isArray(obj)) {
    newObj = []
    obj.forEach((item) =>{
        newObj.push(deepClone(item));
    })
} else if (typeof obj === 'object') {
    newObj = {}
    for (let key in obj) {
        newObj[key] = deepClone(obj[key]);
    }
}
return newObj