実際には、このようなスクリプトを書くのはかなり簡単で楽しい作業です。
私は架空のスクリプトで起動したい：
は、ここでは、このようなものの中に、通常の機能を有効にする方法長い一例です。このように呼ばれると
window.loadScript = function(src){
const scriptTag = document.createElement('script');
scriptTag.async = true;
scriptTag.src = src;
const anyOtherScriptTag = document.getElementsByTagName('script')[0];
anyOtherScriptTag.parentNode.insertBefore(scriptTag, anyOtherScriptTag);
}
：私は、非同期のJavaScriptファイルをロードscriptLoaderを含めましたloadScript("/url.js")それはDOMとブラウザに（最初のスクリプトタグの前に）新しいスクリプトタグを挿入するスクリプトをダウンロードします。
これまでのところとても良いです。このスクリプト引数がロードされる前に引数を渡したいとしましょう。読み込まれるスクリプトの中で、私は一意のグローバルオブジェクトにアクセスします。それをwindow.myScriptArgsとしましょう。理想的には、スクリプトが読み込まれるとwindow.myScriptArgsが読み込まれ、それに応じて実行されます。
今私はwindow.myScriptArgs = []を行い、一日それを呼び出すだけ単一スクリプトファイルをロードします私の仮説的な例以来、私もloadScript関数にロジックを追加することができます。
window.loadScript = function(src){
window.myScriptArgs = window.myScriptArgs || [];
const scriptTag = document.createElement('script');
scriptTag.async = true;
scriptTag.src = src;
const anyOtherScriptTag = document.getElementsByTagName('script')[0];
anyOtherScriptTag.parentNode.insertBefore(scriptTag, anyOtherScriptTag);
}
loadScript("/my-script.js");
わかりましたので、私はmyScriptArgsが既に存在しているかどうかをチェックし、そうでない場合、私は空の配列に設定します。 my-script.jsはグローバルなmyScript（）メソッドを公開しています。だから私はそれのためのスタブを書く。
window.myScript =() => {
window.myScriptArgs = window.myScriptArgs || [];
window.myScriptArgs.push(arguments);
}
今私はloadScriptを呼び出すと、すぐに指定された引数でのMyScriptを（）を呼び出すことができます：このスタブは、すべての引数がmyScriptArgs配列にそれを受け入れます。ローディングの問題やその他のことについて心配する必要はありません。 「my-script.js」が読み込まれると、window.myScriptArgsとなり、例外として動作します。コードは次のようになります。
window.myScript =() => {
window.myScriptArgs = window.myScriptArgs || [];
window.myScriptArgs.push(arguments);
}
window.loadScript = function(src){
window.myScriptArgs = window.myScriptArgs || [];
const scriptTag = document.createElement('script');
scriptTag.async = true;
scriptTag.src = src;
const anyOtherScriptTag = document.getElementsByTagName('script')[0];
anyOtherScriptTag.parentNode.insertBefore(scriptTag, anyOtherScriptTag);
}
loadScript("/my-script.js");
myScript('command', 'args', 'args1');
myScript('command2', 'args3', 'args4');
これは正常に動作します。それを最適化しましょう。最初に私はinitMyScript（）という単一の関数にloadScriptとmyScriptスタブを組み合わせる：
window.initMyScript = function(src){
window.myScriptArgs = window.myScriptArgs || [];
window.myScript = window.myScript || function(){
window.myScriptArgs.push(arguments);
}
const scriptTag = document.createElement('script');
scriptTag.async = true;
scriptTag.src = src;
const anyOtherScriptTag = document.getElementsByTagName('script')[0];
anyOtherScriptTag.parentNode.insertBefore(scriptTag, anyOtherScriptTag);
}
initMyScript("/my-script.js");
myScript('command', 'args', 'args1');
myScript('command2', 'args3', 'args4');
それは何があまりにも空想気圧ません。今度はwindowを引数としてinitMyScriptに渡して、複数のwindow.コールを取り除くつもりです。私はdocumentでこれをやります。
window.initMyScript = function(p, a, src){
p.myScriptArgs = p.myScriptArgs || [];
p.myScript = p.myScript || function(){
p.myScriptArgs.push(arguments);
}
const scriptTag = a.createElement('script');
scriptTag.async = true;
scriptTag.src = src;
const anyOtherScriptTag = a.getElementsByTagName('script')[0];
anyOtherScriptTag.parentNode.insertBefore(scriptTag, anyOtherScriptTag);
}
initMyScript(window, document, "/my-script.js");
今、私はいくつかのより多くのビットを保存するために自分自身を繰り返してどこを見てみましょう：
スクリプトは次のようになります。私は、二回myScriptに同じ文字列をscriptを使用します。私の旅で
window.initMyScript = function(p, a, s, c, src){
p.myScriptArgs = p.myScriptArgs || [];
p[c] = p[c] || function(){
p.myScriptArgs.push(arguments);
}
const scriptTag = a.createElement(s);
scriptTag.async = true;
scriptTag.src = src;
const anyOtherScriptTag = a.getElementsByTagName(s)[0];
anyOtherScriptTag.parentNode.insertBefore(scriptTag, anyOtherScriptTag);
}
initMyScript(window, document, 'script', 'myScript', "/my-script.js");
次のステップでは、変数を短くすることです。
(function(p, a, s, c, src){
p.myScriptArgs = p.myScriptArgs || [];
p[c] = p[c] || function(){
p.myScriptArgs.push(arguments);
}
const q = a.createElement(s);
q.async = true;
q.src = src;
const d = a.getElementsByTagName(s)[0];
d.parentNode.insertBefore(q, d);
})(window, document, 'script', 'myScript', "/my-script.js");
と私の最後の謎に：私もwindow.initMyScript定義を保存するために、自己実行機能には、この機能をオンに私は人々を混乱させ、また、さらに多くのコードを縮小化するために、関数のパラメータを編集します。実際にjavascriptの関数をコンマで連結することができます;）。
(function(p, a, s, c, A, l, i){
p["myScriptArgs"]=p["myScriptArgs"]||[],p[c] = p[c]||function(){
p["myScriptArgs"].push(arguments)},
l = a.createElement(s);l.async = true;l[A] = A;
i = a.getElementsByTagName(s)[0];
i.parentNode.insertBefore(l, i);
})(window, document, 'script', 'myScript', "/my-script.js");
myScript("arg1", "arg2");
myScript("arg2", "arg3");
私はcreateElementによって返された要素を保存する必要があるとvarステートメントを使用したくないので、それはだ、私は関数の中で2つの追加のパラメータを追加することに注意してください。）。
あなたはこれをさらに進めることができますが、その点は分かります。小さな関数については、問題なく自分で行うことができます。 ...
さらに、あなたはUglifyJSのようなminifierを使用することができますし、その全体isogramの事に実際にあるならば、その後の変数を自分の名前を変更
注：私はこのコードのいずれかをテストするものではありませんでした。ここは龍です。 想像上のコードは、Googleの難読化しにくい例の私の悪い試みです。 google-analyticsスニペットは私のカスタムスニペットとほぼ同じです。 GAはもう少し最適化します（例：1になる）が、ポイントを獲得します。
私の例で使用されるものについて詳しく読む：5を取る関数に3つの引数を渡すよう Immediately Invoked Function Expression Property accessors (especially Bracket notation)
とJavaScript特定の事柄。彼らは上で私たちに多くの事についての完全なドキュメントを与えるため
私は分かりませんが、それは非常に小さなスクリプトなので、必要な関数パラメータ名を使用して手作業で簡単に行うことができます。 –
...興味深いのは、 'ga'スクリプトが大文字のリテラルで' {[GoogleAnalyticsObject '] '、大文字小文字のコンパイラを含む）通常はドット構文に変換するブラケット記法を使用していることです。おそらく手で行われます。ブラケットはCCで実行される場合にのみ使用されるため、 'window.b =" ga "'に変換しません。 –
@squintありがとう！ええ、それは手で行われているように思える、私は何かが欠けているのではないかと思っていた – lmenus