「MathJaxをデバッグしてJavaScriptの理解を深めるページ3」の版間の差分

2022年12月2日 (金) 23:25時点における版

概要

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

__webpack_modules[265].call(r.exports, r, r.exports, webpack_require__)

265:
function(t, e, r) {
  var n, o = this && this.__extends || (n = function(t, e) {
    return n = Object.setPrototypeOf || {
      __proto__: []
    }
    instanceof Array && function(t, e) {
      t.__proto__ = e
    } || function(t, e) {
      for(var r in e) Object.prototype.hasOwnProperty.call(e, r) && (t[r] = e[r])
    }, n(t, e)
  }, 
  function(t, e) {
    if("function" != typeof e && null !== e) 
      throw new TypeError("Class extends value " + String(e) + " is not a constructor or null");

    function r() {
      this.constructor = t
    }
    n(t, e), t.prototype = null === e ? Object.create(e) : (r.prototype = e.prototype, new r)
  }),
  i = 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.")
  },
  s = this && this.__read || function(t, e) {
    var r = "function" == typeof Symbol && t[Symbol.iterator];
    if(!r) return t;
    var n, o, i = r.call(t),
      s = [];
    try {
      for(;
           (void 0 === e || e-- > 0) && !(n = i.next()).done;
         ) 
        s.push(n.value)
    } 
    catch(t) { o = { error: t } } 
    finally { 
      try { n && !n.done && (r = i.return) && r.call(i) } 
      finally { if(o) throw o.error }
    }
    return s
  },
  a = this && this.__spreadArray || function(t, e, r) {
    if(r || 2 === arguments.length)
      for(var n, o = 0, i = e.length; o < i; o++) 
        !n && o in e || (n || (n = Array.prototype.slice.call(e, 0, o)), n[o] = e[o]);
    return t.concat(n || Array.prototype.slice.call(e))
  };
  Object.defineProperty(e, "__esModule", {
    value: !0
  }), 
  e.Package = e.PackageError = void 0;
  var l = r(235),
    c = function(t) {
      function e(e, r) {
        var n = t.call(this, e) || this;
        return n.package = r, n
      }
      return o(e, t), e
    }(Error);
  e.PackageError = c;
  var u = function() {
    function t(e, r) {
      void 0 === r && (r = !1), 
      this.isLoaded = !1, 
      this.isLoading = !1, 
      this.hasFailed = !1, 
      this.dependents = [], 
      this.dependencies = [], 
      this.dependencyCount = 0, 
      this.provided = [], 
      this.name = e, 
      this.noLoad = r, 
      t.packages.set(e, this), 
      this.promise = this.makePromise(this.makeDependencies())
    }
    return Object.defineProperty(t.prototype, "canLoad", {
      get: function() {
        return 0 === this.dependencyCount && !this.noLoad && !this.isLoading && !this.hasFailed
      },
      enumerable: !1,
      configurable: !0
    }), 
    t.resolvePath = function(t, e) {
      void 0 === e && (e = !0);
      var r = {
        name: t,
        original: t,
        addExtension: e
      };
      return l.Loader.pathFilters.execute(r), r.name
    }, 
    t.loadAll = function() {
      var t, e;
      try {
        for(var r = i(this.packages.values()), n = r.next(); !n.done; n = r.next()) {
          var o = n.value;
          o.canLoad && o.load()
        }
      } 
      catch(e) { t = { error: e } } 
      finally {
        try { n && !n.done && (e = r.return) && e.call(r) } 
        finally { if(t) throw t.error }
      }
    }, 
    t.prototype.makeDependencies = function() {
      var e, r, n = [],
        o = t.packages,
        c = this.noLoad,
        u = this.name,
        p = [];
      l.CONFIG.dependencies.hasOwnProperty(u) ? 
        p.push.apply(p, a([], s(l.CONFIG.dependencies[u]), !1)) 
      : 
        "core" !== u && p.push("core");
      try {
        for(var h = i(p), f = h.next(); !f.done; f = h.next()) {
          var d = f.value,
            m = o.get(d) || new t(d, c);
          this.dependencies.indexOf(m) < 0 && 
          (
            m.addDependent(this, c), 
            this.dependencies.push(m), 
            m.isLoaded || (this.dependencyCount++, n.push(m.promise))
          )
        }
      } 
      catch(t) { e = { error: t } } 
      finally { 
        try { f && !f.done && (r = h.return) && r.call(h) } 
        finally { if(e) throw e.error }
      }
      return n
    }, 
    t.prototype.makePromise = function(t) {
      var e = this,
        r = new Promise((function(t, r) {
          e.resolve = t, e.reject = r
        })),
        n = l.CONFIG[this.name] || {};
      return n.ready && (r = r.then((function(t) {
        return n.ready(e.name)
      }))), t.length && (t.push(r), r = Promise.all(t).then((function(t) {
        return t.join(", ")
      }))), n.failed && r.catch((function(t) {
        return n.failed(new c(t, e.name))
      })), r
    }, 
    t.prototype.load = function() {
      if(!this.isLoaded && !this.isLoading && !this.noLoad) {
        this.isLoading = !0;
        var e = t.resolvePath(this.name);
        l.CONFIG.require ? this.loadCustom(e) : this.loadScript(e)
      }
    }, 
    t.prototype.loadCustom = function(t) {
      var e = this;
      try {
        var r = l.CONFIG.require(t);
        r instanceof Promise ? r.then((function() {
          return e.checkLoad()
        })).catch((function(r) {
          return e.failed("Can't load \"" + t + '"\n' + r.message.trim())
        })) : this.checkLoad()
      } catch(t) {
        this.failed(t.message)
      }
    }, 
    t.prototype.loadScript = function(t) {
      var e = this,
        r = document.createElement("script");
      r.src = t, r.charset = "UTF-8", r.onload = function(t) {
        return e.checkLoad()
      }, 
      r.onerror = function(r) {
        return e.failed("Can't load \"" + t + '"')
      }, 
      document.head.appendChild(r)
    }, 
    t.prototype.loaded = function() {
      var t, e, r, n;
      this.isLoaded = !0, this.isLoading = !1;
      try {
        for(var o = i(this.dependents), s = o.next(); !s.done; s = o.next()) {
          s.value.requirementSatisfied()
        }
      } 
      catch(e) { t = { error: e } } 
      finally {
        try { s && !s.done && (e = o.return) && e.call(o) } 
        finally { if(t) throw t.error }
      }
      try {
        for(var a = i(this.provided), l = a.next(); !l.done; l = a.next()) {
          l.value.loaded()
        }
      } 
      catch(t) { r = { error: t } } 
      finally {
        try { l && !l.done && (n = a.return) && n.call(a) } 
        finally { if(r) throw r.error }
      }
      this.resolve(this.name)
    }, 
    t.prototype.failed = function(t) {
      this.hasFailed = !0, this.isLoading = !1, this.reject(new c(t, this.name))
    }, 
    t.prototype.checkLoad = function() {
      var t = this;
      ((l.CONFIG[this.name] || {}).checkReady || function() {
        return Promise.resolve()
      })().
      then((function() {
        return t.loaded()
      })).
      catch((function(e) {
        return t.failed(e)
      }))
    }, 
    t.prototype.requirementSatisfied = function() {
      this.dependencyCount && (this.dependencyCount--, this.canLoad && this.load())
    }, 
    t.prototype.provides = function(e) {
      var r, n;
      void 0 === e && (e = []);
      try {
        for(var o = i(e), s = o.next(); !s.done; s = o.next()) {
          var a = s.value,
            c = t.packages.get(a);
          c || 
          (l.CONFIG.dependencies[a] || 
          (l.CONFIG.dependencies[a] = []), 
          l.CONFIG.dependencies[a].push(a), 
          (c = new t(a, !0)).isLoading = !0), 
          this.provided.push(c)
        }
      } 
      catch(t) { r = { error: t } } 
      finally {
        try { s && !s.done && (n = o.return) && n.call(o) } 
        finally { if(r) throw r.error }
      }
    }, 
    t.prototype.addDependent = function(t, e) {
      this.dependents.push(t), e || this.checkNoLoad()
    }, 
    t.prototype.checkNoLoad = function() {
      var t, e;
      if(this.noLoad) {
        this.noLoad = !1;
        try {
          for(var r = i(this.dependencies), n = r.next(); !n.done; n = r.next()) {
            n.value.checkNoLoad()
          }
        } 
        catch(e) { t = { error: e } } 
        finally {
          try { n && !n.done && (e = r.return) && e.call(r) } 
          finally { if(t) throw t.error }
        }
      }
    }, 
    t.packages = new Map, t
  }();
  e.Package = u
},

