iframeをカプセル化するvueコンポーネントを開発する

iframeをカプセル化するvueコンポーネントを開発する

VUE の基本的な構成要素はコンポーネントであるべきだと私は思います。 VUE を使用してフロントエンド プロジェクトを開発するには、コンポーネントを 1 つずつ開発し、ビルディング ブロックのようにプロジェクトを構築します。コンポーネントはページ内、またはより大きなコンポーネント内に含まれます。ここでは、コンポーネントとページの境界が明確ではないようです。実際、シングルページ アプリケーションではページは 1 つだけです。

コンポーネントの利点は、第一に、再利用性を高めることができること、第二に、特定の機能をカプセル化して簡単に呼び出せること、第三に、責任が明確で、コンポーネントの凝集度が高く、コンポーネント間の結合度が低いため、システム機能の最適化、拡張、保守が容易になることです。メリットはたくさんあります。

開発コンポーネントには主に次の 2 つの部分が含まれます。
1. コンポーネントの内部ロジック
2. 外部インターフェース この 2 日間で作成したコンポーネントには <iframe> が含まれているため、作業内容には別の部分があります。
3. iframeインターフェース

1. コンポーネントの紹介

これはマッププラグインです。その機能は、マップを表示し、外部コマンドを受け入れ、レイヤーを読み込み、グラフィックスを描画し、その他の関連操作を行うことです。マップは ArcGIS for JS を使用して実装されています。過去に開発したプロジェクトにより、マップ操作の経験はありますが、フロントエンドとバックエンドの分離はなく、VUEやREACTは使用せず、従来のWEBページのみを使用しています。スケジュールが厳しく、以前の作業を再利用したいという希望があったため、<iframe> を使用してマップ ページをホストし、それを VUE コンポーネントにカプセル化し、コンポーネントを外部コマンドに接続して iframe 内のマップ ページと対話させることを検討しました。

2. コンポーネントの内部構造とロジック

1. コード組織構造

2. マップコンポーネント

マップ.vue

<テンプレート>
 <div class="マップコンテナ">
 	<!-- ホスティング マップ ページ -->
  <iframe :src="src" ref="iframe" @load="iframeLoad"></iframe>
 </div>
</テンプレート>

<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイル スコープ="スコープ">
 .map-container iframe{
  幅: 100%;
  高さ: 100%;
  境界線: なし;  
 }
</スタイル>

<スクリプト>
 import config from '../../vue.config' // パス情報が含まれています let iframeWin = null; // プライベート変数 export default {
  props:['size'], // 純粋なテスト、役に立たない、<Map id="map" ref="map" size="100"></Map> に対応
  データ() {
   戻る {
    src: '', //マップ ページのアドレス isLoaded: false, //マップ ページは読み込まれていますか? iMap: null, //マップ ページによって外部アクセス用に公開されるオブジェクト require: null //カスタム プラグインを参照するために使用される ArcGIS require 関数。私たちは過去にかなりの数のカスタムマッププラグインを作成しました}
  },
  作成された() {
   this.src = config.publicPath + 'map.html'
  },
  マウント() {
  	//iframe メッセージをリッスンします window.addEventListener('message', this.handleMessage)
   iframeWin = this.$refs.iframe.contentWindow
  },
  メソッド: {
   iframeLoad() {
    this.isLoaded = true;
    window.console.log("マップの準備ができました")
   },   
   async handleMessage(){//iframe からメッセージを受信 this.require = iframeWin.require;
    iframeWin のマップをコピーします。
   },
   loadLayer(ノード、サーバー){
    this.iMap.layerHandler.load(ノード、サーバー);
   },
   準備完了(){
    this.isLoaded を返します。
   }
  }
 }
</スクリプト>

コンポーネントの構造、例えば

