メガバイトのjavascriptコードでdrれないようにするには？ // Mail.Ru Technologies Forum 2011のレポート：レポートのテキスト、ビデオ、プレゼンテーション

Andrei Sumin（ _habraprofil ）による報告“ メガバイトのJSコードで _drれ ないようにするには？ " -Mail.Ru Technology Forum 2011の一連のトランスクリプトの次。 レポートを復号化するシステムの仕組みの詳細については、Mail.Ru Technology Forum：High-tech in event-managementの記事「Inside Out」を参照してください。 フォーラムWebサイト（ http://techforum.mail.ru ）だけでなく、他のレポートのトランスクリプトへのリンクもあります。

（モバイルデバイス用のビデオバージョンをダウンロードする -iOS / Android H.264 480？368、サイズ170 Mb、ビデオビットレート500 kbps、オーディオ-64 kbps）

（高解像度ビデオバージョンH.264 624？480、サイズ610 Mb、ビデオビットレート1500 kbps、オーディオ128 kbpsをダウンロードします）

（プレゼンテーションスライドのダウンロード 、4.7Mb）



この投稿では、ブラウザによって導入された最新の「チップ」について言及すらしていないことをすぐに言わなければなりません。 さらに、2007年に初めてこのトピックを取り上げました。 私と同僚が5年間にわたって多くのJSコードを使用してプロジェクトを成功裏に開発するのに役立ってきたコードを整理するいくつかの方法について説明します。



2002年頃に戻ってみましょう。 その後、サイトには小さなJSコードが含まれていました。 ほとんどの場合、JavaScriptはマウスホバーの背景を変更するなど、小さな「微調整」を行いました。 プロジェクトの構造はシンプルで透明でした。







2005年以来、私たちは急速な発展を遂げており、それでも「javascriptプログラマ」というタイトルの欠員がRuNetに登場しています。 プロジェクトも少し複雑になりました。







common.jsを選び出したのは、それがそれほど重要だからではなく、大きくて制御不能になったからです。 1人ではなくチームで作業した場合、全員がファイルの末尾に独自の何かを追加します。 もちろん、プロジェクトのサポートは複雑になりました。







その結果、混乱、巨大なファイル、そして最悪なことに、私の意見では-コードの再利用はありません。



具体的には、たとえばhtmlなど、文字列をエスケープするためのいくつかの関数がありました。他の誰もこれを実行できませんでした。 プロジェクトに来るか、他の人のプロジェクトを取得し、エスケープ機能を確認し、適用しようとすると、機能しません。 バグ、または脱出に必要なすべてではない、または脱出が多すぎる。 それはすべて、テストについて誰も本当に知らなかったという事実、私がこの関数を変更することを非常に恐れていたという事実で終わり、ちょうど近くに別のものを書いただけです。 しばらくして、覚えているところならどこでも、それを自分のものに変えたと思った。それは間違いなくより良く、より速く、バグがなく、古いものは削除できるようだ。 しかし、最後の瞬間に手が震えます。さて、私はそれを残します。 そして、このコードは次世代向けです。







次のステップは明白でした。人々は単純に1つの大きなファイルをいくつかの論理的な部分に分割し始めました。 そして、それが論理的であれば、それは良いことです。







率直に言ってみましょう-実際、これは問題を解決しませんでした。 サイズは、単一のファイルになる前にのみ残り、現在はフォルダーになっています。 接続の問題という新しい問題があります。 もちろん、複数のファイルにヒットする場合、ファイルの一部が必要なページでは、ファイルのこの部分のみを含めるようにします。 この問題は何らかの形で解決する必要がありました。 接続サポートの問題は、実際には次のようになったためです。すべてのスクリプトはすべてのページで接続されていました。



次のスライドは非常に重要であり、私のレポートの要点を反映しています。







その考え方は次のとおりです。 はい、JavaScriptがたくさんあります。それは何らかの形で壊れています。はい、いくつかのルールに従ってページ上でその一部を接続する必要があります。 すべてのロジックを実行した結果として得られたHTMLを、接続する必要があるものの構成にします。



