MathJaxをデバッグしてJavaScriptの理解を深めるページ4 - 版の履歴

Yo-net: /* function f() */

2022-12-09T07:46:15Z

function f()

← 古い版		2022年12月9日 (金) 16:46時点における版
700行目:		700行目:
	return e + "<annotation" + this.getAttributes(t) + ">" + this.childNodeMml(t, "", "") + "</annotation>"		return e + "<annotation" + this.getAttributes(t) + ">" + this.childNodeMml(t, "", "") + "</annotation>"
	}},		}},
	{"TeXAtom" => function(t, e) { /* ~~注釈という意味~~ */		{"TeXAtom" => function(t, e) { /* TeXAtom ってAtomエディタで使えるってことかな。 */
	var r = this.childNodeMml(t, e + " ", "\\n");		var r = this.childNodeMml(t, e + " ", "\\n");
	return e + "<mrow" + this.getAttributes(t) + ">" + (r.match(/\\S/) ? "\\n" + r + e : "") + "</mrow>"		return e + "<mrow" + this.getAttributes(t) + ">" + (r.match(/\\S/) ? "\\n" + r + e : "") + "</mrow>"

Yo-net: /* function f() */

2022-12-08T15:30:53Z

function f()

← 古い版		2022年12月9日 (金) 00:30時点における版
697行目:		697行目:
	return o.join("\\n")		return o.join("\\n")
	}},		}},
	{"annotation" => function(t, e) {		{"annotation" => function(t, e) { /* annotation は注釈という意味 */
	return e + "<annotation" + this.getAttributes(t) + ">" + this.childNodeMml(t, "", "") + "</annotation>"		return e + "<annotation" + this.getAttributes(t) + ">" + this.childNodeMml(t, "", "") + "</annotation>"
	}},		}},
	{"TeXAtom" => function(t, e) {		{"TeXAtom" => function(t, e) { /* 注釈という意味 */
	var r = this.childNodeMml(t, e + " ", "\\n");		var r = this.childNodeMml(t, e + " ", "\\n");
	return e + "<mrow" + this.getAttributes(t) + ">" + (r.match(/\\S/) ? "\\n" + r + e : "") + "</mrow>"		return e + "<mrow" + this.getAttributes(t) + ">" + (r.match(/\\S/) ? "\\n" + r + e : "") + "</mrow>"

Yo-net: /* function f() */

2022-12-08T15:17:59Z

function f()

@@ 713行目: / 713行目: @@
 </syntaxhighlight>
 *inferredMrow
-:　t.childNodes は、[mi(a),mo(≠),mn(0)] のような配列で最初に呼ばれます。これはサンプルHTMLのインラインの数式$ a \ne 0 $ というのが対応していると思います。この配列がひとつづつ処理されて、l= mi(a) で e = '&nbsp;&nbsp;'は this.visitNode(l, e) = '&nbsp;&nbsp;<mi>a</mi>'
+:　t.childNodes は、[mi(a),mo(≠),mn(0)] のような配列で最初に呼ばれます。これはサンプルHTMLのインラインの数式$ a \ne 0 $ というのが対応していると思います。この配列がひとつづつ処理されて、l = mi(a) で e = '&nbsp;&nbsp;' は this.visitNode(l, e) = '&nbsp;&nbsp;<mi>a</mi>'という値でこれを o にスタックします。これはかなり具体的に mml(Math Markup Language) を構成している処理ですね。こういうのを解き明かしたかったというところが初めて登場しました。

Yo-net: /* function f() */

2022-12-08T13:16:10Z

function f()

← 古い版		2022年12月8日 (木) 22:16時点における版
713行目:		713行目:
	</syntaxhighlight>		</syntaxhighlight>
	*inferredMrow		*inferredMrow
	:　t.childNodes は、[mi(a),mo(≠),mn(0)] のような配列で最初に呼ばれます。これはサンプルHTMLのインラインの数式$ a \ne 0 $ というのが対応していると思います。この配列がひとつづつ処理されて、l= mi(a) で e = '&~~#x20~~;&~~#x20~~;'は this.visitNode(l, e) = '&~~#x20~~;&~~#x20~~;<mi>a</mi>'		:　t.childNodes は、[mi(a),mo(≠),mn(0)] のような配列で最初に呼ばれます。これはサンプルHTMLのインラインの数式$ a \ne 0 $ というのが対応していると思います。この配列がひとつづつ処理されて、l= mi(a) で e = '  'は this.visitNode(l, e) = '  <mi>a</mi>'

Yo-net: /* function f() */

2022-12-08T13:15:06Z

function f()

← 古い版		2022年12月8日 (木) 22:15時点における版
658行目:		658行目:

	===== function f() =====		===== function f() =====
			以下のような関数です。
			<syntaxhighlight lang="javascript">
			function f() {
			a = new e.MathJax._.core.MmlTree.SerializedMmlVisitor.SerializedMmlVisitor;
			l = e.MathJax._.mathjax.mathjax;
			t.input = v();
			t.output = _();
			t.adaptor = S();
			t.handler &&
			l.handlers.unregister(t.handler);
			t.handler = M();
			t.handler &&
			(
			l.handlers.register(t.handler),
			t.document = O()
			)
			}
			</syntaxhighlight>

	a は以下のような値が格納されるmapオブジェクトが関数を保持するような構造。		a は以下のような値が格納されるmapオブジェクトが関数を保持するような構造。
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	{		{
	size: 5,		size: 5,
			Map(5)
	{"inferredMrow" => function(t, e) {		{"inferredMrow" => function(t, e) {
	var r, n, o = [];		var r, n, o = [];
669行目:		689行目:
	o.push(this.visitNode(l, e))		o.push(this.visitNode(l, e))
	}		}
	} catch(t) {		}
	r = {		catch(t) { r = { error: t } }
	error: t		finally {
	}		try { a && !a.done && (n = s.return) && n.call(s) }
	} finally {		finally { if(r) throw r.error }
	try {
	a && !a.done && (n = s.return) && n.call(s)
	} finally {
	if(r) throw r.error
	}
	}		}
	return o.join("\\n")		return o.join("\\n")
	}},		}},
	~~annotation =>~~ {"annotation" => function(t, e) {		{"annotation" => function(t, e) {
	return e + "<annotation" + this.getAttributes(t) + ">" + this.childNodeMml(t, "", "") + "</annotation>"		return e + "<annotation" + this.getAttributes(t) + ">" + this.childNodeMml(t, "", "") + "</annotation>"
	}},		}},
	~~TeXAtom =>~~ {"TeXAtom" => function(t, e) {		{"TeXAtom" => function(t, e) {
	var r = this.childNodeMml(t, e + " ", "\\n");		var r = this.childNodeMml(t, e + " ", "\\n");
	return e + "<mrow" + this.getAttributes(t) + ">" + (r.match(/\\S/) ? "\\n" + r + e : "") + "</mrow>"		return e + "<mrow" + this.getAttributes(t) + ">" + (r.match(/\\S/) ? "\\n" + r + e : "") + "</mrow>"
	}},		}},
	~~text =>~~ {"text" => function(t, e) {		{"text" => function(t, e) {
	return this.quoteHTML(t.getText())		return this.quoteHTML(t.getText())
	}},		}},
	~~XML =>~~ {"XML" => function(t, e) {		{"XML" => function(t, e) {
	return e + t.getSerializedXML()		return e + t.getSerializedXML()
	}}		}}
	}		}
	</syntaxhighlight>		</syntaxhighlight>
			*inferredMrow
			:　t.childNodes は、[mi(a),mo(≠),mn(0)] のような配列で最初に呼ばれます。これはサンプルHTMLのインラインの数式$ a \ne 0 $ というのが対応していると思います。この配列がひとつづつ処理されて、l= mi(a) で e = ' 'は this.visitNode(l, e) = ' <mi>a</mi>'