エクスポートデフォルト{
 props:, // タグ内の属性 data() { // パブリック変数 },
 created(){//ロード時?
 },
 マウント(){//読み込みが完了したら},
 メソッド:{// パブリック メソッド}
}

エクスポートとは、外部で使用することを意味します。したがって、内部のプロパティ、変数、メソッドは外部からアクセスできます。プライベートにしたい場合は、エクスポートの外部で定義する必要があります。次の例のように:

このような簡単な紹介はインターネット上では見つかりません。 Vue の中国語サイトは古く、コンテンツが断片化されているため、初心者にとって非常に使いにくく、学習コストが増加します。

3. iframeインターフェース

コンポーネント Map.vue は内部の iframe とどのように通信するのでしょうか?
システム メッセージと iframe オブジェクトへの直接アクセスを介して。 iframe 内のオブジェクトに直接アクセスするには、ドメインを越えることができないという前提条件があります。

iframe によってホストされているマップ ページ map.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <ヘッド>
		...
 </head>
 <本文>
  <div id="マップ"></div>
		...
  </div>  

 </本文>
</html>
<script src="http://192.168.0.200/pubzy211/arcgis_js_api/3.19/init.js"></script>
<script type="text/javascript">
 var iMap = {}; //外部参照インターフェース require([
  "esri/config",
  「esri/マップ」、
  「esri/geometry/範囲」、
  "esri/空間参照",

  "レイヤーライブラリ/LtLayer",

  「道場/ドム」、
  「dojo/_base/配列」、
  「道場/パーサー」、
  「dojo/dom準備完了!」
 ]、 関数(
  esriConfig、
  地図、
  範囲、
  空間参照、

  レイヤー、
  ドム、
  配列ユーティリティ、
  パーサー
 ){
  //地図
  var map = ...

  /* 外部インターフェース */
  iマップ = {
   地図: 地図、
   伝説: 伝説、
   ホーム: ホーム、
   ヒントダイアログ: ヒントダイアログ、
   トグル: トグル、
   概要マップ: 概要マップ
  };
  iMap.drawHandler = ...
  iMap.layerHandler = ...;
  iMap.centerAt = ...;
  iMap.clear = ...;
  iMap.restoreView = ...;

  // 読み込み完了信号を親 Vue ページに送信する window.parent.postMessage({
   コマンド: 'mapIsReady',
   パラメータ: {
    成功: true、
    データ: 真
   }
  }, '*');
  /* 外部インターフェースの終了*/

 });
</スクリプト>

マップコンポーネントMap.vueはiframe部分に対応します。詳細については1.2のコードを参照してください。

エクスポートデフォルト{
		。 。 。
  マウント() {
	  //iframe メッセージをリッスンします window.addEventListener('message', this.handleMessage)
   //iframe のウィンドウ オブジェクトを取得します。iframeWin = this.$refs.iframe.contentWindow
  },
  メソッド: {
   iframeLoad() {
    this.isLoaded = true;
    window.console.log("マップの準備ができました")
   },   
   async handleMessage(){//iframe からメッセージを受信 this.require = iframeWin.require;
    iframeWin のマップをコピーします。
   },
   loadLayer(ノード、サーバー){
   	//レイヤーをロードします this.iMap.layerHandler.load(nodes,servers);
   }
  }
 }

4. 外部インターフェース

Map.vue は、それが含まれるコンポーネントまたはページと通信する必要があるコンポーネントです。

これで、Map.vue はコンテナ ページ Home.vue (つまりテスト ページ) に配置され、コマンド コンポーネント Layer.vue も含まれるようになりました。コマンド コンポーネントのボタンをクリックすると、マップがそれに応じて応答します。原則は次のとおりです。

コマンド コンポーネントのボタンをクリックすると、コンテナ ページに情報が送信され、コンテナ ページはマップ コンポーネントのメソッドを呼び出します。

テストページ Home.vue

<テンプレート>
 <div id="app1">
  <div id="マップコンテナ">
   <div>マップ コンポーネント</div>
   <マップ id="map" ref="map" size="100"></マップ>
  </div>
  <div id="レイヤーコンテナ">
   <div>その他のコンポーネント</div>
   <レイヤー @loadLayer="loadLayer" @loadCloud="loadCloud" @clear="clearMap"></レイヤー>
  </div>
 </div>
</テンプレート>

<スクリプト>
 '../components/Map.vue' から Map をインポートします。
 '../components/Layer.vue' からレイヤーをインポートします。

 エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
   地図、
   層
  },
  方法:{
   loadLayer(nodes,servers){//レイヤーをロードする let map = this.$refs.map;
    map.loadLayer(ノード、サーバー);
   },
   loadCloud(data){//衛星クラウドマップを読み込む let map = this.$refs.map;
    map.require(["drawlib/Cloud"], 関数 (Cloud) {
     iMap = map.iMap; とします。
     cloudId を 'cloud' とします。
     クラウド = new Cloud(iMap.map);
     クラウド ID をプッシュします。
     cloud.draw(データ、クラウドID);
    });
   },
   clearMap(){//クリア let map = this.$refs.map;
    マップをクリアします。
   }
  }
 }
</スクリプト>

<スタイル>
。 。 。
</スタイル>

コマンドコンポーネントLayer.vue

<テンプレート>
 <div class="レイヤーコンテナ">
  <button @click="loadLayer">レイヤーを読み込む</button>
  <button @click="loadCloud">衛星雲画像</button>
  <button @click="clear">クリア</button>
 </div>
</テンプレート>

<スクリプト>
 エクスポートデフォルト{
  メソッド: {
   ロードレイヤー() {
    ノード = ... とします。
    サーバーを = ... にします。
    this.$emit("loadLayer", ノード、サーバー)
   },
   ロードクラウド(){
    データ = ... とします。
    this.$emit("loadCloud", データ);
   },
   クリア(){
    this.$emit("クリア");
   }
  },
 }
