0

Buenas me encuentro migrando a typeScript y me encuentro con este pase de parametros en casi toda la aplicacion. Me resulta muy extraña, quisiera saber si conviene modificarla por una clase con un constructor o tratar de imitarlo en typeScript.

Funcion a exportar:

import Palette from '../chart/palette/palette.js';
import Default from './draws/default.js';
import Range from './draws/range.js';
import Secuential from './draws/secuential.js';
import Semantic from './draws/semantic.js';


export default function Legend() {
    var container = {}; 
    var data = {};
    var dataChart = {};
    var config = {};
    var dataMap = [];
    var type = "";
    var maskTitle = function(value){ return value };
    var d3 = null;
    var range = null;

    var object = {};

    object.draw = function() {
        let formatSuffix = d3.format(".3s");
        
        let legendContent = d3.select(container)
            .append("div")
            .attr("class", "legendContainer layout-column")
            .style("width", "100%")
            .style("height", "100%")
            .style("padding", "9px");

        if (data.length == 0) {
            return;
        }

        let colorPalette = new Palette;
        let color = colorPalette.d3(d3).setRange(dataChart,config,dataMap);

        if (type == 'Semantics') {
            let legend = new Semantic;
            legend.$el(legendContent).config(config).color(color).maskTitle(maskTitle);
            legend.render(config.pallet,dataMap);
        } else if (type == 'Secuential') {
            let legend = new Secuential;
            legend.$el(legendContent).config(config).color(color).maskTitle(maskTitle).formatSuffix(formatSuffix);
            legend.render(config.dataSerieColors,dataMap);
        } else if (type == 'range') {
            let legend = new Range;
            legend.$el(legendContent).config(config).color(color).maskTitle(maskTitle).formatSuffix(formatSuffix);
            legend.render(range,dataMap);
        } else {
            let legend = new Default;
            legend.$el(legendContent)
            .config(config)
            .color(color)
            .maskTitle(maskTitle);
            legend.render(data,dataMap);
        }

        if (config.orientation) {
          if (config.orientation === "horizontal") {
            legendContent.attr("class", "legendContainer g-row row-space-between")
          } else
            legendContent.attr("class", "legendContainer g-column")
        } else {
          if (config.align === "b" || config.align === "t" ) {
            legendContent.attr("class", "legendContainer g-row row-space-between")
          } else {
            legendContent.attr("class", "legendContainer g-column");
          }
        }

        return object;

    }

    object.container = function(value){
        if (!arguments.length) return container;
        container = value;
        return object;
    };

    object.data = function(value){
        if (!arguments.length) return data;
        data = value;
        return object;
    };

    object.dataChart = function(value){
        if (!arguments.length) return dataChart;
        dataChart = value;
        return object;
    };

    object.config = function(value){
        if (!arguments.length) return config;
        config = value;
        return object;
    };

    object.dataMap = function(value){
        if (!arguments.length) return dataMap;
        dataMap = value;
        return object;
    };

    object.maskTitle = function(value){
        if (!arguments.length) return maskTitle;
        maskTitle = value;
        return object;
    };


    object.type = function(value){
        if (!arguments.length) return type;
        type = value;
        return object;
    }; 

    object.d3 = function(value){
        if (!arguments.length) return d3;
        d3 = value;
        return object;
    }; 

    object.range = function(value){
        if (!arguments.length) return range;
        range = value;
        return object;
    }; 


    return object;

}

Y se declara y envian valores desde otro archivo asi:

Donde se declara y usa la funcion

let legend = new Legend;
    legend.container(this.container.nativeElement)
      .type(type)
      .data(values)
      .dataChart(dataChart)
      .config(this.data.legendConfig)
      .dataMap(this.data.rowFieldMap)
      .maskTitle(this.chartService.parseName)
      .range(this.data.range)
      .d3(d3);
    legend.draw();

Actualmente encontre la manera de mandar parametros usando una clase con constructor. Pero me esta pasando que toda la aplicacion tiene esta modalidad de pasar parametros usando object y una funcion declarada por cada parametro ademas de crear una variable por cada dato que se va a usar en dicha funcion. Es decir, se crea un object con una funcion para cada parametro y a la vez crea en la funcion misma a exportar una variable por cada parametro para no tener error de undefined. La verdad no lo entiendo. ¿Es correcto la forma en que usa object y function aca? ¿Que seria lo mas acertado para typeScript? ¿Function o Class?

