3

BoilerplateJSが提供する統合とベストプラクティスに感銘を受けましたが、特に新しいRequireJSユーザーの場合、ドキュメントは間違いなく不足しています。

私たちは5人のチームであり、それぞれが異なるスキルセットを持っており、BoilerplateJSの魅力的なポイントの1つは、UIコンポーネントを分離する機能です。

サンプルのスキャフォールディングから、各コンポーネントを個別に単体テストする方法は明らかです。ただし、開発中にこれをどのように行うことができるかは不明です。

  1. 開発者Aは、コンポーネント構造とビューモデル（テスト済み）を作成し、それを開発者Bに渡します。
  2. 開発者Bは、コンポーネントのCSSと場合によってはアニメーションを開発します
  3. 開発者Aおよび/またはBは、コンポーネントをWebサイトの残りの部分に統合し、さらにテスト統合します

（2）をどのように達成することができますか？つまり、設計者と開発者が分離されたコンポーネントで作業できるようにします-コンポーネントをロードして開発/デバッグ/テストできるようにするための推奨される方法は何ですか？

4

1 に答える 1

1

CSSについて

UIコンポーネントには、構造（HTML）、プレゼンテーション（CSS）、動作（JS）の3つの部分があります。一般的な処理方法は、設計者がプレゼンテーションに取り組む構造とロジックに焦点を当てた開発者です。

これが、boilerplatejsのサンプルアプリケーションを開発した方法です。たとえば、メニュー、テーマ、ローカリゼーションのコンポーネントは、開発者が完成した時点で次のような単純な「順序付けられていないリスト」として開発されました（Chrome開発者ツールを使用してテーマのcssリンクを削除するだけで、同じように表示されます）。

ここに画像の説明を入力してください

次に、デザイナーは醜いUIを使用して、これらのリストを専門的な方法で配置およびレンダリングするテーマを作成しました（src / modules / baseModule / themeに格納されている2つのテーマを開発しました）。もちろん、開発者が醜いものを提供することは困難ですが、設計者が自分の仕事をする能力を信頼する必要があります。異なるチームメンバーが同じコンポーネントで同時に作業できるソース管理ツールを使用していると確信しています。

テーマを目立つ機能にしたい場合は、コンポーネント固有のCSSファイルを最小化することをお勧めします。そうしないと、コンポーネントのレイアウトとルックアンドフィールを完全に変更するさまざまなテーマを作成できない可能性があります。コンポーネントローカルcssがないことの欠点は、コンポーネントが「プレゼンテーション」なしでは実際には自己完結型ではないという事実です。私はまだこの質問に正しく答えるのに苦労しています、どんなアイデア/助けもありがたいです！以下のこれに関する私の関連する質問を参照してください：

コンポーネント固有のローカルスタイルシートとのグローバルCSSテーマの組み合わせ

とにかく、CSSをコンポーネントに追加する方法はいくつかあります。これらのさまざまな方法について説明しているこの質問をご覧ください。

BoilerplateJSプロジェクトへの外部CSSファイルの追加

次に、コンポーネントの埋め込みについて...

コンポーネントを他のWebページに埋め込む場合は、ボイラープレートのDOMControllerを使用できます。たとえば、「departments（src / modules / sampleModule1 / departments）」コンポーネントを他のWebサイトに埋め込む必要があるとします。モジュール（src / modules / sampleModule1 / module.js）に、既存のUrlController（UrlControllerはブラウザーのURLの変更に応答します）に加えて、DomControllerを追加する必要があります。

    //crate a dom controller that searchs within whole document body
    var domController = new Boiler.DomController($("body"));
    domController.addRoutes({
        //look for elements with id 'department_comp' and embed the department component
        '#department_comp' : new DepartmentComponent(context),
    });
    domController.start();

次に、Webページまたは外部サイトにDomControllerのdivまたはsection要素を配置して部門を埋め込みます。

<section id="department_comp"></section>

もちろん、あなたが世話をする必要がある2つのことがあります：

1）Webページにはboillerplatejsランタイムが含まれている必要があります。これは、すべてのサードパーティJSライブラリとテーマCSSファイルを静的にWebページに追加する必要があることを意味します。（私たちはこれを回避しています。v0.2-stableでは、単一のスクリプト宣言ですべてを実行できるブートストラッパーをリリースする予定です）

2）コンポーネントが別のドメインのJSONサービスを使用している場合は、JSONpまたはCORSのいずれかを使用してクロスドメインHTTPリクエストに対処する必要があります。ただし、RESTサービスが同じドメインでホストされている場合は、これについて心配する必要はありません。

于 2012-09-21T03:37:48.013 に答える