毎日30秒⏱ リリースと購読

4045 ワード

javascript

前言
デザインモード、リリース、購読、イベント、イベント
一つの開発においてよく使われる設計モード - は、とも呼ばれ、 - には主に二つの役割があります.
生活の中で一番よく使われているシーンはQQ空間で気持ちを発表する時、あなたのQQ友達は全部あなたのQQ動態を受け取ります.この例でははです.QQ は購読者です.

const createEventHub = () => ({
    hub: Object.create(null),

    emit(event, data) {
        (this.hub[event] || []).forEach(handler => handler(data));
    },

    on(event, handler) {
        if (!this.hub[event]) this.hub[event] = [];
        this.hub[event].push(handler);
    },

    off(event, handler) {
        const i = (this.hub[event] || []).findIndex(h => h === handler);
        if (i > -1) this.hub[event].splice(i, 1);
    }
});

コード解析Object.prototype.create方法を用いて、内部オブジェクトを急速に作成した.

hub: Object.create(null)

Array.prototype.forEachを使用して、イベントに対応するすべての動作を巡回する.

emit(event, data) {
    (this.hub[event] || []).forEach(handler => handler(data));
}

Array.prototype.pushを使用して、イベントに対応する動作を格納する.

on(event, handler) {
    if (!this.hub[event]) this.hub[event] = [];
    this.hub[event].push(handler);
}

Array.prototype.findIndexを使用して、イベントに対応する動作を照会し、Array.prototype.spliceを使用して、動作を除去する.

off(event, handler) {
    const i = (this.hub[event] || []).findIndex(h => h === handler);
    if (i > -1) this.hub[event].splice(i, 1);
}

使用シーン
ユーザ入力がおよびdataを同期して更新すると、逆にdataが他の操作によって修正されたときにおよびを同期して更新すると、簡単にVueのようなデータ双方向結合が実現される.
プロジェクト開発中のは、jQueryのフロントエンドプロジェクトの中で、データの変更とメンテナンスを容易にするためにVueを導入して、プロジェクトが肥大化して複雑になりました. - を使用すれば、このような大きな枠組みを導入する必要がなくて、この操作を実現するのに便利です.
単一ページプロジェクトが巨大でない場合、ReduxとVuexのようなデータ管理ライブラリを導入する必要はなく、 - を使用しても便利な管理コンポーネント間のデータ変更と依存更新ができます.
構造

スクリプト


//       
let data = {
    username: '',
    password: '',
}

const hub = createEventHub()

//         
hub.on('oninput', (name) => {
    const dom = document.querySelector(`[name="${name}"]`)
    hub.emit('setFormData', { name, value: dom.value })
})

//         
hub.on('setFormData', ({ name, value }) => {
    data[name] = value
})

//         
hub.on('setFormData', ({ name, value }) => {
    const dom = document.querySelector(`#${name}`)
    dom.innerHTML = value
})

//         
hub.on('setFormData', ({ name, value }) => {
    const dom = document.querySelector(`[name="${name}"]`)
    dom.value = value
})

//           
hub.on('submit', () => {
    // ajax      
    //     setTimeout     ajax     
    setTimeout(() => {
        alert('      ')
        hub.emit('resetFormData')
    }, 1000)
})

//           
hub.on('resetFormData', () => {
    hub.emit('setFormData', { name: 'username', value: '' })
    hub.emit('setFormData', { name: 'password', value: '' })
})

共に成長する
困った都市では肩を並べて同行する人が必ずいます. は私達を一緒に成長させます.

より多くの人に文章を見てもらいたいなら、を注文してもいいです.

を励まそうとすれば、二年生はギズブにを与えられます.

もし小二ともっと交流したいなら、WeChat m353839115を追加します.

この原稿はPush MeTopから来ています.

JavaScriptの配列に関する知識を詳しく説明する.

毎日30秒⏱ リリースと購読

：

：