設計模式之開閉原則：對修改關閉，對擴展開放

• 底層模塊的變動，必然有高層模塊的耦合，開閉原則就是減小變動的擴展性

通俗的意思就是說，在開發過程當中，在前期設計就必須作好相對應的擴展

• 在修改代碼時必需要儘可能少動原有的代碼，最好不要修改老的代碼，這就是對修改關閉
• 那麼如何處理新的需求呢？這裏就涉及到代碼的前期涉及了，儘可能作到的是新增函數，只對新需求作擴展

這裏舉一個栗子：

這裏有個表單：

<div id="loginForm">
    <input type="text" class="username" id="username" placeholder="username"><br>
    <input type="text" class="pwd" id="pwd" placeholder="pwd"><br>
    <button onclick="checkLogin()">提交</button>
</div>
複製代碼

通常作前端校驗的方法可能就會是這個樣子：

• 寫一個公共的校驗方法來對錶單中的每一個輸入項進行校驗
• 取出 input 表單中的每一個值，依次根據指定的校驗規則，來校驗前端輸入的內容
• 若是出現錯誤的話，就會對這個輸入錯誤的數據進行提醒

好比下面這樣的方式：

function checkLogin() {

    let username = document.querySelector("#username").value;
    if (!username) {
        alert("username must not be null");
    }

    let pwd = document.querySelector("#pwd").value;
    if (!pwd) {
        alert("pwd must not be null");
    }
}
複製代碼

這樣就會面臨下面的問題：

• 若是校驗規則有變更的話，就須要對原來的代碼進行修改
• 若是需求有變更，好比在原來的表單中新增了一個 input 輸入框的話，就還須要修改原來的這個校驗的代碼
• 通常來講，修改代碼都有可能對原來的代碼形成必定的問題，修改就有可能出錯

對修改關閉

這是一個很是重要的原則，對原來已有的代碼最好不作修改

那麼咱們在這裏該這麼作呢？看這樣的修改：

1. 在 html 中添加一個 input 輸入框自身的自定義屬性 data-validate 用來標識這個 input 輸入框對應的校驗函數名

<div id="loginForm">
    <input type="text" class="username" data-validate="checkUsername" id="username" placeholder="username"><br>
    <input type="text" class="pwd" data-validate="checkPwd" id="pwd" placeholder="pwd"><br>
    <button onclick="checkLoginForm()">提交</button>
</div>
複製代碼

2. 寫通用函數，專門負責這個表單的校驗，獲取全部的 input 輸入框，拿到對應的校驗函數，並調用對應的掛載在 window 上的校驗函數

function checkLoginForm() {
    // 表單
    let form = document.querySelector("#loginForm");
    // 表單中input
    let ipts = form.querySelectorAll("input");
    // 獲取input中的校驗函數名，並調用對應的函數
    for (let i = 0; i < ipts.length; i++) {
        let input = ipts[i];
        let validate = input.dataset.validate;
        let validateFn = window[validate];
        if (validateFn) {
            let rst = !validateFn(input.value);
            if (rst) {
                return false;
            }
        } else {
            alert(`當前沒有這個${validate}校驗函數`);
        }
    }

}
複製代碼

3. 這樣之後的擴展就能夠單獨寫對應的校驗函數就ok，無需再去修改原來的 checkLoginForm 函數，同時校驗函數還能夠複用。

function checkUsername(username) {
    if (!username) {
        alert("username must not be null");
    }
}
複製代碼

4. data-validate="checkUsername" 屬性值對應的就是通用的校驗函數名稱，減小對原有代碼的修改和侵入。