有一阵子没发博客了,在这期间,倒是沉淀了不少东西。嘿嘿!
一、样式动画
1、大屏中常用到的旋转动画
.circle-block {
display: inline-block;
width: 100px;
height: 100px;
background-color: blueviolet;
}
// 旋转动画
@keyframes circleRotate {
100%{
transform: rotate(360deg);
}
}
.circle-rotate{
animation: circleRotate 4s linear infinite; // 顺时针旋转,无限次,一次用时4s。
}
2、单行文本截断
塑料袋放进挨过打几份路口五金弗兰克教授发电公司的风景
.text-overflow {
width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
二、浅谈设计模式
1、单例模式
所谓的单例模式,就是类不管new多少次,都是调用的同一个对象。
咱来点高级点的,通过闭包来实现所谓的单例模式,当然,这种方式个人认为也是非常好的一种。直接上代码
function SingleWrapper(className) {
let instance = null; // 通过这个变量来保存实例
return function () {
if (!instance)
instance = new className();
return instance;
}
}
function User() {
this.name = '用户名';
}
let getUserInstance = SingleWrapper(User); // 使用闭包
let user1 = getUserInstance();
let user2 = getUserInstance();
console.log(user1.name, user2.name); // 用户名 用户名
console.log(user1 === user2); // true
// 如果不用单例模式的话
let user1 = new User();
let user2 = new User();
console.log(user1.name, user2.name); // 用户名 用户名
console.log(user1 === user2); // false 实例化了两个User对象,这两个对象是不一样的
单例模式的应用
实际中像示例这样运用的,个人几乎没怎么看到过。
但是呢,只是用一个对象的思想倒是运用的很多。
比如说通过axios发送请求的时候,只创建一个axios的实例,然后发送请求。
当然有些场景,根据需要创建相应的的axios实例。
还有echars实例,地图实例等。
2、发布-订阅模式
事件总线便是采用了这个模式
高级前端进阶(三)事件总线
注意:有个要点就是,一定要先订阅事件后,然后事件发布后才能触发。有个先后的关系。
3、观察者模式
这个在实际开发中,可能用不到。这个模式主要用在了前端框架(Vue,React,Angular)上。
这里简述一下:
js通过defineProperty定义对象变量的时候,其实呢,里面有个getter跟setter方法,getter获取值,setter设置值,很好理解。
而观察者模式,主要观察这个对象变量的值有没有改变,只要改变了,就会触发这个setter方法,然后再在这个方法里面触发其他的方法。比如操作dom,重新渲染一下,这便是响应式原理。defineProperty只不过有些弊端,比如监听数组的时候,无法实现响应式,归根结底是因为没有setter方法。现在Vue3使用Proxy来实现响应式了。
注意:发布-订阅模式跟观察者模式其实是不一样的,这两者有着本质上的区别的。好好理解下就明白了。
三、总结
Vue3正式版发布了,element-plus也发布了,可以考虑慢慢地上手TypeScript(ts)了。
学无止境