一、样式动画
1、大屏中常用到的旋转动画
|
1 |
<div class="circle-block circle-rotate"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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、单行文本截断
|
1 |
<p class="text-overflow">塑料袋放进挨过打几份路口五金弗兰克教授发电公司的风景</p> |
|
1 2 3 4 5 6 |
.text-overflow { width: 100px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } |
二、浅谈设计模式
1、单例模式
所谓的单例模式，就是类不管new多少次，都是调用的同一个对象。
咱来点高级点的，通过闭包来实现所谓的单例模式，当然，这种方式个人认为也是非常好的一种。直接上代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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来实现响应式了。
注意：发布-订阅模式跟观察者模式其实是不一样的，这两者有着本质上的区别的。好好理解下就明白了。