如何使dom操作更清晰

Question

Have some code like:

var el = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

var c = this.chart;

el.setAttribute('x', c.x + c.padding + 'px');
el.setAttribute('y', c.y + c.padding + i * (b.height + b.margin) + 'px');
el.setAttribute('width', model.value * c.scale + 'px');
el.setAttribute('height', b.height + 'px');
el.classList.add('bar');

this.svg.appendChild(el);

Any options to make it look not as ugly? There is a chance that can be more attributes...

Answer 1

Time to use a function? Something like:

function setAttributes(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

And call it as:

setAttributes(elem, {"src": "http://example.com/something.jpeg", "height": "100%", ...});