Yo-net: /* function f() */

2022-12-08T11:57:43Z

function f()

← 古い版		2022年12月8日 (木) 20:57時点における版
658行目:		658行目:

	===== function f() =====		===== function f() =====
			a は以下のような値が格納されるmapオブジェクトが関数を保持するような構造。
			<syntaxhighlight lang="javascript">
			{
			size: 5,
			{"inferredMrow" => function(t, e) {
			var r, n, o = [];
			try {
			for(var s = i(t.childNodes), a = s.next(); !a.done; a = s.next()) {
			var l = a.value;
			o.push(this.visitNode(l, e))
			}
			} catch(t) {
			r = {
			error: t
			}
			} finally {
			try {
			a && !a.done && (n = s.return) && n.call(s)
			} finally {
			if(r) throw r.error
			}
			}
			return o.join("\\n")
			}},
			annotation => {"annotation" => function(t, e) {
			return e + "<annotation" + this.getAttributes(t) + ">" + this.childNodeMml(t, "", "") + "</annotation>"
			}},
			TeXAtom => {"TeXAtom" => function(t, e) {
			var r = this.childNodeMml(t, e + " ", "\\n");
			return e + "<mrow" + this.getAttributes(t) + ">" + (r.match(/\\S/) ? "\\n" + r + e : "") + "</mrow>"
			}},
			text => {"text" => function(t, e) {
			return this.quoteHTML(t.getText())
			}},
			XML => {"XML" => function(t, e) {
			return e + t.getSerializedXML()
			}}
			}
			</syntaxhighlight>

