乐趣区

关于前端:202201遇到的知识点总结

1.property 和 attribute 的区别是什么?

property 是 js 属性,批改的是 js 对象;
attribute 是 html 属性,用 getAttribute 和 setAttribute 对 html 属性进行查问和批改;
get 和 set attribute 时会触发 dom 查问或重绘、重排,频繁操作会影响页面性能;

2.<img> 能够做打点统计

将 url 设置为后端接口地址,每次进入页面就会加载图片,申请 url,后端能够以此进行统计。

这种计划的长处:

跨域,<img> 能规避同源策略;简直没有浏览器兼容问题;

毛病:

某些网站会屏蔽图片;

3.opacity 和 visibility

opacity: 0; 看不见摸得着
visibility: hidden; 看不见摸不着
所以要实现元素暗藏而且有动画成果时,须要两者配合应用。

.test {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    &.show {
            visibility: visible;
            opacity: 1;
    }
}

4.float 的破坏性

float 会使父标签呈现坍塌景象,起因是 float 会使元素脱离文档流,根本原因是 float 的设计初衷是解决文字盘绕图片的问题。
所有 float 元素的父容器都应该 clearfix:

.clearfix:after{
    content: '';
    display: table;
    clear: both;
}
.clearfix {*zoom: 1; /* 兼容低版本 ie*/}

5.element-plus 的分页组件 el-pagination 默认是英文

文案如何显示为中文?
办法 1:适宜全副引入

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {locale: zhCn})

办法 2:适宜按需引入

import {ElPagniation} from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import {use as localeUse} from 'element-plus/lib/locale'

localeUse(lang)
app.use(ElPagniation)

办法 3:适宜按需主动引入

<template>
  <el-config-provider :locale="zhCn">
    <router-view></router-view>
  </el-config-provider>
</template>

import {ElConfigProvider} from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'

6.proxy 绝对于 defineProperty 的长处

Object.defineProperty 必须事后劫持属性,被劫持的属性能力被监听到。后增加的属性须要手动再次劫持。
proxy 代理了整个对象,不必事后劫持,也不必在新增属性的时候手动劫持,在属性变动的时候通过 get/set 失去告诉。

退出移动版