高級前端進階（四）

• 2022 年 2 月 25 日
• 筆記
• javascript

有一陣子沒發部落格了，在這期間，倒是沉澱了不少東西。嘿嘿！

一、樣式動畫

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

學無止境