　長い関数だけど、関数を呼び出した時に実行されるのは、ほとんどが関数の定義だけされる感じ。でもどんな処理をする関数かは眺めてみる。定義されるのは n → i → s → a → Object.defineProperty → e.Package → var l → var c → e.PackageError →　var u (膨大な tのメンバ関数を定義する関数) → e.Package という順。それぞれどんな関数か見ていきます。前の項目で確認した部分も出てきます。265 自体は前の235番号関数定義の中で呼ばれるので、その関数で使われる部分もありました。__webpack_modules__[235].call の中で __webpack_modules__[265].callが呼ばれています。__webpack_require__(265)がその後よばれたときには、export{ 265:{}} というような既に実行したという形跡を残す処理をします。

n

　for文のところが先に呼ばれる。t と e は以下のような値です。まず e から

e =
{
  name: 'Error'
  stackTraceLimit: 10
}

t=
{
  name: 'e'
  function(e, r) {var n = t.call(this, e) || this;return n.package = r, n}
}

　この n の関数は return として 3個のfunction(t，e) の関数をもっています。{__proto__: []} が配列なら 1つめの関数t.__proto__に eを格納して、2つめの関数で e の要素をひとつづつ取り出して、r に格納しながら hasOwnProperty.call(e, r) を実行します。そして呼び出された引数の t[r] に e[r] を格納します。そうやって再帰的に n の関数を実行します。3つめの関数で e の形式が function でもなく null でもないなら例外を発生させて、Error のときに実行される catch引数に if("function" != typeof e && null !== e) throw new TypeError("Class extends value " + String(e) + " is not a constructor or null"); を渡して実行します。3つ目の関数の最後に関数 r を t を返すようなthis.constructor を設定してます。また再帰的に n を処理しようとするカンマ構文があって、最後に e が null なら Object を新規に生成し、違えば rを返す関数のメンバ関数の r.prototype に e.prototype の内容を格納する。

