2013-08-08 5 views
5

今私は非常に巨大で複雑なwebappを開発しており、膨大な量のクライアントサイドのjsコードを処理しなければならず、私の人生を楽にするためにこのコードをデカップリングしようとしていますできるだけ早くあまり複雑なjavascriptモジュールをデカップリングする

私はNicholas Zakas(http://www.youtube.com/watch?v=vXjVFPosQHw)とAddy Osmani(http://addyosmani.com/largescalejavascript)がスケーラブルなjsアーキテクチャについて話し、自分のアイデアを自分の仕事に適用しようとしていました。

私は、複数の独立したモジュール間ですべての私のコードを分離し、仲介者のいくつかの並べ替えと、すべての相互通信を処理してきました。このアプローチは、ほとんどの場合に効果的でした。しかし、私はが十分でないと思う場合があります。です。

私が取り組んでいるモジュールの1つは、かなり複雑なリストに類似した構造を表しています。ここではいくつかの簡単な例:

very simplified example

は、いくつかのレンダリング・ロジックに加えて、ページのこの部分を担当するモジュールが処理する必要があります:

  • ページネーションと周りelemsとグループを移動
  • トグルグループ
  • dnd
  • カット/コピー/貼り付けの要素とグループ
  • さわやかcertaingグループ/ elems
  • は私が(例えば、編集および削除ロジックのために行われる可能性があり、すべての無関係なロジックを行っていた

最も近い将来、より多くのものか​​もしれelems内のいくつかのロジックイベントを介して別のモジュールに)、モジュールサイズはまだ大きく(1K行以上のコード)、私はそれをどのくらい減らすか分かりません。さらに、モジュール用のモジュールパターンを使用しているので、複数のファイル間でロジックを分離することがさらに難しくなります。

ここで、複雑なロジックをデカップリングする方法はありますか?は、1つのモジュール内にあります

UPDATE:

は、私が何かを明確にしたいです。私はモジュール(モジュールのパターンからモジュール)を複数のファイルに分割する方法をよく知っています私のコード

しかし、私は本当にを検索すると、単一のモジュール(NKZのプレゼンテーションから「モジュール」)内の懸念を分離するため新しい論理方法です。私はここで、さらにこのページhttp://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

を発見した補強パターンを使用することをお勧めします複数のファイルに単一のモジュールを分離するために

+0

あなたは少し曖昧ですが、一般的にプログラムのようなモジュールを扱うことができ、モジュールの壁内でサブモジュール、クラス、タイプ、および純粋な関数を作成して混乱を減らすことができます。自己内蔵型モジュールは、内部手順のリサイクルの減少のために、典型的には比較的高価である。例:jQueryプラグインと比較したスタンドアロンのリストソーター。モジュールは混乱よりも優れているので、正しい軌道に乗っています。スクリプトを次のレベルにするには、Dependency InjectionとControl Inversionの概念を習得する必要があります。 – dandavis

+0

このトピックに興味のある人は、Nicolas Zakas自身とBoxのチームが最近発表したJSフレームワークである[t3](http://t3js.org/)をチェックしたいと思うかもしれませんが、これはプレゼンテーションで概説された概念質問にリンクされています。 [これは](https://www.box.com/blog/introducing-t3-enabling-large-scale-javascript-applications/)で紹介したZakasのブログ記事です。 – Nobita

+0

こんにちは、これは少し遅れていますが、何とか役立つかもしれません。 https://pogsdotnet.blogspot.sg/2017/07/modular-javascript-architecture.html –

答えて

1

は、いくつかのより多くのリソースは、スケーラブルなJSアプリケーションを作成するには、次のとおりです。ここで

はのビデオですNicholas Zakas氏が「スケーラブルなJavaScriptアプリケーションアーキテクチャを作成する」のプレゼンテーションhttp://www.youtube.com/watch?v=7BGvy-S-Iag

もう一つの良いリソースhttp://addyosmani.com/largescalejavascript/

これらの概念は、あなたがシームレスに出入りモジュールを落とすことのできるアプリケーションを構築することができます知っています。プログラムが疎結合するため、他のモジュールに影響を与えずにモジュールを変更することができます。さらに、KnockoutJSをAngularに変更するなど、ベースライブラリを切り替えると、このフレームワークにより、コードを大幅に損なうことなく、簡単にベースライブラリをスワップできます。

また、モジュールとメディエータまたはサンドボックスを使用すると、コードをテストしやすくなります。テストは重要ではないアプリケーションで重要です。私はこれが助けて欲しい!

+0

Thanks @Spencer。最初はAugmentionパターンを認識していましたが、モジュールパターンの一部の機能を活用することができないため、Augmentionパターンを使用していたので、それを避けることをお勧めします。たとえば、私はいくつかのvarと関数に対して本当にプライベートスコープを持つことはできません。しかし、実際には、(モジュールパターンから)モジュールを複数のファイルに分割するためのより良いソリューションは考えられません。第二に、既にスケーラブルなjsアプリケーションを構築しているNicholas ZakasとAddy Osmaniのアプローチについて既に触れました。私はすでにそれを利用しています。 – panfil

+1

そして最後のもの。ノックアウトや角度は私の人生を楽にします。ちょっと。しかし、もう1つのクールなフレームワークは、1つの場所でロジックが集中するという問題を解決しません。 – panfil

+0

おっと!私が提供した2つの情報源を読んだと言った部分は逃しました!残念ながら、私は、拡張パターンを使用する以外に、モジュールを別々のファイルに分割するより良い方法を認識していません。 – Spencer

関連する問題