填坑-十萬個爲何？（19）

時間 2019-11-08

標籤十萬爲何简体版

原文原文鏈接

簡介:不少概念不清或忘記，從新構建本身的知識體系。天天問本身1~多個問題。我是菜鳥成爲大神之路!html

1.什麼是異步操做？異步操做有哪些？

JS由於是單線程的，因此在執行事務的時候，每每會由於某個事務的延遲，而致使服務器假死，這時候異步編程就顯的格外重要，可是異步編程通常理解爲回調函數callback，典型的就是node，回調函數的層層嵌套又致使程序過於冗餘，由於閉包的存在，致使了內存的泄露或者誤改上一層回調函數的參數node

①回調函數

`在f1執行完以後再執行f2`
var func1=function(callback){
    console.log(1);
    (callback && typeof(callback)==='function') && callback();
}
func1(func2);
var func2=function(){
    console.log(2);
}

`Ajax`
$.ajax({
    url:"/getmsg",
    type: 'GET',
    dataType: 'json',
    success: function(ret) {
        if (ret && ret.status) {
            //
        }
    },
    error: function(xhr) {
        //
    }
})
複製代碼

②事件監聽

經過事件機制，實現代碼的解耦。js處理DOM交互就是採用的事件機制，咱們這兒只是實現一些自定義的事件而已。JS中已經很好的支持了自定義事件，如：ajax

//新建一個事件
var event=new Event('Popup::Show');
//dispatch the event
elem1.dispatchEvent(event)

//listen for this event
elem2.addEventListener('Popup::Show',function(msg){},false)

`添加事件監聽的方法`
element.addEventListener('click', funEven, false);
element.attachEvent('onclick', funEven);
element.onclick = funEven;
第14天的內容 https://juejin.im/post/5c28761b5188250baa55bcb7
複製代碼

③ 觀察者模式，也叫訂閱發佈模式

多個觀察者能夠訂閱同一個主題，主題對象改變時，主題對象就會通知這個觀察者
其中步驟包括，訂閱、發佈、退訂；先訂閱(subscribe)一個主題對象，根據主題對象發佈(publish)內容，期間也退訂(unsubscribe)主題對象，一旦退訂就沒法再次發佈
能夠把訂閱一個主題對象理解成監聽一個事件
觀察者模式的一個特色就是一旦主題事件一改變，就會通知整個觀察者；觀察者模式還能夠計算出訂閱事件的個數編程

//發佈-訂閱
//有個消息池，存放全部消息
let pubsub = {};
(function(myObj) {
    topics = {}
    subId = -1;
    //發佈者接受參數(消息名稱，參數)
    myObj.publish = function(topic, msg) {
            //若是發佈的該消息沒有訂閱者，直接返回
            if (!topics[topic]) {
                return
            }
            //對該消息的全部訂閱者，遍歷去執行各自的回調函數
            let subs = topics[topic]
            subs.forEach(function(sub) {
                sub.func(topic, msg)
            })
        }
    //訂閱者接受參數：（消息名稱，回調函數）
    myObj.subscribe = function(topic, func) {
        //若是訂閱的該事件還未定義，初始化
        if (!topics[topic]) {
            topics[topic] = []
        }
        //使用不一樣的token來做爲訂閱者的索引
        let token = (++subId).toString()
        topics[topic].push({
                token: token,
                func: func
            })
        return token
    }
    myObj.unsubscribe = function(token) {
        //對消息列表遍歷查找該token是哪一個消息中的哪一個訂閱者
        for (let t in topics) {
            //若是某個消息沒有訂閱者，直接返回
            if (!topics[t]) {
                return }
            topics[t].forEach(function(sub,index) {
                if (sub.token === token) {
                    //找到了，從訂閱者的數組中去掉該訂閱者
                    topics[t].splice(index, 1)
                }
            })
        }
    }
})(pubsub)

let sub1 = pubsub.subscribe('Msg::Name', function(topic, msg) {
    console.log("event is :" + topic + "; data is :" + msg)
});
let sub2 = pubsub.subscribe('Msg::Name', function(topic, msg) {
    console.log("this is another subscriber, data is :" + msg)
});
pubsub.publish('Msg::Name', '123')

pubsub.unsubscribe(sub2)
pubsub.publish('Msg::Name', '456')

複製代碼