0

大規模な Java エンタープライズ アプリケーションで JavaScript ファイルを作成する際のガイドラインを教えてください。基本的に、ここで行うことは、JSP のフォルダー構造を複製することであり、そこにあるすべての JSP には対応する js ファイルがあります。以下に示すように：

war
|- js
    |- jquery.js
    |- jquery.ui.js
    |- datatables.js
    |- other-lib.js
    |- pages
        |- login.js
        |- dashboard.js
        |- userAdmin.js

Sitemeshを使用しているため、メイン デコレータ JSP では、すべてのライブラリが<script>タグにインポートされます。したがって、メイン デコレータ JSP では、次のように表示されます。

<head>
   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript" src="js/datatables.js"></script>
   <script type="text/javascript" src="js/xform.js"></script>
   <script type="text/javascript" src="js/generic.js"></script>
</head>

そして、私が言ったように、「js/pages」フォルダーの下の js ファイルは、特定の JSP ファイルにインポートされます。

今、私はJS パターンに関する Addy Osmani の記事を読み、公開モジュール パターンを使い始めました。それでも、私はちょっと迷っています。この RequireJS フレームワーク/ツールに出くわしました。しかし、Java アプリの js ファイルのオーバーホールを開始する方法がわかりません。

$(document).ready(function(){})module-pattern を使い始めたらどこに置くべきですか?

すべての JSP ページをモジュールにする必要がありますか? または、概念の使いやすさ/動作に応じて、動作に分解してモジュールを作成する必要がありますか?

他に何を質問すればよいかわかりません。考えることはたくさんあります。私は Java 開発者なので、通常はバックエンドのコーディングをしていますが、今は私のチームにフロントエンド エンジニアがいないので、学ばなければなりません。この新しいもの。JavaScript と jQuery に関する知識が限られているため、ご容赦ください。

4

2 に答える 2

1

各 JSP ページで複雑な JS 機能を開発することを検討している場合は、機能をモジュールおよび UI コンポーネントに構造化することに重点を置くことを検討してください。bokonic が正しく言ったように、AMD ライブラリはコードベースを適切に構成するのに役立ちます。

大規模な JavaScript アプリケーションを構築するためのリファレンス アーキテクチャを確認する必要がある場合は、BoilerplateJS ( http://boilerplatejs.org ) を参照してください。これはユーティリティ ライブラリではありませんが、複雑な JS プロジェクトの開始点として使用できるリファレンス アーキテクチャにいくつかの主要なユーティリティ ライブラリを統合したものです。

そのまま使いたくない場合でも、ホームページで話題になっている注意事項を見てみましょう。次のような大規模な JS プロジェクトに必要なアーキテクチャ アプローチのアイデアを得ることができます。

  • コード構造を整理する方法
  • 機能モジュールの階層を作成する方法
  • UI コンポーネントを自己完結型にする方法
  • ルーティング、ブックマーク、履歴処理の方法
  • JS スクリプトと依存関係を管理する方法
  • 展開のために最適化、難読化する方法
  • コンポーネントを単体テスト可能にする方法
  • スタイリング、ローカリゼーションの側面に対処する方法

私は BoilerplateJS の主な作成者であり、いくつかの複雑な JS プロジェクトを行った後の経験を共有するために作成しました。

于 2012-08-28T07:31:29.433 に答える
0

非同期モジュール (require.js などの AMD) を使用すると、相互に「インポート」(require) できる名前空間を明確に定義できるという点で、js を Java に少し似たものにすることができます。トップレベルのオブジェクトをインスタンス化するメインライン (メインの js) に相当するものがあります。

<script>JSP や PHP では、タグをページにエコーするだけで一連のスクリプトを HTML ドキュメントに追加することがよくあります。require.js では、そのアプリケーション用にカスタマイズされた JavaScript を生成する必要があります。つまり、main.js はおそらく異なるものになるか、スクリプトをインラインで作成する必要があります。

これにより、require.js は、大量の JavaScript があり、サーバー側でのテンプレートの前処理がほとんどない 1 ページの Web アプリに最適です。

js コミュニティの人々 (一貫性のあるものがある場合) は、コードをカプセル化する方法として公開モジュール パターンを好むようです。これは基本的に、javascript のスコープの混乱を回避する唯一の良い方法です。それに加えて、次のこともできます。

  • 一般的なコード (モーダル、サイト固有の検証、REST API 呼び出しなど) をモジュールに分解して、すべてのページに含めることができるようにし、ユーザーに長時間キャッシュするように依頼します。
  • 個々の機能をカバーする小さなモジュールを作成します。このようにして、必要に応じてそれらを交換したり、別のページに含めることができます。
  • gruntのような js ビルド ツールの使用を検討してください。これは、JavaScript を連結して縮小します。Dojoにも良いものがあります。

公開モジュール パターンでは、jQuery を必要とする IIFE (自己実行関数) がない限り、これについて心配する必要はありません。モジュール関数呼び出しを jQuery クロージャでラップするようにしてください。

$(function(){
     (function($){ $('body').append('<div />'); })(jQuery); // this needs the DOM & jQuery
});
(function(){
     my_module = my_module || {};
     my_module.nonjQueryFunc = function(){};
     my_module.myjQueryFunc = function(el){
         $(el).text("I need a ready DOM");
     };
});

別の .js ファイル:

$(function(){
    my_module.myjQueryFunc(); // this needs the DOM to be ready & jQuery to exist
});

my_module.nonjQueryFunc();
于 2012-08-28T05:54:08.467 に答える