美文网首页
(五)实践JavaScript之加载评论

(五)实践JavaScript之加载评论

作者: 马梦里 | 来源:发表于2017-12-09 19:48 被阅读0次

逻辑:
1.获取所有评论,并循环插入评论;
2.插入评论函数里面有个查找,定位到目标weibo下,然后将weibo所属评论插进去;
这就需要在weibo上进行唯一性标识:weibo${weibo.id},因为id不能为纯数字;
一、主函数

var loadsComments = function(){
    log('执行函数')
    apiloadsComments(function(r){
        var comments = JSON.parse(r)
        log('comments', comments)
        for (var i=0; i < comments.length; i++){
            var comment = comments[i]
            insertComment(comment)
        }
    })
}
辅助函数
// 这个逻辑很重要,这个定位目标元素同样重要
var insertComment = function(comment){
    var commenttemplate = commentTemplate(comment)
    log('commenttemplate', commenttemplate)
    var id = comment.weibo_id
    var weiboList = e('#id-weibo-list')
    var weibo_id = comment.weibo_id
    var targetWeibo = weiboList.querySelector(`#weibo${weibo_id}`)
    var weiboCell = targetWeibo.closest('.weiboCell')
    weiboCell.insertAdjacentHTML('beforeEnd', commenttemplate)
}

var apiloadsComments = function(callback){
    path = '/api/weibo/comment/all'
    ajax('GET', path, '', callback)
}

var commentTemplate = function(comment){
    var c = `
        <div class='class-comment-cell'>
            <span class='class-comment-content'>${comment.content}</span>
            <button class='class-comment-delete' data-id=${comment.id}>删除</button>
            <button class='class-comment-edit' data-id=${comment.id}>编辑</button>
        </div>
        <br>
    `
    return c
}

相关文章

  • (五)实践JavaScript之加载评论

    逻辑:1.获取所有评论,并循环插入评论;2.插入评论函数里面有个查找,定位到目标weibo下,然后将weibo所属...

  • 2019-05-30

    Javascript之动态加载脚本和样式 //动态加载脚本 function loadScript(url){ ...

  • (六)实践JavaScript之增加、删除评论

    一、增加评论 和前面一个套路 错误高发点: ... is null:很可能是class前面没加 . 二、删除评论...

  • (一)实践JavaScript之index页面加载

    实现一个微博功能: 前端用 ajax 发送 HTTP 请求到后端 后端 API操作元素 ajax 跨域在当前,js...

  • JavaScript延迟加载

    延迟加载javascript,也就是页面加载完成之后再加载javascript,也叫on demand(按需)加载...

  • [记录]我的设计模式学习路径

    书单 《JavaScript 设计模式与开发实践》《设计模式之美》《掘金小册-JavaScript 设计模式核⼼原...

  • 前端性能优化之Lazyload

    前端性能优化之Lazyload @(冬晨)[JavaScript|技术分享|懒加载] [TOC] Lazyload...

  • 07- webpack 加载图片

    一、JavaScript 加载图片 JavaScript 中加载图片,两种使用方法 加载背景图片 backgro...

  • javascript 异步加载

    默认情况下javascript是同步加载的,后面的元素要等待javascript加载完毕后才能再次进行加载,对于一...

  • js相关知识

    JavaScript相关知识 页面中添加JavaScript 页面加载之前就会执行 页面加载时候执行 大多数情况,...

网友评论

      本文标题:(五)实践JavaScript之加载评论

      本文链接:https://www.haomeiwen.com/subject/rcepixtx.html