求大神优化前端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);
}
});
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);
}
});
}
1.函数第一行var content ,success 回调第一行也是 var content ,重复声明,函数第一行的可以删掉
2.if(dataObj=="") ,if 会自动判断 --> if(dataObj)
3. $.each 里面你没有用到 jQuery ,dataObj.forEach( callback )
4,字符串拼接太多,建议使用字符串模板,
5.第一次content拼接的时候并没有使用到ajax返回的数据,应该提前写入HTML中,可以使用append 来插入动态生成的部分表格内容
个人建议，把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 的模板字符串，也会看上去赏心悦目好多~~~~