5
  • No es que sea extraño, simplemente estas encadenando varios callbacks, sobre si conviene o no... dependera de por ejemplo de si requieres realizar varios llamados a metodos del mismo objeto de manera organizada y sincronica, en tu caso aplicaria bien porque son muchos metodos de un mismo objeto.
    – Layer
    Commented el 4 abr. 2022 a las 22:26
  • Lo que no veo viable es la forma en la que tienes tu objeto construido, es decir, estas declarando y definiendo explicitamente los metodos y propiedades que tendra tu objeto dentro de otra clase, y esto para mi es terrorifico, pues realmente como tal ese objeto que tienes deberia ser una instancia de una clase aparte, es decir, si bien esa declaracion funciona no es ni de lejos la mejor manera de hacerlo, como tal es una forma ya bastante prehistorica de representar clases, y se deberia considerar depreciado pues se pierde el orden, las clases se vuelven mas extensas.
    – Layer
    Commented el 4 abr. 2022 a las 22:29
  • Se pierde performance y muchos muchos otros problemas. Para mi la forma correcta seria que en vez de declarar las propiedades y metodos de object dentro de la clase principal, crearas una clase aparte, y que object sea una instancia de esa clase, clase la cual contendra todas las propiedades y metodos que estabas definiendo de manera explicita dentro de otra clase.
    – Layer
    Commented el 4 abr. 2022 a las 22:31
  • Ok, a eso me refería con "extraño" si para eso están los constructores y las propiedades.
    – BCBB
    Commented el 4 abr. 2022 a las 22:42
  • Lo que me resulta chocante es que use un metodo para tomar los valores
    – BCBB
    Commented el 4 abr. 2022 a las 22:45

1 respuesta 1

1

Finalmente. Hay varias formas de exportar una clase y/o funcion y cargarle los parametros sea usando el constructor con "()" o cargando las propiedades de la funcion a exportar por medio de otras funciones. La forma correcta será la que funcione bien en toda la aplicación para el uso que se le de a la función exportada. En mi caso, esta bien y tiene una razon de ser esa forma de trabajar aunque el codigo mejorado y funcional quedaria de la siguiente manera:

  1. export function utilizando constructor '()':

introducir la descripción de la imagen aquí

  1. Preservando el formato original donde se cargan los datos por metodos pero ahora object se elimino y se utiliza "this" haciendo referencia al mismo objeto función.(Aca aplicado a la funcion semantic, ambas formas son aplicables)

    export default function Semantic() {

     let $el: any = {}; 
     let config: any = {};
     let color: any= {}; 
     let maskTitle: (text: string, dataMap: any[]) => string;
    
     this.render = function (pallet: any, dataMap: []) {
         let containerBbox = $el.node().getBoundingClientRect();
    
         let legend = $el.selectAll(".legend")
             .data(pallet.colors)
             .enter().append("div")
             .attr("class", "legend g-column");
    
         let rangeGroup = legend.append('div')
             .attr("class", "range-group g-column")
             .style('width', '100%');
    
         let groupColors =  rangeGroup.append('div')
             .attr("class", "Cualitativepallete g-row");
    
         let colorDiv = groupColors.selectAll('.color')
             .data((d)=>{return d.gama})
             .enter().append("div")
             .attr("class", "color")
             .style("width", "100%")
             .style("height", "15px")
             .style("margin", "1px")
             .style('background-color', (c)=>{return c});
    
         let spanRange = rangeGroup.append('div')
             .attr("class", "span-range g-row row-space-between");
    
         spanRange.append('span')
             .style("font-size", config.fontSize+"px")
             .html((d) =>{return d.start});
    
         spanRange.append('span')
             .style("font-size", config.fontSize+"px")
             .html((d) =>{return d.end});
         return this;
     }
    
     this.$el = function(value) {
         if (!arguments.length) return $el;
         $el = value;
         return this;
     }
    
     this.config = function(value) {
         if (!arguments.length) return config;
         config = value;
         return this;
     }
    
     this.color = function(value) {
         if (!arguments.length) return color;
         color = value;
         return this;
     }
    
     this.maskTitle = function(value) {
         if (!arguments.length) return maskTitle;
         maskTitle = value;
         return this;
     }
    

    }

nota: De momento use mucho el tipo 'any' para poder hacer el paso a ts mas fluido.

Editado: "Funciones callback": https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/que-es-un-callback/

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.