Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   ЧаВО - часто задаваемые вопросы (faq) (https://javascript.ru/forum/misc/9459-chavo-chasto-zadavaemye-voprosy-faq.html)

Alikberov 07.07.2022 11:38

Цитата:

Сообщение от рони (Сообщение 546505)
Alikberov,
вам влом написать function?

Взялся писать MMX-Тестер с перспективой на SSE/AVX. А так как BigInt поддерживает только 64 бита, более-менее легко реализовывать только MMX-команды.
По-этому, сейчас прощупываю способы попутного указания свойств числам, чтобы сократить количество функций.
(Чтобы на каждые «PCMPEQB»/«PCMPEQW»/«PCMPEQD»/«PCMPEQQ» не писать отдельные функции, а описать одну «PCMP» и вызывать её примерно вот так «BigInt(m).EQ.D.PCMP(n)», чтобы эти попутные «EQ» и «D» передавали маску, ширину слова и тип сравнения…)

Но, оказывается, JavaScript знаю довольно плохо…:lol:

Aetae 07.07.2022 22:38

Alikberov,
1. Стрелочная функция захватывает this при создании и не меняет его при вызове, т.е. твоё
Number.prototype.__defineGetter__
	("ME", () => {
		this.PERSON = "Me";
		return this;
	});
Равносильно:
var arrowThis = this;
Number.prototype.__defineGetter__
	("ME", function () {
		arrowThis.PERSON = "Me";
		return arrowThis;
	});

Где в arrowThis будет лежать в данном случае глобальный this, который в нестрогом режиме равен window, в строгом - undefined.

2. BigInt - это не Int64, это реально длинная арифметика, и она условно безгранична (ограниченна только платформой).

Alikberov 07.07.2022 23:33

Симуляция индикаторной микросхемы ИПВ72А-4/5X7
 
<html>
<head>
<title>ИПВ72А-4/5x7</title>
<meta http-equiv="refresh" content="300; url=https://www.chipfind.ru/datasheet/proton/ipv72a45h7l.htm">
<script>
var	hIPV;
var	ctx;
var	mtx;
var	mask = 0;
var	data = 0;
var	tick = 0;
var	time = 0;
var	delay = 0;
var	speed = 1;	// ...?speed=1
var	fading = -1;	// ...?fade=1
var	stream = [	// ...?stream=D1_8E-6E-4E_1F-7F-5F_15-75-55_1F-7F-5F_15-75-55_1B-7B-5B_0E-6E-4E
// 12 10  8  5  4  3  2  1
// DI \C EN Y5 Y4 Y3 Y2 Y1
// D7_D6_D5_D4_D3_D2_D1_D0
// -----------------------
//  1  1  0 <-- Prepare display start
//  1  0  0 <-- Strobe first line
//  0  1  1 <-- Display line
//  0  1  0 <-- Prepare next line
//  0  0  0 <-- Strobe next line
//  0  1  1 <-- Display line
//  0  1  0 <-- Prepare next line
//  0  0  0 <-- Strobe next line
	0xD1,
	0x91, 0x71, 0x51,
	0x11, 0x71, 0x51,
	0x11, 0x71, 0x51,
	0x1F, 0x7F, 0x5F,
	0x11, 0x71, 0x51,
	0x11, 0x71, 0x51,
	0x11, 0x71, 0x51,
	0x1F, 0x7F, 0x5F,
	0x10, 0x70, 0x50,
	0x10, 0x70, 0x50,
	0x1E, 0x7E, 0x5E,
	0x10, 0x70, 0x50,
	0x10, 0x70, 0x50,
	0x1F, 0x7F, 0x5F,
	0x10, 0x70, 0x50,
	0x10, 0x70, 0x50,
	0x10, 0x70, 0x50,
	0x10, 0x70, 0x50,
	0x10, 0x70, 0x50,
	0x10, 0x70, 0x50,
	0x1F, 0x7F, 0x5F,
	0x0E, 0x6E, 0x4E,
	0x11, 0x71, 0x51,
	0x11, 0x71, 0x51,
	0x11, 0x71, 0x51,
	0x11, 0x71, 0x51,
	0x11, 0x71, 0x51,
	0x0E, 0x6E, 0x4E
	];

function main() {
	const	user_stream = window.location.href.match(/stream=([0-9_A-F+-]+)/i);
	const	user_speed = window.location.href.match(/speed=(\d+)/i);
	const	user_fade = window.location.href.match(/fade=(\d+)/i);
	const	pins = "Y1 Y2 Y3 Y4 Y5 CH DO EN +5 C 0V DI".split(/\s+/);
	hIPV = document.getElementById("IPV");
	ctx = hIPV.getContext("2d");
	ctx.clearRect(0, 0, hIPV.width, hIPV.height);
	mtx = ctx.getImageData(0, 0, 400, 128);
	for(var i = 0; i < mtx.data.length; i += 4) {
		mtx.data[i] = 255;
		mtx.data[i + 1] = 0;
		mtx.data[i + 2] = 0;
		mtx.data[i + 3] = 0;
	}
	ctx.fillStyle = "white";
	ctx.fillRect(0, 0, 208, 256);
	ctx.strokeStyle = "black";
	ctx.beginPath();
	ctx.lineWidth = 2;
	ctx.rect(108, 7, 88, 240);
	ctx.rect(148, 94, 40, 75);
	ctx.rect(158, 130, 10, 20);
	ctx.moveTo(128, 7);
	ctx.lineTo(128, 247);
	ctx.rect(7, 7, 20, 160);
	for(var i = 0; i < 7; ++ i) {
		ctx.moveTo(108, 28 + (i + 4) * 20);
		ctx.lineTo(128, 28 + (i + 4) * 20);
		ctx.moveTo(7, 28 + i * 20);
		ctx.lineTo(27, 28 + i * 20);
	}
	ctx.stroke();
	ctx.beginPath();
	ctx.lineWidth = 1;
	for(var i = 0; i < 12; ++ i) {
		ctx.moveTo(88, 16 + i * 20);
		ctx.lineTo(108, 16 + i * 20);
		ctx.textAlign = "right";
		ctx.strokeText(String(i + 1), 104, 12 + i * 20);
		ctx.textAlign = "left";
		ctx.strokeText(pins[i], 110, 20 + i * 20);
	}
	ctx.strokeText("4x", 132, 135);
	ctx.textAlign = "center";
	ctx.strokeText("5x7", 168, 115);
	for(var i = 0; i < 8; ++ i) {
		ctx.moveTo(27, 16 + i * 20);
		ctx.lineTo(88, 16 + (i < 5 ? i : (i - 5) * 2 + 7) * 20);
		ctx.strokeText(`D${i}`, 17, 20 + i * 20);
	}
	ctx.stroke();
	if(user_stream) {
		stream = [];
		for(const data of user_stream[1].split(/[-_+]+/))
			stream.push(parseInt(data, 16));
	}
	if(user_speed)
		speed = parseInt(user_speed[1]);
	if(user_fade)
		fading = -parseInt(user_fade[1]);
	show();
}

function show() {
	var	digit;
	var	x, y;
	var	p, err;
	var	fire;
	for(digit = 0; digit < 4; ++ digit) {
		err = [-1, 0, 1/4, 1.4][digit];
		for(y = 0; y < 7; ++ y) {
			for(x = 0; x < 5; ++ x) {
				fire = ((data >> (4 - x)) & 1) > 0 && ((mask >> (digit * 7 + y)) & 1) > 0 && (data & 0x20) > 0 ? 255 : fading;
				p = (100 * digit + 12 * 400 * y + x * 12 + 8 + Math.floor(err * y)) * 4;
				mtx.data[p + 3] += fire;
				mtx.data[p + 3 + 4] += fire;
				mtx.data[p + 3 + 8] += fire;
				mtx.data[p + 3 + 12] += fire;
				mtx.data[p + 3 + 16] += fire;
				mtx.data[p + 3 + 20] += fire;
				mtx.data[p + 3 + 24] += fire;
				mtx.data[p + 3 + 1600] += fire;
				mtx.data[p + 3 + 1600 + 4] += fire;
				mtx.data[p + 3 + 1600 + 8] += fire;
				mtx.data[p + 3 + 1600 + 12] += fire;
				mtx.data[p + 3 + 1600 + 16] += fire;
				mtx.data[p + 3 + 1600 + 20] += fire;
				mtx.data[p + 3 + 1600 + 24] += fire;
				mtx.data[p + 3 + 3200] += fire;
				mtx.data[p + 3 + 3200 + 4] += fire;
				mtx.data[p + 3 + 3200 + 8] += fire;
				mtx.data[p + 3 + 3200 + 12] += fire;
				mtx.data[p + 3 + 3200 + 16] += fire;
				mtx.data[p + 3 + 3200 + 20] += fire;
				mtx.data[p + 3 + 3200 + 24] += fire;
				mtx.data[p + 3 + 4800] += fire;
				mtx.data[p + 3 + 4800 + 4] += fire;
				mtx.data[p + 3 + 4800 + 8] += fire;
				mtx.data[p + 3 + 4800 + 12] += fire;
				mtx.data[p + 3 + 4800 + 16] += fire;
				mtx.data[p + 3 + 4800 + 20] += fire;
				mtx.data[p + 3 + 4800 + 24] += fire;
				mtx.data[p + 3 + 6400] += fire;
				mtx.data[p + 3 + 6400 + 4] += fire;
				mtx.data[p + 3 + 6400 + 8] += fire;
				mtx.data[p + 3 + 6400 + 12] += fire;
				mtx.data[p + 3 + 6400 + 16] += fire;
				mtx.data[p + 3 + 6400 + 20] += fire;
				mtx.data[p + 3 + 6400 + 24] += fire;
				mtx.data[p + 3 + 8000] += fire;
				mtx.data[p + 3 + 8000 + 4] += fire;
				mtx.data[p + 3 + 8000 + 8] += fire;
				mtx.data[p + 3 + 8000 + 12] += fire;
				mtx.data[p + 3 + 8000 + 16] += fire;
				mtx.data[p + 3 + 8000 + 20] += fire;
				mtx.data[p + 3 + 8000 + 24] += fire;
			}
		}
	}
	ctx.putImageData(mtx, 236, 76);
	for(var z = 0; z < 2; ++ z) {
		ctx.strokeStyle = ["blue", "red"][z];
		ctx.fillStyle = ["grey", "silver"][z];
		ctx.beginPath();
		for(var i = 0; i < 8; ++ i) {
			if(((data >> i) & 1) == z) {
				ctx.moveTo(27, 16 + i * 20);
				ctx.lineTo(88, 16 + (i < 5 ? i : (i - 5) * 2 + 7) * 20);
				ctx.fillRect(8, 8.5 + i * 20, 18, 17.5);
				ctx.strokeText(`D${i}`, 17, 20 + i * 20);
			}
		}
		ctx.stroke();
	}
	if(tick == 1 && (data & 0x40) == 0)
		mask = ((mask & 0x07FFFFFF) << 1) | ((data & 0x80) >> 7);
	tick = (data & 0x40) >> 6;
	data = stream[time];
	if(-- delay < 0) {
		delay = speed;
		if(++ time >= stream.length)
			time = 0;
	}
	requestAnimationFrame(show);
}
</script>

<style>
body {
	margin		:0 0 0 0;
}
canvas {
	background-image:url('https://optochip.org/docum/store/factory/series/140509/1487235592-2-4687.jpg');
	background-position: 178px -34px;
	background-size	:77%;
}
</style>
</head>

<body onload='main()'>
<canvas id=IPV width=640 height=256></canvas>
</body>

рони 07.07.2022 23:41

Цитата:

Сообщение от Alikberov
Тo есть, решения нет?

Цитата:

Сообщение от рони
вам влом написать function() { вместо ()=> {

:-?

рони 07.07.2022 23:47

Alikberov,
для this Number
Number.prototype.__defineGetter__
	("ME", function() {
		this.PERSON = "Me";
		return this;
	});

Alikberov 08.07.2022 00:02

Интерактивный генератор УГО микросхем
 
<html>
<head>
<title>Logisim Part Design Generator</title>
<script>
var	hDesigner;
var	hDesign;
var	hModel;

function draw() {
	const	ctx = hDesign;
	const	dsg = hDesigner.value.split(/\r?\n/);
	//
	var	model = [];
	//
	let	fnt = {
		PIDS	:"9px Serif",
		PINS	:"7px Serif"
		};
	let	part = "";
	let	mode;
	let	i;
	let	y = 0;
	let	maxy = 0;
	let	space;
	let	measure;
	//
	function setPin(font, anchor, x, y, text, circle) {
		model.push('      <text font-family="' + font.split(" ")[1] + '" font-size="' + parseInt(font) + '" text-anchor="' + anchor + '" x="' + x + '" y="' + y + '">' + text + '</text>');
		if(circle < 0 || circle > 0) {
			model.push('      <ellipse cx="' + x + '" cy="' + (y - 3) + '" fill="none" rx="3.0" ry="3.0" stroke="#000000" stroke-width="2"/>');
			model.push('      <polyline fill="none" points="' + x + ',' + (y - 8) + ',' + (x + 24 * circle) + ',' + (y - 8) +'" stroke="#000000" stroke-width="1"/>');
		}
	}
	//
	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
	for(const str of dsg) {
		const	rex = /([-.]|(\d+)([:;]\d+)*(_?)([A-Z]+)?(\d+)?(:(\d+))?(["']?))/ig;
		const	rxp = /[-.]|(\d+)(([:;]\d+)+)?(_?)([A-Z]+)((\d+)?(:\d+)?)(["']?)/i;
		const	dsc = (/(\w+)?\t*(.+)?/i).exec(str);
		var	data;
		var	last;
		var	order;
		var	names;
		var	pin;
		if(dsc[1] != "")
			mode = dsc[1],
			y = 20;
		if(mode in fnt)
			fnt[mode] = dsc[2];
		else
		if(dsc[2]) {
			for(const pin of dsc[2].match(rex)) {
				if(pin) {
					if(pin == "-") {
						y += 10;
						ctx.beginPath();
						switch(mode) {
						case "PINPUT":
							ctx.moveTo(19, y);
							ctx.lineTo(49, y);
							model.push(``);
							break;
						case "PINOUT":
							ctx.moveTo(122, y);
							ctx.lineTo(92, y);
							break;
						}
						ctx.stroke();
					} else
					if(pin != ".") {
						data = pin.match(rxp);
						if(data) {
							last = parseInt(data[1]);
							order = [last];
							if(data[2]) {
								for(const col of data[2].match(/[:;]\d+/g)) {
									const next = parseInt(col.substr(1));
									if(col.charAt(0) == ";")
										order.push(last = next);
									else
									if(last < next)
										while(last < next)
											order.push(++ last);
									else
										while(last > next)
											order.push(-- last);
								}
							}
							last = parseInt(data[6]);
							names = [last];
							if(data[8]) {
								for(const col of data[8].match(/[:;]\d+/g)) {
									const next = parseInt(col.substr(1));
									if(col.charAt(0) == ";")
										names.push(last = next);
									else
									if(last < next)
										while(last < next)
											names.push(++ last);
									else
										while(last > next)
											names.push(-- last);
								}
							} else
								names = [data[6]];
						}
						if(data)
							space = data[9] == '"' ? 30 : data[9] == "'" ? 20 : 10;
						else
							space = 10;
						switch(mode) {
						case "PART":
							part = dsc[2].split(/\t+|\s+/);
							break;
						case "PINPUT":
							ctx.beginPath();
							i = 0;
							ctx.font = fnt.PINS;
							ctx.textAlign = "right";
							for(const id of order) {
								setPin(fnt.PINS, "end", 19 ,y + space * i + 8, id);
								ctx.strokeText(id, 19, y + space * i ++ + 8);
							}
							i = 0;
							ctx.font = fnt.PIDS;
							ctx.textAlign = "left";
							for(const id of names) {
								if(data[4] == "_") {
									ctx.ellipse(19, y + space * i + 10, 2, 2, 0, 0, 2 * Math.PI, true);
									measure = ctx.measureText(data[5] + id);
									ctx.moveTo(22, y + space * i + 5);
									ctx.lineTo(22 + measure.width, y + space * i + 5);
								}
								setPin(fnt.PIDS, "start", 22, y + space * i + 13, data[5] + id, data[4] ? +1 : 0);
								ctx.strokeText(data[5] + id, 22, y + space * i + 13);
								++ i;
							}
							ctx.stroke();
							y += space * (i - 1) + 10;
							break;
						case "PINOUT":
							data = pin.match(rxp);
							ctx.beginPath();
							i = 0;
							ctx.font = fnt.PINS;
							ctx.textAlign = "left";
							for(const id of order) {
								setPin(fnt.PINS, "start", 122 ,y + space * i + 8, id);
								ctx.strokeText(id, 122, y + space * i ++ + 8);
							}
							i = 0;
							ctx.font = fnt.PIDS;
							ctx.textAlign = "right";
							for(const id of names) {
								if(data[4] == "_") {
									ctx.ellipse(122, y + space * i + 10, 2, 2, 0, 0, 2 * Math.PI, true);
									measure = ctx.measureText(data[5] + id);
									ctx.moveTo(122, y + space * i + 5);
									ctx.lineTo(122 - measure.width, y + space * i + 5);
								}
								setPin(fnt.PIDS, "end", 119, y + space * i + 13, data[5] + id, data[4] ? -1 : 0);
								ctx.strokeText(data[5] + id, 119, y + space * i ++ + 13);
							}
							ctx.stroke();
							y += space * (i - 1) + 10;
							break;
						}
					} else
						y += 10;
				} else
					y += 10;
			}
		}
		maxy = Math.max(maxy, y);
	}
	ctx.beginPath();
	ctx.rect(19, 10, 103, maxy);
	ctx.moveTo(49, 10);
	ctx.lineTo(49, 10 + maxy);
	ctx.moveTo(92, 10);
	ctx.lineTo(92, 10 + maxy);
	ctx.textAlign = "center";
	ctx.strokeText(part[1], 70, 20);
	ctx.strokeText(part[2], 70, maxy);
	ctx.stroke();
	setPin(fnt.PIDS, "center", 70, 20, part[1]);
	setPin(fnt.PIDS, "center", 70, maxy, part[2]);
	hModel.value = model.join("\r\n");
}

function main() {
	hModel = document.getElementById("Model");
	hDesigner = document.getElementById("Designer");
	hDesigner.addEventListener("keyup", draw);
	hDesign = document.getElementById("Design").getContext("2d");
	draw();
}
</script>
<style>
body {
	background-color:silver;
}
</style>
</head>
<body>
<textarea id=Designer rows=6 cols=100 onkeyup='draw()'>
PINS	7px Serif
PIDS	9px Serif
PART	I8257 DMA ВТ57
PINPUT	7HLDA..-.12CLK.-.6RDY.-.13RES..-19:16DRQ0:3'-.11_CS
PINOUT	10HRQ-4_MEMR 2_IOWR 1_IORD-32:35;37:40A0:7-30:26;23:21D0:7-8STB 9AEN-14_DAC2
</textarea><br />
<canvas id=Design width=300 height=400></canvas><br>
<textarea id=Model rows=6 cols=100></textarea>
<script>main();</script>
</body>

Alikberov 17.07.2022 21:57

Кaк получить доступ к исходному тексту стиля на странице, включая форматирование (табуляцию, комментарии и т.д.):
<style>
.myStyle
{
	background-color:red;	/* The Red background */
}</style>
Почему-то нету в структурах исходного (моего же) стиля, как я его вставил в документ (не внешний css-файл).:no:

Спасибо!:thanks:

рони 17.07.2022 22:17

Alikberov,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
        .myStyle {
            background-color: red;
            /* The Red background */
        }
    </style>
</head>

<body>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let elem = document.querySelector("style");
            alert(elem.textContent);
        })
    </script>
</body>

</html>


здесь создайте свою тему, тама есть кнопа , её уверенно жми.

Alikberov 25.07.2022 18:08

Цитата:

Сообщение от рони (Сообщение 546708)
Alikberov, создайте свою тему, тама есть кнопа

Фoрум и так перегружен разными темами с кратким ответом.

Спасибо за CSS-подсказку!:thanks:

Ещё один вопрос: А можно ли ускорить как-то собственные скрипты, сгенерированные на лету?
Разрабатываю оболочку с кучей getter/setter'ов и столкнулся с чудовищной просадкой производительности.
Надеялся, что если всё упаковать в «new Function», то браузер хоть какую-то оптимизацию произведёт…
Но, производительность ниже плинтуса!:haha:

P.S.: Стоит ли смотреть в сторону «asmjs», если используются сплошные BigInt'ы?

voraa 25.07.2022 22:12

Цитата:

Сообщение от Alikberov
Стоит ли смотреть в сторону «asmjs», если используются сплошные BigInt'ы?

Смотря, что делают Ваши скрипты. Если там только расчеты, без использования всяких браузерных API (например работа с DOM), то может быть и стоит. Правда не знаю, как быть с BigInt. Ведь все равно нужны какие то библиотеки для работы с ними. А как их подтащить в asmjs?
Цитата:

Сообщение от Alikberov
браузер хоть какую-то оптимизацию произведёт…

Браузерная оптимизация штука не простая. Браузер всегда генерит максимально оптимальный байт-код. Перевод байт-кода в ассемблерный код производится только для "горячих" функций. Горячая - частовызываемая. Часто - несколько тысяч раз. Вот такие функции, при выполнении ряда других условий, браузер может решить перекомпилить в ассемблерный код.


Часовой пояс GMT +3, время: 01:19.