説明します。 ある種の完成したブロックを含むdivタグがあります-これがフォルダーのリストであるとしましょう。つまり、この歌姫ではフォルダーのリストです。 最初のステップでは、クラスでマークします-このdivはコンポーネントです。 これは、jsエンジンがこの時点でそれを検索することを意味します。 2行目はonclickで、戻り値と何らかのハッシュを示しています。 このハッシュには、このコンポーネントの説明が含まれています。



その結果、DOMツリーでコンポーネントを見つける必要があります。 コンポーネントの種類を判別します（私の場合、タイプ情報はonclickにあります）。 jsファイルを接続して機能させます。



最初のタスクは、少なくとも最新のブラウザーでは非常に簡単に解決されます。 CSSセレクターは、ネイティブの場合とネイティブでない場合に適切に機能し、適切なライブラリを自由に使用できます。



ここで最も興味深い部分は、onclickで書かれたものです。 そこで、初期化する必要のある情報を縫うことができます。 私の場合、これはコンポーネントのタイプであり、ハッシュの内容によると、これはフォルダーを操作するためのコンポーネントであることを理解しています。 入手はとても簡単です。







したがって、コンポーネントの入力データを含むハッシュをすぐに取得します。







必要-これはまさに機能です-回路全体を機能させる心。 当然、実稼働ソリューションによってはさらに複雑になりますが、これによって考え方が変わることはありません。







このrequire requireは、いくつかのライブラリ、いくつかのコンポーネント、つまり機能を担当するjavaScriptファイルに記述されています。 javascriptファイルとそのヘルプは、作業にfile1とfile2が必要であることをカーネルに伝えます。 これは最初の引数によって渡され、2番目の引数によって、カーネルは両方をロードした後に実行される関数を呼び出します。



非常に重要なポイント。 関数は「ロード済み（ファイル）」と言います。 当然、このアイデアは長い間新しいものではありません。当然、私が説明したもの以外にも実装があります。 しかし、実装によっては1つの違いがあり、機能が一部のメタデータに従ってロードされることを理解しようとします。 スクリプトがonloadイベントなどをトリガーするとします。 私は基本的にこれをしませんでした：javascriptのコードは、ロードされたメソッドを呼び出すことにより、準備ができていることを確かに言うでしょう。 そして、何かがそこにロードされたからではなく、誰かが私がブートしたと思うからではありません。 はい、私は起動しました、私は間違いなく必要なものを手に入れました、私は間違いなく準備ができています。 次に私を必要とするチェーンを呼び出すと、これについて安全に言うことができ、何も恐れることはありません。







これは小さな束でどのように見えるかです。 フォルダには日付ライブラリが必要です。







日付ライブラリには、適切に出力するために文字列が必要です。たとえば、ある種のprintf実装は文字列内にあります。 そして、文字列は自給自足で、何も必要としません。 そしてrequireチェーンを取得します。 folder.jsで日付を要求します。日付がロードされると、フォルダー自体がカーネルに日付があることを通知する関数が呼び出されます。私は何も必要なく、準備ができています。 日付は文字列でも同じです。 そして、文字列は起動時に何も必要としません。最後に言う-それだけです、起動します、作業しましょう。



この例が機能するように、タスクの完全なセットを調べました。







まず、DOMツリーから、必要なすべてのコンポーネントを分離します。 2番目のステップは、それがどのようなコンポーネントであるかを判断することです。ハッシュには作業コンポーネントがあります。これは、文字のリストを操作するためのコンポーネントだとしましょう。 次はrequire関数で、getFileName（type）の最初の引数があります。 行によって、カーネルは、srcにスクリプトタグを登録するために、ファイルへの実際のパスを理解できます。 したがって、この場合、これはfolder.jsになります。 スクリプトフォルダーが読み込まれます。 それは私が日付が必要であることを要求し、日付は文字列が必要であると言うでしょう。 3つのスクリプトタグが生成され、ロードされた順序が逆になります。その結果、「window [type] .init（）」という関数が実行され、コンポーネントが初期化を開始します。



