MathJaxをデバッグしてJavaScriptの理解を深める ページ3
概要
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
ページ
- MathJaxをデバッグしてJavaScriptの理解を深める
- MathJaxをデバッグしてJavaScriptの理解を深める ページ2
- MathJaxをデバッグしてJavaScriptの理解を深める ページ4
関連情報