i

　i は Itratorを作成する関数です。

s

　s に渡される t は ['input/tex-base'] → ['input/tex-base', '[tex]/ams'] → ['input/tex-base', '[tex]/newcommand'] → ['input/tex-base', '[tex]/noundefined'] → ['input/tex-base', '[tex]/require'] → ['input/tex-base', '[tex]/require', '[tex]/autoload'] → ['input/tex-base', '[tex]/newcommand', '[tex]/configmacros'] → ['input/tex-base', '[tex]/newcommand']のような配列です。e は undefined とかです。

　s に t の値をプッシュするような関数です。265関数内のt.prototype.makeDependenciesという部分で処理されます。

a

　a に渡される引数 t, e, r は t が []、 e は ['input/tex-base'] → ['input/tex-base', '[tex]/ams'] → ['input/tex-base', '[tex]/newcommand'] → ['input/tex-base', '[tex]/noundefined'] → ['input/tex-base', '[tex]/require'] → ['input/tex-base', '[tex]/require', '[tex]/autoload'] → ['input/tex-base', '[tex]/newcommand', '[tex]/configmacros'] → ['input/tex-base', '[tex]/newcommand']、r は flase のような値です。e の値を t にコピーして結合していくような関数です。

Object.defineProperty

　実行すると e の __esModule が true になります。{PackageError: undefined, Package: undefined, __esModule: true}

e.Package

　e.Package は undefined になる。　

var l

　l は、以下のような値になります。

{
 Package: undefined,
 PackageError: undefined,
 PathFilters: undefined,
 Loader: undefined,
 MathJax: undefined,
 CONFIG: undefined,
}

var c

　は、今のサンプルだと呼ばれないね。　

e.PackageError

var u

　u の中で呼ばれる関数はいかのようなモノ。

function t(e, r) {
  void 0 === r && (r = !1), 
  this.isLoaded = !1, 
  this.isLoading = !1, 
  this.hasFailed = !1, 
  this.dependents = [], 
  this.dependencies = [], 
  this.dependencyCount = 0, 
  this.provided = [], 
  this.name = e, 
  this.noLoad = r, 
  t.packages.set(e, this), 
  this.promise = this.makePromise(this.makeDependencies())
}

　で、このときの e は 'loader' です。r は、true です。

this.makeDependencies は、この u の中で定義される関数で以下のようなモノです。

l.CONFIG.dependencies.hasOwnProperty(u) ? 
  p.push.apply(p, a([], s(l.CONFIG.dependencies[u]), !1)) 
:
  "core" !== u && p.push("core");
  try {
    for(var h = i(p), f = h.next(); !f.done; f = h.next()) {
      var d = f.value,
        m = o.get(d) || new t(d, c);
      this.dependencies.indexOf(m) < 0 && 
      (
        m.addDependent(this, c), 
        this.dependencies.push(m), 
        m.isLoaded || 
        (this.dependencyCount++, n.push(m.promise))
      )
    }
  } catch(t) {
    e = {
      error: t
    }
  } finally {
    try {
      f && !f.done && (r = h.return) && r.call(h)
    } finally {
      if(e) throw e.error
    }
  }
  return n
}

