HTML样式问题,哪位大大能帮忙看看

岁月如灬风 发布于 09/12 15:09
阅读 181
收藏 0

我领导说我这个格式太丑,让我美化,
我实在想不出怎么美化了,有哪位大大能帮忙看看。              

 node="<button class='btn btn-danger' onclick=setReturn('"+item.id+"');>撤回</button>"
             +"&nbsp;<button class=\""+classColor+"\" onclick=setWin('"+item.id+"');>"+info+"</button>";

加载中
0
Shazi199
Shazi199

var part = [
    "<button class='btn btn-danger' onclick=setReturn('",
    "');>撤回</button>&nbsp;<button class=\"",
    "\" onclick=setWin('",
    "');>",
    "</button>"];
node=part[ 0 ]+item.id+part[ 1 ]+classColor+part[ 2 ]+item.id+part[ 3 ]+info+part[ 4 ];

0
前端大师傅
前端大师傅

原因很简单,你这个没有格式化,而是直接用+号拼接。主要问题是显得代码非常的杂乱。需要分离。

相信你知道MVC,但你根本不懂MVC的真实意图。数据和模板(Model和Viewer)要分离,你这个却是耦合在一起

很简单,你可以自己实现一个format方法。其实网上有很多也可以自己找一个。然后把数据用format方法优雅的合并,这样才是比较好的方法,看下面的代码:

//定义合并数据主逻辑
const margeData = item => {
    let template = '<button class="btn btn-danger" onclick=setReturn("{item_id}");>撤回</button>'
        + '&nbsp;<button class="{classColor}" onclick=setWin("{item_id}");>{info}</button>';
    return template.format(item);
};
//需要合并的数据
const item = {
    item_id: "",
    classColor: "",
    info: ""
};
//调用方法合并
node = margeData(item);

 

返回顶部
顶部