阅读 383

工作中常用到的前端小知识(干货)

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」       ,赢取创作大礼包,挑战创作激励金

js篇

Proxy和Object.defineProperty

关于Object.defineProperty

关于Object.defineProperty的一些特点就不细说了,随便搜索一下实在是太多了,这里说说者的一些缺陷吧!

  1. Object.defineProperty的第一个缺陷,无法监听数组变化。 但是作为Object.defineProperty的课代表的Vue的文档提到了Vue是可以检测到数组变化的,但是只有以下八种方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
复制代码
  1. Object.defineProperty的第二个缺陷,只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历,如果属性值也是对象那么需要深度遍历,显然能劫持一个完整的对象是更好的选择。

Proxy

严格来讲Proxy应该被称为代理而非劫持, Proxy可以直接监听对象而非属性,可以直接监听数组的变化

Proxy在ES2015规范中被正式发布,它在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写,我们可以这样认为ProxyObject.defineProperty的全方位加强版

Proxy的其他优势

Proxy有多达13种拦截方法,不限于applyownKeysdeletePropertyhas等等是Object.defineProperty不具备的。

Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改。

localStorage、sessionStorage、会话cookie

localStorage、sessionStorage、会话cookie区别

SessionStorageLocalStorage 使用方法基本一致,唯一不同的是,一旦关闭页面,SessionStorage 将会删除数据;因此这里主要以 LocalStorage 为例

  • LocalStorage 的特点是:
    • 使用 Key-Value 形式储存
    • 使用很方便
    • 大小有 10MB
    • Key 和 Value 以字符串形式储存
  • LocalStorageCookie 的主要区别是:
    • 储存空间更大,使用更方便
    • Cookie 可以被服务器设置,而 LocalStorage 只能前端手动操作
    • Cookie 的数据会由浏览器自动发给服务器,LocalStorage 需要手动取出来放到请求里面才会发给服务器,因此可以避免 CSRF 攻击
  • LocalStorage 缺点:
    • 无法像 Cookie 一样设置过期时间
    • 只能存入字符串,无法直接存对象

关于会话cookie

在多数情况下windows系统或者安卓系统确实是这样的。但是在macOS系统或者ios系统中,关闭浏览器并不会清除掉会话cookie,结束浏览器进程才行。

字符串常用的几个方法

1. includes()

字符串中是否包含某个字符串,这个不说了,其实就是indexOf的替代方案,用起来更优雅,

2. startsWith()

字符串是否为某个字符串开始,我一般用它判断url是否有http

3. endsWith()

字符串是否为某个字符串结尾。判断后缀名的时候尤其有效。

4. repeat(number)

得到一个重复number次的字符串。额...我也不知道什么时候有用,一般我用它造测试数据。

5. 'abc'.padEnd(5, '1') // abc11;

用给定的字符串在尾部拼接到指定长度,第一个参数为长度,第二个参数为用于拼接的值。

6. 'abc'.padStart(5, '1') // 11abc;

用给定的字符串在首部拼接到指定长度第一个参数为长度,第二个参数为用于拼接的值。

数组快速去重

const arr = [1, 2, 3, 4, 5, 6];

const arr2 = new Set(arr);

const arr3 = [...arr2];
复制代码

css篇

使用css写出一个三角形角标

元素宽高设置为0,通过border属性来设置,让其它三个方向的border颜色为透明或者和背景色保持一致,剩余一条border的颜色设置为需要的颜色。

代码

div {
    width: 0;
    height: 0;
    border: 5px solid #transparent;
    border-top-color: red;
}
复制代码

水平垂直居中

个人比较喜欢:定位或者flex

定位

div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
复制代码

flex

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
复制代码

css一行文本超出显示省略号

    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
复制代码

多行文本超出显示省略号

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
复制代码

隐藏页面元素

  • display: none: 元素不会占用空间,在页面中不显示,子元素也不会显示。
  • opacity: 0: 元素透明度将为0,但元素仍然存在,绑定的事件仍旧有效仍可触发执行。
  • visibility: hidden:元素隐藏,但元素仍旧存在,占用空间,页面中无法触发该元素的事件。

ps: Vue中 v-if和v-show的区别如何呢?什么情况下用哪一个好呢?

calc

我喜欢称它为css中的计算属性,非常强大的功能,可以计算不同单位的差值!强的!

div {
    width: calc(25% - 20px);
}
复制代码
文章分类
前端
文章标签