Yo-net: /* n = */

2022-12-08T10:03:21Z

n =

← 古い版		2022年12月8日 (木) 19:03時点における版
606行目:		606行目:
	},		},
	</syntaxhighlight>		</syntaxhighlight>
			呼ばれるときの引数は{"0": {}, "1": undefined,} こんな感じ。Object.assign は空の関数で n はfunction(t) の内容になります。でもこの関数も呼ばれることはないようです。

Yo-net: /* o = */

2022-12-08T09:50:35Z

o =

← 古い版		2022年12月8日 (木) 18:50時点における版
627行目:		627行目:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	t は['tex', 'mml'] のような配列です。これを r = ['tex', 'mml'] [Symbol.iteretor] のようにするとユーザ定義の反復可能項目という変数が作られ。console.log([...r]) とすると、すべての項目が順次呼び出される仕組みが構築されているため展開されます。[...r] は for … in … や for … of … という構文でも反復可能項目は展開されます。つまり前半は、受け取った配列引数を反復可能項目を作るための処理となります。t が文字列や配列の時は if(r) は成立して、 return ['tex', 'mml'] [Symbol.iteretor].call(['tex', 'mml'])のようなものを返却します。この値はネットには解説がないのですが、結果としては反復可能項目が返っているようです。反復可能項目の .call というのがよくわからない。この call では this に該当するものが配列そのものであるとしています。反復可能項目でありながら、配列そのものも保持しているという、特殊な反復可能項目を作っているのかな。わからん。知らんけど。ってやつだな。今年は知らんけど流行ったらしい。大阪では昔からありますけどね。t が数値の時は r = 数値[Symbol.iteretor]となって、r は未定義となります。しかし数値.lengthも未定義で数値型にはならない。どういうときに次の if が成立するんだろうな。ブレークポイント設定したけど、if(r)が成立しないパターンなかったな。全部の同じような仕組みのところが44か所もありますが、全てにブレークポイントを設定しても成立しないパターンはゼロ。だいぶコード削っても動くには動くらしい。エラー処理が多すぎて無駄が多いような気もする。まったく同じようなコードばっかり44か所。これだけ関数化しておきながらややこしいところは繰り返しまくり、簡単なとこは複雑関数化みたいなことをやってる気がする。		t は['tex', 'mml'] のような配列です。これを r = ['tex', 'mml'] [Symbol.iteretor] のようにするとユーザ定義の反復可能項目という変数が作られ。console.log([...r]) とすると、すべての項目が順次呼び出される仕組みが構築されているため展開されます。[...r] は for … in … や for … of … という構文でも反復可能項目は展開されます。つまり前半は、受け取った配列引数を反復可能項目を作るための処理となります。t が文字列や配列の時は if(r) は成立して、 return ['tex', 'mml'] [Symbol.iteretor].call(['tex', 'mml'])のようなものを返却します。この値はネットには解説がないのですが、結果としては反復可能項目が返っているようです。反復可能項目の .call というのがよくわからない。この call では this に該当するものが配列そのものであるとしています。反復可能項目でありながら、配列そのものも保持しているという、特殊な反復可能項目を作っているのかな。わからん。知らんけど。ってやつだな。今年は知らんけど流行ったらしい。大阪では昔からありますけどね。t が数値の時は r = 数値[Symbol.iteretor]となって、r は未定義となります。しかし数値.lengthも未定義で数値型にはならない。どういうときに次の if が成立するんだろうな。ブレークポイント設定したけど、if(r)が成立しないパターンなかったな。全部の同じような仕組みのところが44か所もありますが、全てにブレークポイントを設定しても成立しないパターンはゼロ。だいぶコード削っても動くには動くらしい。エラー処理が多すぎて無駄が多いような気もする。まったく同じようなコードばっかり44か所。これだけ関数化しておきながらややこしいところは繰り返しまくり、簡単なとこは複雑関数化みたいなことをやってる気がする。まぁな、成立しないパターンがあったら例外がスローされるからね。そりゃそうだ。って感じもする。

