març 11, 2021

Encadenar Mètodes


encadenar Mètodes

D3 utilitza una tècnica anomenada sintaxi de cadena, similar a la de jQuery. Mitjançant l’encadenament de mètodes separats per punts, és possible executar diverses accions en una mateixa línia de codi. Això pot ser ràpid i fàcil, però és important entendre com funciona, per estalviar-se hores de mals de cap depurant el codi.

Per cert, funcions i mètodes són dues paraules diferents per descriure el mateix concepte: una unitat de codi que accepta un argument com a entrada, porta a terme alguna acció, i retorna alguna dada de sortida.

Revisem novament la primera línia de codi en D3. Pàgina d’exemple.

d3.select("body").append("p").text("New paragraph!");

Això pot semblar una mica desordenat, especialment quan s’està començant a programar. El primer que toca sap és que JavaScript, a l’igual que HTML, ignora l’espai en blanc i els canvis de línia, per tant es pot incloure cáda un dels mètodes en la seva pròpia línia, la qual cosa és més llegible.

d3.select("body").append("p").text("New paragraph!");

Cada qui té el seu propi estil de progamar, per tant pot utilitzar diferents espais d’indentació (sagnia), canvis de línia, o espai en blanc d’acord amb les seves preferències.

Un Enllaç a la Vegada

Vegem les diferents parts de el codi anterior.

d3 – referència a l’objecte D3, de tal manera que es pugui accedir a les seves mètodes.

.select ( “body”) – a l’donar-li a select () un selector de CSS com a entrada, aquest tornarà una referència a el primer element de DOM que coincideixi. (Es recomana usar SelectAll () quan es necessiti més d’un element). En aquest cas, només es necessita l’etiqueta body, per això es passa la referència a body a el següent mètode de la cadena.

la Transferència

molt s però no tots els mètodes retornen una selecció (realment la referència a la selecció), la qual cosa permet aplicar la tècnica tan útil que és l’encadenament de mètodes. Usualment, un mètode retorna una referència a l’objecte que va alterar, però no sempre.

Per a recordar: Quan s’encadenen mètodes l’ordre importa. El tipus de sortida (output) d’un mètode ha de coincidir amb el tipus d’entrada (input) de el següent mètode de la cadena. Si les entrades i sortides de mètodes adjacents no són compatibles, no passarà la transferència d’informació.

Esquema sense Encadenaments

El codi de l’exemple també es pot escriure sense la sintaxi d’encadenament.

var body = d3.select("body");var p = body.append("p");p.text("New paragraph!");Realmente mucho más confuso! Sin embargo, abrá veces cuando será necesario romper la cadena, como cuando se hacen llamados a tantas funciones que no vale la pena encadenarlas todas. O simplemente porque puede ser mejor organizar el código de una manera que tenga mayor sentido para quien lo está elaborando.

Següent: Associar Dades – >

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *