填坑-十万个为何？（19）

简介:不少概念不清或忘记，从新构建本身的知识体系。天天问本身1~多个问题。我是菜鸟 成为大神之路!

1.什么是异步操做？异步操做有哪些？

JS由于是单线程的，因此在执行事务的时候，每每会由于某个事务的延迟，而致使服务器假死，这时候异步编程就显的格外重要，可是异步编程通常理解为回调函数callback，典型的就是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中已经很好的支持了自定义事件，如：

//新建一个事件
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')

复制代码

④promise

第18天的内容 juejin.im/post/5c2dd2…

⑤Generator函数

第20天学习

⑥es7语法糖async/await

第20天学习

文章推荐
① JS中的异步操做
② JS进阶 | 分析JS中的异步操做