しかし、休むには早すぎます。別の問題が発生しました。 かなり孤立しているコンポーネントが大量にあり、そのような状況を想像してみてください。すべてがうまくいくようです。 マネージャーが開発者のところに来て、「カレンダーを作ってほしい」と言います。







開発者は、私は別個のdivを持ち、別個のファイルを持つと言います。 日付付きのテストでカバーされる文字列ライブラリ、テストでカバーされる日付があり、2日でカレンダーを作成します。 マネージャーを示し、彼は幸せであり、他のプロジェクトの同僚を示しています。 彼らは再びあなたのところに来ます。







同じカレンダーのように見えますが、この美しい、なめられたもののために異なる人々が望むインターフェースの数は少し気のめいるようです。







その後、これらのオプションがあります：非常に長い設計、抽象化、抽象化に対する抽象化を行うことができますが、3か月後、そしてあなたが素晴らしいプログラマーなら、6か月後に別のプログラマーがあなたの場所に来ると信じています。







私たちはすべて人間であり、すべてを考慮することは不可能であることを理解しています。したがって、プログラミングで非常に長い間使用されてきた新しいパターンはありません。 さらに、最初からブラウザで完全に使用されているJavaScriptの出現により、これらはイベントです。 カレンダーを作成し、システムを作成し、タッチ不可にし、イベントAPIを作成します。







それは非常に簡単に拡張でき、テストで非常に簡単にカバーされます。



今ではすべてが正確にすべてが正常であるように思われます。 htmlに設定があり、必要に応じて、htmlのコンポーネントのダウンロードがあります。 コンポーネントを相互に通信するためのインターフェースがあります。 しかし、もう1つの問題がありました。



今日知っていれば、明日はコンポーネントの初期化の順序が明確にわかりません。 この状況を想像してください：カレンダーが満たされました。 起動、起動、初期化が開始されました。 初期化後、11月7日に開催するイベントをスローしました。 彼はすでにこれをすべて行っていますが、その後、DOMに11月7日に書くことになっている小さなコンポーネントがあります。 彼はイベントに参加しますが、イベントはすでに発生しています。 彼はすでにいなくなっています。



ソリューションはサーバープログラミングセクションからのものであることが判明し、彼らは私に促しました。 それは長い間存在し、キューと呼ばれます。







ディスパッチメソッドにもう1つの引数を追加し、赤で強調表示しました。 これはキューのサイズです。 コールバックオブジェクトがあるので、初期化中のカレンダーはディスパッチします。 彼は、そのようなイベントのキューサイズは1、つまり 誰かが同様のイベントにサブスクライブし、まだ何も受け取っていない場合、先入れ先出しスタックでイベントを受け取ります。 キューの長さは、最後の引数で指定された桁のサイズとまったく同じになります。 それに応じて、彼はこれらすべてのイベントを受け取ります。



mail.ruについては、ここで1年ではなく4か月しか働いていませんでした。長いコートを着て、ここに住む方法をみんなに見せたいと思いました。 JavaScriptのソースを見た最初の日、mail.ruはほぼ同じことを書いていることに気付きました。 場所でも、手紙にも。







このテキストは、11月16日にInfospace Centerで開催されたMail.Ru Technology Forum 2011での Sumin Andreyによるレポートに基づいています。 ビデオレポートのテキストを作成する技術の詳細については、「 Mail.Ruテクノロジーフォーラムの裏側：ハイテクイベント管理」を参照してください。 他のレポートのビデオバージョン（モバイルデバイス用のバージョンを含む）は、フォーラムWebサイトtechforum.mail.ruで入手できます。 レポートのテキスト版は、ここおよびフォーラムのWebサイトで毎週、またはほとんど同じ頻度で発行されます。 テキストのタイプミスについてPMでお知らせください。