</スクリプト>

<スタイル スコープ="スコープ">
。 。 。
</スタイル>

コマンド コンポーネントの発行メッセージで指定されたメソッドには、コンテナー ページ内に対応するプロパティがあることに注意してください。

コマンドコンポーネント loadCloud(){
 データ = ... とします。
 this.$emit("loadCloud", データ);
},

コンテナ ページ <Layer @loadLayer="loadLayer" @loadCloud="loadCloud" @clear="clearMap"></Layer>

5. 運用結果

VI. 結論

他のコンポーネントは、コンテナ ページを介してマップ コンポーネントと対話する必要があります。他のコンポーネントは、マップ コンポーネントと直接対話しません。これは実際にはコマンド モードです。利点は、他のコンポーネントとマップ コンポーネントが分離されており、結合されていないため、互いに影響を及ぼさないことです。これは、マップ コンポーネント自体の拡張と最適化に役立ちます。デメリットとしては、すべてのものをコンテナ ページ経由で転送する必要があること、コンテナ ページのコードが冗長になる可能性があること、一部の方法は単なるマウスピースであるため、繰り返しが多く意味がないという印象を与えることがあります。

以上がiframeをカプセル化するvueコンポーネントの開発内容です。iframeをカプセル化するvueコンポーネントの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください!

以下もご興味があるかもしれません:
  • Vue コンポーネントで iframe 要素を使用するためのサンプル コード
  • Vueはiframeを使用してHTMLページを参照し、vueおよびHTMLページメソッドの呼び出し操作を実装します。
  • Vue でネストされたページ (iframe) を実装する
  • Vue の iframe 内の div をドラッグしてサイズを変更するときにフリーズする問題を解決する
  • Vueとiframe間の情報インタラクションの実装
  • Vue で更新せずに iframe を維持する方法
  • iframe を使用して Web ページを埋め込む Vue サンプル コード
  • Vue に Iframe ページを統合する方法の例

<<:  シェルでパスワードなしでMySQLデータベースに素早くログインする方法

>>:  Linux CentOS6.5 yum インストール mysql5.6

推薦する

CSS で美しい時計アニメーション効果を実装するためのサンプルコード

仕事を探しています!!!事前準備:まず、このアニメーションは、以前のローディングアニメーションとクー...

MySQLのSQL文はインデックスを使用しません

インデックス集約を使用しない MySQL クエリご存知のとおり、インデックスを追加することはクエリ速...

CSS でハートを描く 3 つの方法

以下では、CSS を使用してハートの形を描く 3 つの方法を紹介します。実装プロセスは非常にシンプル...

docker compose idea CreateProcess error=2 システムは指定されたファイルを見つけることができません

Docker の作成Compose の紹介Compose は、マルチコンテナ Docker アプリケ...

MySQL のインデックスにおける NULL の影響についての詳細な説明

序文私は多くのブログを読み、弊社の DBA を含む多くの人々が、MySql では列に null が含...

クロスブラウザ開発体験のまとめ(I)HTMLタグ

ページにDOCTYPEを追加するブラウザによってタグやスタイルシートの解釈が異なるため、さまざまなブ...

CSSテキストシャドウの徐々にぼやける効果の実装

テキストシャドウテキストに影を追加します。テキストとテキスト装飾に複数のシャドウを追加することができ...

JavaScript で右クリック メニューを統合する layim のサンプル コード

目次1. 効果の実証2. 実装チュートリアル3. 最後に、完全なコードを添付します4. その他の右ク...

Linux の netstat コマンドの詳細な紹介

目次1. はじめに2. 出力情報の説明3. netstatの共通パラメータ4. netstatネット...

HTML テーブル マークアップ チュートリアル (5): ライト ボーダー カラー属性 BORDERCOLORLIGHT

表では、左上の境界線の色を個別に定義したり、セルの右下の境界線の色を定義したりできます。これら 2 ...

JavaScript クロージャの詳細

目次1. クロージャとは何ですか? 2. 閉鎖の役割序文: JavaScript部分ではクロージャが...

HTMLの基礎: HTMLの基本構造

HTML ハイパーテキスト ドキュメントの基本構造は、ドキュメント ヘッダーとドキュメント本体の 2...

Node.js でのブレークポイント再開の実装

序文通常のビジネスニーズ: 写真、Excel などをアップロードします。結局のところ、数 MB のサ...

JavaScript 操作要素の例

操作要素の詳細については、前回の記事を参照してください。JavaScript WebAPI、DOM、...

コピー&ペーストはパッケージングの敵です

OO、デザイン パターン、および多くのオブジェクト指向の原則について話す前に、まず 1 つのことを習...