小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金
js篇
Proxy和Object.defineProperty
关于Object.defineProperty
关于Object.defineProperty
的一些特点就不细说了,随便搜索一下实在是太多了,这里说说者的一些缺陷吧!
Object.defineProperty
的第一个缺陷,无法监听数组变化。 但是作为Object.defineProperty
的课代表的Vue
的文档提到了Vue
是可以检测到数组变化的,但是只有以下八种方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
复制代码
- Object.defineProperty的第二个缺陷,只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历,如果属性值也是对象那么需要深度遍历,显然能劫持一个完整的对象是更好的选择。
Proxy
严格来讲Proxy应该被称为代理而非劫持, Proxy
可以直接监听对象而非属性,可以直接监听数组的变化
Proxy在ES2015规范中被正式发布,它在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写,我们可以这样认为Proxy
是Object.defineProperty
的全方位加强版
Proxy的其他优势
Proxy
有多达13种拦截方法,不限于apply
、ownKeys
、deleteProperty
、has
等等是Object.defineProperty
不具备的。
Proxy
返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty
只能遍历对象属性直接修改。
localStorage、sessionStorage、会话cookie
localStorage、sessionStorage、会话cookie区别
SessionStorage
和 LocalStorage
使用方法基本一致,唯一不同的是,一旦关闭页面,SessionStorage
将会删除数据;因此这里主要以 LocalStorage
为例
LocalStorage
的特点是:- 使用 Key-Value 形式储存
- 使用很方便
- 大小有 10MB
- Key 和 Value 以字符串形式储存
LocalStorage
和Cookie
的主要区别是:- 储存空间更大,使用更方便
- 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);
}
复制代码