javascript - 如果没有 JavaScript 框架，我们如何防止代码重复？

Question

我编写了一些重复代码来在一个列表中创建 5 个 SVG 圆圈。所有五个圆圈仅在两个属性上有所不同，即左边距的数量和圆圈旁边的文本。

像任何优秀的开发人员一样，我希望他们是一种创建某种循环或减少代码重复的方法。

例如，如果我有三个圆圈，例如

<!--                            NavBar                         -->
<div class="nav_bar_container">
    <ul id="nav_bar">

        <li style="margin-left: 15px;">
            <svg height="100" width="100">
                <circle id="Experience" cx="50" cy="50" r="30" stroke-width="3" class="expand disabled"> </circle>
            </svg>
            <span>
                <b> One </b>
            </span>
        </li>


        <li style="margin-left: 0px;">
            <svg height="100" width="100">
                <circle cx="50" cy="50" r="30" stroke-width="3" fill="#231f20"> </circle>
            </svg>
            <span>
                <b> Two </b>
            </span>
        </li>


        <li style="margin-left: 15px;">
            <svg height="100" width="100">
                <circle cx="50" cy="50" r="30" stroke-width="3" fill="#231f20"> </circle>
            </svg>
            <span>
                <b> Three</b>
            </span>
        </li>
    </ul>
</div>

这占用了大量空间，而 SVG 中的文本和左侧边距只有细微差别。

有人知道减少代码重复的好方法吗？

Answer 1

可以使用js减少代码重复

let settingArray = [
    {
    className: 'nav_bar__item',
     circleOptions: {cx: 50, cy: 50, r: 30, 'stroke-width': 3, fill: '#231f20'},
     spanOptions: { title: 'One' },
    },
    {
    className: 'nav_bar__item',
     circleOptions: {cx: 50, cy: 50, r: 30, 'stroke-width': 3, fill: '#231f20'},
     spanOptions: { title: 'Two' },
    },
    {
    className: 'nav_bar__item',
     circleOptions: {cx: 50, cy: 50, r: 30, 'stroke-width': 3, fill: '#231f20'},
     spanOptions: { title: 'Three' },
    }
  ];

let wrapper = document.querySelector('#nav_bar');
draw(wrapper, settingArray);

function draw(wrapper, settingArray){
  let items = [];
  
  settingArray.forEach(setting => {
    items.push(createItem(setting));
  });
  
  items.forEach(item => {
    wrapper.appendChild(item);
  })
}

function createItem(setting){
  let li = document.createElement('li');
  li.className = setting.className;
  
  li.appendChild(createCircle(setting.circleOptions));
  li.appendChild(createSpan(setting.spanOptions));
  
  return li;
}

function createCircle(options){
  let svg = createSVG('svg', { height: 100, width: 100});
  
  let circle = createSVG('circle', options);

  svg.appendChild(circle);
  
  return svg;
}

function createSVG(tag, attrs) {
    const elem = document.createElementNS('http://www.w3.org/2000/svg', tag);
    for (let attr in attrs) {
      elem.setAttribute(attr, attrs[attr]);
    }
    return elem;
}

function createSpan(options){
   let span = document.createElement('span');
   
   let b = document.createElement('b');
   b.textContent = options.title;
   
   span.appendChild(b);
   
   return span;
}

.nav_bar{}
.nav_bar__item:first-child{
  margin-left: 15px;
}
.nav_bar__item:last-child{
  margin-left: 15px;
}
.nav_bar__item{
  margin-left: 0px;
}

<div class="nav_bar_container">
    <ul id="nav_bar">    
    </ul>
</div>