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の他の関連記事にも注目してください！

以下もご興味があるかもしれません: