如何将常用方法提取到函数中

How to extract common methods into a function

本文关键字：函数 提取 方法 常用      更新时间：2023-09-26

我想提取常用方法链以防止复制粘贴相同的代码。

如何以Javascript方式做到这一点？

源语言

if(this.get('with_coverage')){
  svg.append("text")
      .attr("x", (width / 2))
      .attr("y", 0 - (margin.top / 2))
      .attr("text-anchor", "middle")  
      .style("font-size", "16px") 
      .style("text-decoration", "underline")
      .text("With Coverage");
}
else{
  svg.append("text")
      .attr("x", (width / 2))             
      .attr("y", 0 - (margin.top / 2))
      .attr("text-anchor", "middle")  
      .style("font-size", "16px") 
      .style("text-decoration", "underline")  
      .text("Without Coverage");
}

预期

var apply_style = attr("x", (width / 2))
      .attr("y", 0 - (margin.top / 2))
      .attr("text-anchor", "middle")  
      .style("font-size", "16px") 
      .style("text-decoration", "underline");
if(this.get('with_coverage')){
  svg.append("text")
      .apply_style()
      .text("With Coverage");
}
else{
  svg.append("text")
      .apply_style()
      .text("Without Coverage");
}

svg.append("text")
    .attr("x", (width / 2))
    .attr("y", 0 - (margin.top / 2))
    .attr("text-anchor", "middle")  
    .style("font-size", "16px") 
    .style("text-decoration", "underline")
    .text("With"+(this.get('with_coverage')?"":"out")+" Coverage");

魔法。

有些人不喜欢那些混在代码中的三元运算符。在这种情况下，您可以这样做：

function applyStyleBasedOnCondition(selection, actions, condition, t, f){
    actions.call(selection);
    (condition ? t : f).call(selection);
}
applyStyleBasedOnCondition(svg.append("text"), function(){
   this
      .attr({
          x: width / 2,
          y: 0 - (margin.top / 2),
          "text-anchor": "middle"
      }) 
      .style({
          "font-size": "16px",
          "text-decoration": "underline"
      });
}, this.get('with_coverage'), function(){
     this.text("With Coverage");
}, function(){
     this.text("Without Coverage");
});

链接是通过返回相同的对象来实现的。要在 svg 对象中使用apply_style方法，您可以执行以下操作：

svg.apply_style = function(){
   this.attr("x", (width / 2))
       .attr("y", 0 - (margin.top / 2))
       .attr("text-anchor", "middle")  
       .style("font-size", "16px") 
       .style("text-decoration", "underline");
   return this;  //important
}

var svg = d3.select('#svg')
// 1st approach - simple and stable
var circle = function(){
  return svg.append('circle')
    .attr('cx', 100)
    .attr('cy', 100)
    .attr('r', 40)
}
circle()
  .style('fill', 'green')
circle()
  .style('fill', 'red')
  .attr('r', 20)
// 2nd approach - more generic, but not very stable.
// !! Use it carefully !!
d3.selection.prototype.myFillMixin = function(){
  return this.style('fill', '#27F')
    .style('stroke', 'red')
    .style('stroke-width', 4)
    .style('opacity', .7)
}
svg.append('rect')
  .attr('x', 200)
  .attr('y', 200)
  .attr('width', 100)
  .attr('height', 100)
  .myFillMixin()
svg.append('rect')
  .attr('x', 240)
  .attr('y', 240)
  .myFillMixin() //No matter where to place
  .attr('width', 100)
  .attr('height', 100)

小提琴

相关文章：