Assignment: OOP
The main goal of this assignment is to implement the project described in section Laying out a table of the 6th chapter of Eloquent JS: The Secret Life of Objects.
Milestones
- Use the GitHub repository given when the assignment was accepted.
- Split the classes in different files, exporting the appropriate objects.
- Make a branch
ecma5
in which classes are defined using ECMA5 syntax. ECMA6 syntax classes will be defined in branchmaster
. - Add tests for each of the classes:
UnderlinedCell
,TextCell
andStretchCell
. - Add continuous integration using Travis.
- Add a Travis badge to this
README.md
file, linking to the tests. - Add coverage with Istanbul for the new class.
- Give the links to both the GitHub repository and the Travis tests.
StretchCell class
The class StretchCell
creates a cell that stretches its height and width to whatever is bigger: the height and width of the content or the height and width explicitly given.
- The constructor has 3 parameters: content, width, height.
- Methods implemented:
- minHeight(): returns the max height value between the one given by the content or the one specified in the constructor.
-
minWidth(): equivalent to
minHeight()
.
Author: Sara Revilla Báez
Reto para la Práctica de OOP
El Contexto. Introducción
La función dataTable
en d-table.js
es la que parsea el objeto construído a partir de la entrada y decide la clase de celda que se aplica a cada entrada, retornando un array de objetos que son de alguna clase Celda:
<<<<<<< HEAD
dataTable(data) {
var keys = Object.keys(data[0]);
var headers = keys.map(function(name) {
return new UnderlinedCell(name);
});
var body = data.map(function(row) {
return keys.map(function(name) {
var value = row[name];
if (/^\s*[-+]?\d+([.]\d*)?([eE][-+]?\d+)?\s*$/.test(value))
return new RCell(String(value));
else
return new TCell(String(value));
});
});
return [headers].concat(body);
}
=======
## StretchCell class
The class `StretchCell` creates a cell that stretches its height and width to whatever is bigger: the height and width of the content or the height and width explicitly given.
- The constructor has 3 parameters: content, width, height.
- Methods implemented:
- _minHeight()_: returns the max height value between the one given by the content or the one specified in the constructor.
- _minWidth()_: equivalent to `minHeight()`.
#### Files:
package.json - configuration and dependencies
gulpfile.js - test: run mocha tests - debugger: run the debbugger - run: run the program
src - source folder input.json - input file main.js - main program Cell.js - class cell RCell.js - class rcell UnderlinedCell.js - class underlinedcell Table.js - class table
test - mocha test test.js
master
* Los nombres de los atributos del objeto son tratados como objetos de la clase `UnderlinedCell`:
```js
var headers = keys.map(function(name) {
return new UnderlinedCell(name);
});
-
Si parece que el contenido es un número, es tratado como una
RCell
if (/^\s*[-+]?\d+([.]\d*)?([eE][-+]?\d+)?\s*$/.test(value)) return new RCell(String(value));
-
Si no, es tratado como una
TCell
:else return new TCell(String(value));
Objetivo
Modifique dataTable
para que aquellas celdas en las que el valor es un objeto en vez de una String
o un Number
se interpreten como del tipo specificado en el atributo type
Sigue un ejemplo de entrada:
[
{"name": {"type": "StrechCell", params: ["Teide", 2, 6]}, "height": 3718, "country": "Spain"},
{"name": "Kilimanjaro\nMontaña mágica", "height": 5895, "country": "Tanzania"},
{"name": "Everest", "height": 8848, "country": "Nepal\nPaís lejano"},
{"name": {"type": "StrechCell", params: ["Mount Fuji", 2]}, "height": 3776, "country": "Japan"},
{"name": "Mont Blanc", "height": {"type": "TCell", params: [4808]}, "country": "Italy/France"},
{"name": "Vaalserberg", "height": 323, "country": "Netherlands"},
{"name": "Denali", "height": 6168, "country": "United States"},
{"name": "Popocatepetl", "height": 5465, "country": "Mexico"}
]
El atributo type
tiene el nombre de la clase de la celda y el atributo params
la lista de parámetros que se pasaran al constructor de la clase.
Notas
-
Documentación del método apply: El método
apply()
invoca una determinada función asignando explícitamente el objetothis
y un array o similar (array like object) como parámetros (argumentos) para dicha función. -
Este es un ejemplo de mapa que asocia nombres de clases con constructores;
[~/ull-pl1718-campus-virtual/tema1-intro-a-js/practica-oop/OOP/src(reto2)]$ node > DTable = require("d-table") > TCell = require("t-cell") > RCell = require("r-cell") > Classes = new Map() > Classes["TCell"] = TCell > Classes["RCell"] = RCell > w = "RCell" > x = new (Classes[w])("Chinyero") RCell { text: [ 'Chinyero' ] }
-
En ECMA6 el método
constructor
nos devuelve el constructor, el cual tiene un atributoname
:> "hello".constructor.name 'String' > (432).constructor.name 'Number' > ({c:4,w:2,h:3}).constructor.name 'Object'