Yo-net: /* o = */

2022-12-08T09:48:43Z

o =

← 古い版		2022年12月8日 (木) 18:48時点における版
610行目:		610行目:

	===== o = =====		===== o = =====
			<syntaxhighlight lang="javascript">
			o = this && this.__values \|\| function(t) {
			var e = "function" == typeof Symbol && Symbol.iterator,
			r = e && t[e],
			n = 0;
			if(r) return r.call(t);
			if(t && "number" == typeof t.length) return {
			next: function() {
			return t && n >= t.length && (t = void 0), {
			value: t && t[n++],
			done: !t
			}
			}
			};
			throw new TypeError(e ? "Object is not iterable." : "Symbol.iterator is not defined.")
			}
			</syntaxhighlight>
			t は['tex', 'mml'] のような配列です。これを r = ['tex', 'mml'] [Symbol.iteretor] のようにするとユーザ定義の反復可能項目という変数が作られ。console.log([...r]) とすると、すべての項目が順次呼び出される仕組みが構築されているため展開されます。[...r] は for … in … や for … of … という構文でも反復可能項目は展開されます。つまり前半は、受け取った配列引数を反復可能項目を作るための処理となります。t が文字列や配列の時は if(r) は成立して、 return ['tex', 'mml'] [Symbol.iteretor].call(['tex', 'mml'])のようなものを返却します。この値はネットには解説がないのですが、結果としては反復可能項目が返っているようです。反復可能項目の .call というのがよくわからない。この call では this に該当するものが配列そのものであるとしています。反復可能項目でありながら、配列そのものも保持しているという、特殊な反復可能項目を作っているのかな。わからん。知らんけど。ってやつだな。今年は知らんけど流行ったらしい。大阪では昔からありますけどね。t が数値の時は r = 数値[Symbol.iteretor]となって、r は未定義となります。しかし数値.lengthも未定義で数値型にはならない。どういうときに次の if が成立するんだろうな。ブレークポイント設定したけど、if(r)が成立しないパターンなかったな。全部の同じような仕組みのところが44か所もありますが、全てにブレークポイントを設定しても成立しないパターンはゼロ。だいぶコード削っても動くには動くらしい。エラー処理が多すぎて無駄が多いような気もする。まったく同じようなコードばっかり44か所。これだけ関数化しておきながらややこしいところは繰り返しまくり、簡単なとこは複雑関数化みたいなことをやってる気がする。

Yo-net: /* n = */

2022-12-08T08:51:44Z

n =

← 古い版		2022年12月8日 (木) 17:51時点における版
596行目:		596行目:
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	var n = this && this.__assign \|\| function() {		var n = this && this.__assign \|\| function() {
	return n = Object.assign \|\| function(t) {		return n = Object.assign \|\| function(t) {
	for(var e, r = 1, n = arguments.length; r < n; r++)		for(var e, r = 1, n = arguments.length; r < n; r++)
	for(var o in e = arguments[r]) Object.prototype.hasOwnProperty.call(e, o) && (t[o] = e[o]);		for(var o in e = arguments[r])
	return t		Object.prototype.hasOwnProperty.call(e, o) &&
	}, n.apply(this, arguments)		(t[o] = e[o]);
	},		return t
			},
			n.apply(this, arguments)
			},
	</syntaxhighlight>		</syntaxhighlight>

MathJaxをデバッグしてJavaScriptの理解を深める ページ4 - 版の履歴

Yo-net: /* function f() */

Yo-net: /* function f() */

Yo-net: /* function f() */

Yo-net: /* function f() */

Yo-net: /* function f() */

Yo-net: /* function f() */

Yo-net: /* n = */

Yo-net: /* o = */

Yo-net: /* o = */

Yo-net: /* n = */

MathJaxをデバッグしてJavaScriptの理解を深めるページ4 - 版の履歴