Поиск по метке: JavaScript

Понемногу перебираюсь на JavaScript ES6 синтаксис. По мере появления его нативной поддержки в nodeJS и Chrome. ES6 таит в себе множество не очевидных вещей. Больше всего я их встретил в class-ах. Классы в ES6 это обширный набор синтаксического сахара для prototype. С ними писать код приятнее, да и сам синтаксис вынуждает подходить к этому дисциплинированнее. В этой мини-заметке я опишу пары интересных моментов:

• Синтаксис допускает только короткие имена методов;
• Тело класса описывает методы, которые будут помещены в prototype и статические методы, которые будут помещены в сам объект класса. Так вот… Таким образом вы можете поступить только с методами и generator-ми. Т.е. никаких хешей, никаких чисел, строк, регулярных выражений. Всё, что вы захотите поместить сверх методов и генераторов будет идти уже отдельными строками кода после описания класса;
• Это ограничение довольно понятно. Дескать дисциплинирует все подобные вещи определять в конструкторе и не позволяет переписывать детьми в прототипе. Но… Почему то nodejs не поддерживает статические generator-ы. Не статические поддерживает, а на статические лови syntax error. Наверное это баг (static * name());
• Для удобного доступа к родительским методам (имею ввиду наследование классов) придуман super. Но… Если вы переопределяете конструктор класса, вы:
  1. Обязаны вызвать super, чтобы получить доступ к this. 
  2. Да да. До этого момента this отсутствует как таковой. Соответственно вызвать родительский конструктор, предварительно задав какие-нибудь поля новому объекту, без бунов не получится. Зачем они так сделали? о_О.
• Методы и генераторы заданные в теле класса будут не-enumerable. Но для получения их списка можно воспользоваться: Object.getOwnPropertyNames(Object.getPrototypeOf(this)).

Пока что это все грабли на которые я наткнулся. В скором времени ожидается поддержка со стороны Firefox.

В то время как браузеры умеют WebGL, анимации и многое другое, до сих пор не вменяемой поддержки таких значимых вещей как нормальная вёрстка таблиц, переносы в тексте, полноценная поддержка unicode-а в регулярных выражениях, justify-выравнивание и т.д.. Сий пост про переносы текста.

Итак. Что мы имеем? Мы имеем css3 свойство hyphen: auto. Но довольно унылую поддержку. Во-первых его не умеет ни Chrome, ни его клоны. Во-вторых его не умеет Firefox под linux. В третьих (в чём я не уверен) поддержка идёт на уровне встроенных словарей. Т.е. если вам потребовалась поддержка переносов в, к примеру, казахском тексте, вас снова ждёт облом. Но само свойство хорошо. В идеале вбив его можно забыть про все проблемы, ибо браузер сам их порешает.

Что у нас есть ещё вналичии? Есть такие опции как word-break, word-wrap, overflow-wrap, line-break. К сожалению никакая комбинация этих свойств не позволяет добиться нормальных переносов в таблице, которую перекашивает, как раз из-за отсутствия этих переносов. Например вы можете добиться вот такого вот результата:

Подробности под катом…

подробности…

Внезапно оказался перед фактом ― закончилось место на VPS. Оказалось, что node-forever съел своими логами 21 GiB места на винте. Приложение упрямо не хотело подниматься, падало, forever это писал в логи и снова пытался его поднять. Забавно…

Возникла задача ― в скролируемом контейнере найти первый видимый domElement. Я подумал, что, наверняка, это довольно частая задача, и должно быть множество разных готовых решений. Порыскав по сети я нашёл лишь множество вариаций одного и того же: рекурсивный обход всего древа domElement-ов, с рассчётом их границ. В голову полезли варианты с бинарным поиском по тому же принципу, но уж больно не хотелось с этим всем связываться. Как то уж слишком сурово, для такой мелочной задачи. Должен быть "нативный" инструмент.

Увы, совсем уж нативного инструмента я не нашёл. Но нашёл, гхм, альтернативный путь. Возможно, кому-нибудь ещё пригодится. 

• У контейнера, который содержит искомые domElement-ы вызываем getBoundingClientRect. Получаем его расположение на экране
• Вычисляем координаты какого-либо участка из viewPort-а, где должен находится искомый domElement
• Вызываем document.elementFromPoint, указав нужные координаты экрана
• profit…

Решение сгодится не для любого случая. Но мне вполне подошло.

Для нужд разработки возникла необходимость в proxy-овании некоторых запросов, в обход CORS-а. Погуглив и слегка причесав код, получилось следующее:

"use strict";

/**
 * run: iojs --harmony_arrow_functions proxy.js
 *
 * nginx:
 * location ~ ^/api.*$ {
 * 	proxy_pass http://127.0.0.1:3001;
 * 	proxy_set_header X-Real-IP $remote_addr;
 * 	proxy_set_header Host $host;
 * 	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 * }
 */

let hostname = '%hostname%';
let port = 3001;
let auth = '%user%:%pass%';
let http = require('http');

http.createServer((clientReq, clientRes) =>
{
	let opts =
	{
		hostname: hostname,
		port: 80,
		path: clientReq.url,
		auth: auth,
		headers: clientReq.headers,
		method: clientReq.method
	};
	opts.headers.host = hostname;

	console.info('serve: %s %s', clientReq.method, clientReq.url);

	let proxy = http.request(opts, (proxyRes) =>
	{
		proxyRes.addListener('data', (chunk) => clientRes.write(chunk, 'binary'));
		proxyRes.addListener('end', () => clientRes.end());
		clientRes.writeHead(proxyRes.statusCode, proxyRes.headers);
	});

	clientReq.addListener('data', (chunk) => proxy.write(chunk, 'binary'));
	clientReq.addListener('end', () => proxy.end());
}).listen(port);

Запускается путём выполнения iojs --harmony_arrow_functions proxy.js, логирует все запросы в консоль. Точно умеет POST, GET, отдавать статику… Для простых нужд вполне сгодится. Жаль браузеры пока толком не умеют arrow functions :(