MathJaxをデバッグしてJavaScriptの理解を深める ページ2

VScodeで簡易WebServerの元でデバッグに戻る。

概要

　MathJaxをデバッグしてJavaScriptの理解を深めるの続きです。

[1] [2] [3]

e.MathJax.config.startup.ready()

　

e.MathJax.config.startup.ready() { t.defaultReady d() }

　d()は以下のような関数です。

function d() {
  var e, r;
  t.input && t.output && m();
  var n = t.output ? t.output.name.toLowerCase() : "";
  try {
    for(var i = o(t.input), s = i.next(); !s.done; s = i.next()) {
      var a = s.value,
        l = a.name.toLowerCase();
      g(l, a), 
      b(l, a), 
      t.output && y(l, n, a)
    }
  } catch(t) {
    e = {
      error: t
    }
  } finally {
    try {
      s && !s.done && (r = i.return) && r.call(i)
    } finally {
      if(e) throw e.error
    }
  }
}

　n = 'chtml'(CHTML) で l = 'tex'(TeX) → 'mathml'(MathML)という値。a は input の値。 output 系の l を使った g や b という関数。 output、input両方の l n を使った y という関数を実行する。いずれも a の input 値 を引数にしている。

　g はこんな関数。

function g(r, n) {
  var o = e.MathJax._.core.MathItem.STATE;

  e.MathJax[r + "2mml"] = function(e, r) {
    return void 0 === r && (r = {}), 
           r.end = o.CONVERT, 
           r.format = n.name, /* TeX → MathML */
           h(t.document.convert(e, r))
  }, 
  e.MathJax[r + "2mmlPromise"] = function(e, r) {
    return void 0 === r && (r = {}), 
           r.end = o.CONVERT, 
           r.format = n.name, /* TeX → MathML */ 
           l.handleRetriesFor((function() {
             return h(t.document.convert(e, r))
           }))
  }
}

　で、e.MathJax._.core.MathItem.STATE は、以下のような値。 o に取り込まれます。第一引数 r は Input の 'tex'、第二引数 n は Input 系のオブジェクト n.name は 'TeX' のような値です。

{
  UNPROCESSED: 0,
  FINDMATH: 10,
  COMPILED: 20,
  CONVERT: 100,
  METRICS: 110,
  RERENDER: 125,
  TYPESET: 150,
  INSERTED: 200,
  LAST: 10000,
  CONTEXT_MENU: 170,
  ASSISTIVEMML: 153,
}

　e.MathJax['tex2mml'] と e.MathJax['tex2mmlPromise'] に 関数を格納するのがこの g 関数の役割のようです。o.CONVERT: 100 が r.end に格納される部分がありますが、どのように使われるのかは、この時点ではあまりわかりません。

　次に b が呼ばれます。以下のような関数。

b(t, r) {
  e.MathJax[t + "Reset"] = function() {
    for(var t = [], e = 0; e < arguments.length; e++) 
      t[e] = arguments[e];
    return r.reset.apply(r, s([], i(t), !1))
  }
}

　e.MathJax['texReset'] に関数を格納するのがこの b 関数の役割です。格納した関数がどのように使われるかは、やはりこの時点ではわかりません。 引数の t と 取り込んだ関数の t は別物です。呼び出した時の引数を順次格納していくのに使われているようです。Reset とつくくらいですから、きっと呼び出されたら初期の表示状態にもどるんでしょう。おそらく。

　や、でも、やっぱり関数名が1文字だったり変数名が1文字なのは、理解に苦しむ。何がしたいのか、まったく全貌が見えてこない。リセットする関数が b で変換する関数っぽいのが g とな。何も想像できない。これメンテナンスできる人いるの？ってぐらいすごい。でも更新されてたりするってことはわかってる人いるんだろうな。難しい。この世界にこのプログラムを読み解ける人がいるってことが信じられない。スーパープログラマ中のスーパーだな。この優秀な頭脳が世界にはいくつも存在していて、回ってるのか。恐るべし。

　続いて y です。以下のような関数です。r が tex、n が r が chtml

y(r, n, o) {
  var i = r + "2" + n; /* tex2chtml */
  e.MathJax[i] = function(e, r) { /* e.MathJax['tex2chtml'] */
    return void 0 === r && (r = {}), 
           r.format = o.name, /* TeX → MathML */
           t.document.convert(e, r)
  }, 
  e.MathJax[i + "Promise"] = function(e, r) { /* e.MathJax['tex2chtmlPromise'] */
    return void 0 === r && (r = {}), 
           r.format = o.name, /* TeX → MathML */
           l.handleRetriesFor((function() {
             return t.document.convert(e, r)
           }))
  }, 
  e.MathJax[n + "Stylesheet"] = function() { /* e.MathJax['tex2chtmlStylesheet'] */
    return t.output.styleSheet(t.document)
  }, 
  "getMetricsFor" in t.output && (e.MathJax.getMetricsFor = function(e, r) {
    return t.output.getMetricsFor(e, r)
  })
}

　基本的に関数を定義することが多い関数だったなぁ。何がしたいのかが全くつかめず、テンションダウン。うまいな。作ってる人。おいかけてる人に対してのメッセージを感じる。いなされてるな。サッカーのイメージだ。凄すぎて、ぜんぜんボールが取れない。

e.MathJax.config.startup.ready() { t.defaultReady.then }

　非同期処理の処理順序登録をする。この関数がおわったら、e.CONFIG.pageReady()関数を実行して、うまくいったら、t.promiseResolve()、失敗したら t.promiseReject(e) を実行する。

then((function() {
  return e.CONFIG.pageReady()
})).then((function() {
  return t.promiseResolve()
})).catch((function(e) {
  return t.promiseReject(e)
}))

　

　

　

　

　

　

　

ページ

• MathJaxをデバッグしてJavaScriptの理解を深める
• MathJaxをデバッグしてJavaScriptの理解を深める ページ3

　

関連情報

　MathJax

　

VScodeで簡易WebServerの元でデバッグに戻る。