Разрушение с перегрузкой функций
2015 update: подход flexbox
Есть два других ответа, кратко упомянувших flexbox ; однако это было более двух лет назад, и они не приводят никаких примеров. Спецификация для flexbox определенно решена.
Примечание. Хотя спецификация компоновки CSS Flexible Boxes находится на этапе рекомендации кандидата, не все браузеры ее реализовали. Реализация WebKit должна иметь префикс -webkit-; Internet Explorer реализует старую версию спецификации, с префиксом -ms-; В Opera 12.10 реализована последняя версия спецификации, без изменений. См. Таблицу совместимости каждого свойства для актуального состояния совместимости.
(взято из https://developer.mozilla.org/en-US/docs/Web/Guide/ CSS / Flexible_boxes )
Все основные браузеры и IE11 + поддерживают Flexbox. Для IE 10 и старше вы можете использовать прокладку FlexieJS.
Чтобы проверить текущую поддержку, вы также можете увидеть здесь: http://caniuse.com/#feat=flexbox
Рабочий пример
С помощью flexbox вы можете легко переключаться между любыми вашими строками или столбцами, имеющими фиксированные размеры, размеры размера контента или размеры оставшегося пространства. В моем примере я установил заголовок для привязки к его контенту (в соответствии с вопросом OP), я добавил нижний колонтитул, чтобы показать, как добавить область с фиксированной высотой, а затем установить область содержимого для заполнения оставшегося пространства.
html, body { height: 100%; margin: 0 } .box { display: flex; flex-flow: column; height: 100%; } .box .row { border: 1px dotted grey; } .box .row.header { flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */ } .box .row.content { flex: 1 1 auto; } .box .row.footer { flex: 0 1 40px; }header
(sized to content)content (fills remaining space)
В CSS выше свойство flex сокращает гибкость , flex-shrink и flex-basis , чтобы установить гибкость элементов flex. Mozilla имеет хорошее введение в модель гибких ящиков .
3 ответа
Кажется немного сложным, почему бы просто не изменить логику, мне кажется более читабельным.
console.clear();
class Foo
{
getNeighbours(coords: ICoords): ICoords[];
getNeighbours(x: number, y: number) : ICoords[];
getNeighbours(coords: number | ICoords, y?: number) : ICoords[]{
if (typeof coords !=="object") {
coords = { x: coords, y: y};
}
const result = [
{ x: coords.x - 1, y: coords.y },
{ x: coords.x + 1, y: coords.y },
{ x: coords.x, y: coords.y - 1 },
{ x: coords.x, y: coords.y + 1 }];
return result;
}
}
interface ICoords {
x: number;
y: number;
}
let foo = new Foo();
//debugger;
console.log(foo.getNeighbours(1,1));
console.log(foo.getNeighbours({x:1,y:1}));
need to destructuring declaration and to access global scope use var instead of let.
public getNeighbours(coords: Coords): Coords[];
public getNeighbours(x: number, y: number): Coords[];
public getNeighbours(a: number | Coords, b?: number): Coords[] {
// let x: number;
// let y: number;
if (typeof a === 'object') {
var {x, y} = a as Coords; // A destructuring declaration must have an initializer
x = x;
y = y;
console.log('inside destructuring: ', x, y);
} else {
x = a;
y = b as number;
}
console.log('outside destructuring: ', x,y);
const result = [{ x: x - 1, y }, { x: x + 1, y }, { x, y: y - 1 }, { x, y: y + 1 }];
return result;
}
проверьте здесь Пример StackBlitz
можно избежать var и объявить объект глобально.
public getNeighbours(coords: Coords): Coords[];
public getNeighbours(x: number, y: number): Coords[];
public getNeighbours(a: number | Coords, b?: number): Coords[] {
// let x: number;
// let y: number;
let globalStorage: any = {};
if (typeof a === 'object') {
let {x, y} = a as Coords; // A destructuring declaration must have an initializer
globalStorage.x = x;
globalStorage.y = y;
console.log('inside destructuring: ', x, y);
} else {
globalStorage.x = a;
globalStorage.y = b as number;
}
console.log('outside destructuring: ', globalStorage);
const result = [{ x: globalStorage.x - 1, y:globalStorage.y }, { x: globalStorage.x + 1, y:globalStorage.y }, { x: globalStorage.x, y: globalStorage.y - 1 }, { x: globalStorage.x, y: globalStorage.y + 1 }];
return result;
}
Перед деструктуризацией отсутствует let.
let { x, y } = a as Coords;