　この u という引数には 'core' → 'startup' とかという値が入ります。core のときは、判定式が false なので push 処理はされず、p が空ならば何も処理されません。startupのときは p が ['core'] になります。繰り返しの処理の個別の値で d が 'core' になって、

　t.packages.set(e, this); → o = t.packages → o.get(d = 'core') で c = this.noLoad = true; m = o.get(d) || new t(d, c); t.package.get('core') があれば、 m = new t('core', true) を実行します。 Promiseのcoreの登録がされる感じでしょうか。

　t.prototype.makeDependencies を this とし、 Dependents値にPromiseの状態に関する値を構築しています。Promiseに登録した個数も管理しています。

return

Object.defineProperty

Object.defineProperty(t.prototype, "canLoad", {
  get: function() {
    return 
    0 === this.dependencyCount && 
    !this.noLoad && 
    !this.isLoading && 
    !this.hasFailed
  },
  enumerable: !1,
  configurable: !0
})

　DefineProperty は 3つの引数をとります。１．操作するオブジェクト名 t.prototype、２．プロパティ値 canLoad ３．データ記述子 enumerable configurable やアクセサー記述子 get です。get には関数が定義されています。this.dependencyCount が 0 なら !this.noLoad 値の true を、それも flase なら、次を返す。といった関数です。

t.resolvePath

t.resolvePath = function(t, e) {
  void 0 === e && (e = !0);
  var r = {
    name: t,
    original: t,
    addExtension: e
  };
  return l.Loader.pathFilters.execute(r), r.name
},

　実行されるときの t は 'core' のような値。e は undefined のような値になっています。eが undefined のとき e = !0 で trueとなり r = {neme: 'core', original: 'core', addExtension: true} で、これを引数として l.Loader.pathFilters.executeを呼び出します。返却値は r.name なので 'core' です。　

t.loadAll

t.prototype.makeDependencies

t.prototype.makePromise

t.prototype.load

t.prototype.loadCustom

t.prototype.loadScript

t.prototype.loaded

t.prototype.failed

t.prototype.requirementSatisfied

t.prototype.addDependent

t.prototype.checkNoLoad

ページ

2022年12月2日 (金) 23:15時点における版 (ソースを閲覧) Yo-net (トーク \| 投稿記録) (→‎t.resolvePath) ← 古い編集		2022年12月2日 (金) 23:25時点における版 (ソースを閲覧) Yo-net (トーク \| 投稿記録) (→‎t.resolvePath) 新しい編集 →
454行目:		454行目:
	</syntaxhighlight>		</syntaxhighlight>


			実行されるときの t は 'core' のような値。e は undefined のような値になっています。eが undefined のとき e = !0 で trueとなり r = {neme: 'core', original: 'core', addExtension: true} で、これを引数として l.Loader.pathFilters.executeを呼び出します。返却値は r.name なので 'core' です。

「MathJaxをデバッグしてJavaScriptの理解を深めるページ3」の版間の差分

2022年12月2日 (金) 23:25時点における版

目次

概要

__webpack_modules[265].call(r.exports, r, r.exports, webpack_require__)

n

i

s

a

Object.defineProperty

e.Package

var l

var c

e.PackageError

var u

return

Object.defineProperty

t.resolvePath

t.loadAll

t.prototype.makeDependencies

t.prototype.makePromise

t.prototype.load

t.prototype.loadCustom

t.prototype.loadScript

t.prototype.loaded

t.prototype.failed

t.prototype.requirementSatisfied

t.prototype.addDependent

t.prototype.checkNoLoad

ページ

関連情報

2022年12月2日 (金) 23:25時点における版

概要

__webpack_modules__[265].call(r.exports, r, r.exports, __webpack_require__)

n

i

s

a

Object.defineProperty

e.Package

var l

var c

e.PackageError

var u

return

Object.defineProperty

t.resolvePath

t.loadAll

t.prototype.makeDependencies

t.prototype.makePromise

t.prototype.load

t.prototype.loadCustom

t.prototype.loadScript

t.prototype.loaded

t.prototype.failed

t.prototype.requirementSatisfied

t.prototype.addDependent

t.prototype.checkNoLoad

ページ

関連情報

__webpack_modules[265].call(r.exports, r, r.exports, webpack_require__)