求大神优化前端js代码

今天已经发过一个帖子了,因为最近发现自己的jsp文件打开后很卡,可能是因为js代码写的太垃圾了,主要就是ajax里面写的重复代码太多了,很感谢中午网友热心的帮我优化,下面这个是js拼接html代码的,感觉这样写太垃圾了,求大神优化下。。。

    //加载客户参课记录
    function loadcankejilu(){
        var content = '';
        $.ajax({
                cache: true,
                type: "POST",
                dataType:'json',
                url:'/hszx/queryCankejilu.do',
                data:{C_ID:$('#currentCID').val()},
                async: false,
                success: function(data) {
                            var content = ' <table class="table table-border table-bordered table-bg table-hover table-sort;">'
                                        +'              <tr>'
                                        +'                  <td colspan="7">'
                                        +'                      <input type = "button" class="btn btn-primary" value = "报名" onclick="baomingpre()"/>'
                                        +'                      <input type = "button" id="baoming" style="display: none"  data-toggle="modal" data-target="#myModal6"/>'
                                        +'                  </td>'
                                        +'              </tr>'
                                        +'              <tr>'
                                        +'                  <th colspan="7"></th>'
                                        +'              </tr>'
                                        +'              <tr>'
                                        +'                  <th>参课人</th>'
                                        +'                  <th>课程名称</th>'
                                        +'                  <th>开课地点</th>'
                                        +'                  <th>报名价格</th>'
                                        +'                  <th>开课时间</th>'
                                        +'                  <th>课程状态</th>'
                                        +'                  <th>报名来源</th>'
                                        +'              </tr>';
                    var dataObj = data;
                    $.each(dataObj,function(index,item){
                        content+='  <tr>'
                                +'      <td>'+item.ct_NAME+'</td>'
                                +'      <td>'+item.sp_NAME+'</td>'
                                +'      <td>'+item.sp_ADDRESS+'</td>'
                                +'      <td>'+item.cp_MONEY+'</td>'
                                +'      <td>'+item.sp_STIME+'</td>'
                                +'      <td>'+item.sp_STATE+'</td>'
                                +'      <td>'+item.si_SIGNSTATE+'</td>'
                                +'  </tr>';
                    })
                    if(dataObj==''){
                        content+='<tr style="height:100px"><td  style="text-align:center;height:100px;" colspan="7">无参课记录<td></tr>';
                    }
                    content+'</table>';
                    $('#ckjl').html(content);
                }
            });

10个回答

  var content = ' <table class=

这个没办法优化了,除非你服务器端IO读取模板内容一起返回就不需在客户端拼接了$.each也没办法优化,因为你有顺序,你这个代码没有什么特别好优化的
可以订阅个列隐射,map,for下简化代码了


    function loadcankejilu() {
        var content = '';
        var fields = [{ n: '参课人', f: 'ct_NAME' }, { n: '课程名称', f: 'sp_NAME' }, { n: '开课地点', f: 'sp_ADDRESS' }, { n: '报名价格', f: 'cp_MONEY' }, { n: '开课时间', f: 'sp_STIME' }, { n: '课程状态', f: 'sp_STATE' }, { n: '报名来源', f: 'si_SIGNSTATE' }, ]
        $.ajax({
            cache: true,
            type: "POST",
            dataType: 'json',
            url: '/hszx/queryCankejilu.do',
            data: { C_ID: $('#currentCID').val() },
            async: false,
            success: function (data) {
                var content = ' <table class="table table-border table-bordered table-bg table-hover table-sort;">'
                            + '              <tr>'
                            + '                  <td colspan="7">'
                            + '                      <input type = "button" class="btn btn-primary" value = "报名" onclick="baomingpre()"/>'
                            + '                      <input type = "button" id="baoming" style="display: none"  data-toggle="modal" data-target="#myModal6"/>'
                            + '                  </td>'
                            + '              </tr>'
                            + '              <tr>'
                            + '                  <th colspan="7"></th>'
                            + '              </tr>'
                            + '              <tr>'
                            + $(fields).map(function () { return '<th>' + this.n + '</th>' }).get().join('')
                            + '              </tr>';
                if (data&&data.length)//不用再申明个dataobj,没必要
                    $.each(data, function (index, item) {
                        content += '  <tr>';
                        for (var i = 0; i < fields.length; i++) content += '<td>' + item[fields[i].f] + '</td>';
                        content += '  </tr>';
                    })
                else content += '<tr style="height:100px"><td  style="text-align:center;height:100px;" colspan="7">无参课记录<td></tr>';

                content + '</table>';
                $('#ckjl').html(content);
            }
        });
    }
qq_21535287
LuckyChend 谢谢你
2 年多之前 回复

1.函数第一行var content ,success 回调第一行也是 var content ,重复声明,函数第一行的可以删掉
2.if(dataObj=="") ,if 会自动判断 --> if(dataObj)

3. $.each 里面你没有用到 jQuery ,dataObj.forEach( callback )
4,字符串拼接太多,建议使用字符串模板,
5.第一次content拼接的时候并没有使用到ajax返回的数据,应该提前写入HTML中,可以使用append 来插入动态生成的部分表格内容

qq_29594393
当作看不见 回复LuckyChend: 字符串模板 es6 中 变量就是${cxx} 这样可以有效减少字符串拼接,提高可阅读行,append 追加的没有样式,应该是选择器没有选对,添加的位置有些不对,审查一下元素也许有帮助,forEach是数组的一个方法,也是遍历,和$.each 几乎相同,但是$.each把每个对象都封装为jQuery对象,而forEach没有封装,且第一个参数表示当前元素,
2 年多之前 回复
qq_21535287
LuckyChend 谢谢你的回答,字符串模板我没用过不知道怎么用,你说的append追加我试过的,追加出来没有样式,不知道怎么回事,还有你说的dataObj.forEach(callback)怎么用呢
2 年多之前 回复

个人建议,把content的内容和html代码拿出来,封装成一个回调函数,返回data值后组装好数据后,调用content的回调函数,传入data组装好的数据,如果你是数据过大,导致加载过慢,可以分批去数据,后叠加

其实你的Table的表头的信息没有必要也拼接,直接写在html页面上,ajax回调处理的时候只拼接修正table的内容。

把拼接改成模版放在页面里面也是可以的。直接replace模版数据部分,效率高点

这种拼接最简单的就是这些数据放在后台来拼接,(因为后台语言拼接比前台js快)。到了前台直接把拼接好的字符串赋给相应标签就行了。当然用模版什么的也好。。。。

Table的表头的信息直接写在html页面上,ajax回调处理的时候只拼接data组装好的数据;
另外你的data是一个结果集 应该先判断是否为空,不为空再遍历,
没有必要dataObj = data;
字符串拼接太多,建议使用字符串模板

楼主,可以用for(value in item)循环遍历值,并同时循环创建th,如果不合题意,楼主就此略过,打扰了图片说明

success里面的代码太长了,完全可以抽取出来。这个用js绘画表格,真的好吗?肯定会有个填充的效果的。建议用后台的方式绘画表格

中间的拼接方式,可以换成es6 的模板字符串,也会看上去赏心悦目好多~~~~

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!