（四）实践JavaScript之编辑微博

模板

var weiboTemplate = function(weibo){
    // 将一类的元素用class表示，将特定的元素用id表示
    var w = `
        <div class='weiboCell'>
            <span id=weibo${weibo.id} data-id=${weibo.id}>${weibo.content}</span>
            <button class='class-weibo-delete' data-id=${weibo.id}>删除</button>
            <button class='class-weibo-edit' data-id=${weibo.id}>编辑</button>
        </div>
    `
    return w
}

前端路由

var bindEvents = function(){
    bindEventWeiboAdd()
    bindEventWeiboDlete()
    bindEventWeiboEdit()
    bindEventWeiboUpdate()
}

一、主函数（插入编辑框）

逻辑：
    点击微博的编辑按钮，将弹出一个输入框和更新按钮；
1.在微博内容旁边新增编辑按钮，编辑按钮内含有weibo的id；
2.获取整个weibo块，并绑定事件，实施事件委托；
3.如果点击的按钮中包括某个类（编辑按钮），将插入weibo编辑入口；

var bindEventWeiboEdit = function(){
    var weiboList = e('#id-weibo-list')
    log('majun')
    weiboList.addEventListener('click', function(event){
        var self = event.target
        log('self是：', self)
        //  这个 class 不需要加 .
        if (self.classList.contains('class-weibo-edit')){
            log('点击的self是：', self)
            insertweiboEdit(self)
        }
    })
}

注意：
insertweiboEdit()函数传递的是self，表示点击的当前按钮，这个按钮中有当前weibo的id，可以将这个id传递给输入框或更新按钮；

辅助函数

var weiboeditTemplate = function(weibo_id){
    var e = `
        <div class='class-weibo-edit-form'>
            <input class = 'class-weibo-edit'>
            <button class='class-weibo-edit' data-id=${weibo_id}>更新</button>
        </div>
    `
    return e
}

var insertweiboEdit = function(self){
    //  获取父元素  closest
    var weiboCell = self.closest('.weiboCell')
    var weibo_id = self.dataset.id
    // 传递 当前微博的id
    var weiboeditCell = weiboeditTemplate(weibo_id)
    weiboCell.insertAdjacentHTML('beforeEnd', weiboeditCell)
}

1.利用closest()获取父元素，里面的class可以是父元素的，也可以是祖父元素的；

二主函数（实现编辑功能）

逻辑：
1.点击更新按钮，将值发送给后端；
2.后端函数根据传过去的weibo id以及form里面的值，更新weibo；
3.获取服务器返回的数据，更改weibo的显示
4.移除weibo编辑框；

var bindEventWeiboUpdate = function(){
    var weiboList = e('#id-weibo-list')
    weiboList.addEventListener('click', function(event){
        var self = event.target
        if (self.classList.contains('class-weibo-update-button')){
            //  获取值的套路
            log('点击的按钮：', self)
            //  经常忘记这个 ‘.’
            var weiboeditForm = self.closest('.class-weibo-edit-form')
            //  写成了 querySelector
            var weiboInput = weiboeditForm.querySelector('.class-weibo-edit-input')
            var content = weiboInput.value
            var weibo_id = self.dataset.id
            var form = {
                content: content,
                id: weibo_id
            }
            log('提交的数据是：', form)
            apiweiboUpdate(form, function(r){
                var weibo = JSON.parse(r)
                var weiboCell = self.closest('.weiboCell')
                var weibo_content = weiboCell.querySelector('.class-weibo-content')
                weibo_content.innerText = weibo.content
                self.parentElement.remove()
            })
        }
    })
}

知识点：

• 事件委托；
• ele.closest()函数获取父/祖父元素，别忘记加 ‘.’；
• ele.querySelector()函数可以查找ele的子元素，S大写；
  -- document元素就相当于html的父元素；
• 更新显示的weibo内容有点绕；