高级前端进阶（四）

2022-02-25 21:01:14 阅读：155 来源： 互联网

标签：user2 进阶 user1 前端高级模式 let 单例 name

有一阵子没发博客了，在这期间，倒是沉淀了不少东西。嘿嘿！

一、样式动画

1、大屏中常用到的旋转动画

<div class="circle-block circle-rotate"></div>

.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、单行文本截断

<p class="text-overflow">塑料袋放进挨过打几份路口五金弗兰克教授发电公司的风景</p>

.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)了。

学无止境

标签：user2,进阶,user1,前端,高级,模式,let,单例,name
来源： https://www.cnblogs.com/ywjbokeyuan/p/15598221.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9