開(kāi)發(fā)一個(gè)封裝iframe的vue組件
VUE的基本組成單元，我看應(yīng)該是組件。用VUE開(kāi)發(fā)前端項(xiàng)目，就是開(kāi)發(fā)一個(gè)個(gè)組件，然后搭積木一樣，將項(xiàng)目搭建出來(lái)。組件包含在頁(yè)面，或者是更大的組件里面。在這里，組件與頁(yè)面的界限，好像并不明顯。事實(shí)上，對(duì)于單頁(yè)應(yīng)用，只有一個(gè)頁(yè)面。
組件的好處，一是可以加強(qiáng)復(fù)用；二是能夠?qū)⑻囟üδ芊庋b，利于調(diào)用；三是由于職責(zé)分明，組件高內(nèi)聚，組件間低耦合，利于系統(tǒng)功能的優(yōu)化、擴(kuò)展和維護(hù)。好處多多。
開(kāi)發(fā)組件，主要有2部分內(nèi)容：
1、組件內(nèi)部邏輯
2、外部接口
由于我這兩天弄的組件，里面包含有一個(gè)<iframe>，那么還有一部分工作內(nèi)容：
3、iframe接口
一、組件介紹
這是一個(gè)地圖插件。功能是展示地圖，以及接受外部命令，加載圖層、繪制圖形等相關(guān)操作。地圖采用arcgis for js實(shí)現(xiàn)。由于我們過(guò)去開(kāi)發(fā)的項(xiàng)目，地圖操作有一些積累，不過(guò)并沒(méi)有前后端分離，沒(méi)有采用VUE或REACT，還是傳統(tǒng)的WEB頁(yè)面。因?yàn)闀r(shí)間緊，也想直接復(fù)用以前的成果，于是考慮用<iframe>承載地圖頁(yè)面，封裝在VUE組件里，由組件對(duì)接外部命令并與iframe里的地圖頁(yè)面交互。
二、組件內(nèi)部結(jié)構(gòu)及邏輯
1、代碼組織結(jié)構(gòu)
2、地圖組件
Map.vue
<template>
<div class="map-container">
<!-- 承載地圖頁(yè)面 -->
<iframe :src="src" ref="iframe" @load="iframeLoad"></iframe>
</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped="scoped">
.map-container iframe{
width: 100%;
height: 100%;
border: none;
}
</style>
<script>
import config from '../../vue.config'//里面有路徑信息
let iframeWin = null;//私有變量
export default {
props:['size'],//純測(cè)試，沒(méi)啥用，對(duì)應(yīng)<Map id="map" ref="map" size="100"></Map>
data() {
return {
src: '',//地圖頁(yè)面地址
isLoaded: false,//地圖頁(yè)面是否加載完畢
iMap: null,//地圖頁(yè)面暴露出來(lái)的，供外部訪問(wèn)的對(duì)象
require: null//arcgis的require函數(shù)，用于引用自定義插件。我們過(guò)去寫(xiě)了不少自定義的地圖插件
}
},
created() {
this.src = config.publicPath + 'map.html'
},
mounted() {
//監(jiān)聽(tīng)iframe的消息
window.addEventListener('message', this.handleMessage)
iframeWin = this.$refs.iframe.contentWindow
},
methods: {
iframeLoad() {
this.isLoaded = true;
window.console.log("map is ready")
},
async handleMessage() {//接收來(lái)自iframe的消息
this.require = iframeWin.require;
this.iMap = iframeWin.iMap;
},
loadLayer(nodes,servers){
this.iMap.layerHandler.load(nodes,servers);
},
isReady(){
return this.isLoaded;
}
}
}
</script>
有關(guān)組件的結(jié)構(gòu)，比如
export default {
props:,//標(biāo)記里的屬性
data() {//公共變量
},
created() {//加載時(shí)？
},
mounted() {//加載完畢時(shí)
},
methods: {//公共方法
}
}
export代表了這是對(duì)外。所以里面的屬性、變量、方法，都可以被外部訪問(wèn)。如果想私有，應(yīng)該在export之外定義。如本例：
像這類簡(jiǎn)單的介紹，在網(wǎng)上怎么也搜不到。vue的中文站點(diǎn)，陳舊，內(nèi)容支離破碎，對(duì)初學(xué)者極不友好，加重了學(xué)習(xí)的成本。
三、iframe接口
組件Map.vue與里面的iframe是怎么通信的呢？
通過(guò)系統(tǒng)消息和直接訪問(wèn)iframe的對(duì)象。直接訪問(wèn)iframe里的對(duì)象有個(gè)前提，就是不能跨域。
iframe承載的地圖頁(yè)面map.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
...
</head>
<body>
<div id="map"></div>
...
</div>
</body>
</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/map",
"esri/geometry/Extent",
"esri/SpatialReference",
"layerlib/LtLayer",
"dojo/dom",
"dojo/_base/array",
"dojo/parser",
"dojo/domReady!"
], function(
esriConfig,
Map,
Extent,
SpatialReference,
LtLayer,
dom,
arrayUtils,
parser
) {
//map
var map = ...
/* 外部接口 */
iMap = {
map: map,
legend: legend,
home: home,
tipDialog: tipDialog,
toggle: toggle,
overviewMap: overviewMap
};
iMap.drawHandler = ...
iMap.layerHandler = ...;
iMap.centerAt = ...;
iMap.clear = ...;
iMap.restoreView = ...;
// 向父vue頁(yè)面發(fā)送加載完畢信號(hào)
window.parent.postMessage({
cmd: 'mapIsReady',
params: {
success: true,
data: true
}
}, '*');
/* end of 外部接口 */
});
</script>
地圖組件Map.vue對(duì)應(yīng)iframe部分，詳見(jiàn)一.2中的代碼
export default {
。。。
mounted() {
//監(jiān)聽(tīng)iframe的消息
window.addEventListener('message', this.handleMessage)
//獲得iframe的window對(duì)象
iframeWin = this.$refs.iframe.contentWindow
},
methods: {
iframeLoad() {
this.isLoaded = true;
window.console.log("map is ready")
},
async handleMessage() {//接收來(lái)自iframe的消息
this.require = iframeWin.require;
this.iMap = iframeWin.iMap;
},
loadLayer(nodes,servers){
//加載圖層
this.iMap.layerHandler.load(nodes,servers);
}
}
}
四、外部接口
Map.vue是一個(gè)組件，它要跟它所在的組件或頁(yè)面進(jìn)行通信。
現(xiàn)在，Map.vue放在了一個(gè)容器頁(yè)面Home.vue（即測(cè)試頁(yè)面）里，里面還有一個(gè)命令組件Layer.vue。點(diǎn)擊命令組件里的按鈕，地圖要做出相應(yīng)的響應(yīng)。其中的原理如下：
命令組件的按鈕點(diǎn)擊后，發(fā)射信息到容器頁(yè)面，然后容器頁(yè)面調(diào)用地圖組件的方法。
測(cè)試頁(yè)面Home.vue
<template>
<div id="app1">
<div id="map-container">
<div>地圖組件</div>
<Map id="map" ref="map" size="100"></Map>
</div>
<div id="layer-container">
<div>其他組件</div>
<Layer @loadLayer="loadLayer" @loadCloud="loadCloud" @clear="clearMap"></Layer>
</div>
</div>
</template>
<script>
import Map from '../components/Map.vue'
import Layer from '../components/Layer.vue'
export default {
name: 'App',
components: {
Map,
Layer
},
methods:{
loadLayer(nodes,servers){//加載圖層
let map = this.$refs.map;
map.loadLayer(nodes,servers);
},
loadCloud(data){//加載衛(wèi)星云圖
let map = this.$refs.map;
map.require(["drawlib/Cloud"], function (Cloud) {
let iMap = map.iMap;
let cloudId = 'cloud';
let cloud = new Cloud(iMap.map);
iMap.drawHandler.push(cloudId, cloud);
cloud.draw(data,cloudId);
});
},
clearMap(){//清除
let map = this.$refs.map;
map.iMap.clear();
}
}
}
</script>
<style>
。。。
</style>
命令組件Layer.vue
<template>
<div class="layer-container">
<button @click="loadLayer">加載圖層</button>
<button @click="loadCloud">衛(wèi)星云圖</button>
<button @click="clear">清除</button>
</div>
</template>
<script>
export default {
methods: {
loadLayer() {
let nodes = ...
let servers = ...
this.$emit("loadLayer", nodes,servers)
},
loadCloud(){
let data = ...;
this.$emit("loadCloud", data);
},
clear(){
this.$emit("clear");
}
},
}
</script>
<style scoped="scoped">
。。。
</style>
注意命令組件發(fā)射消息中指定的方法，在容器頁(yè)面中都有相關(guān)的屬性與之對(duì)應(yīng)：
命令組件
loadCloud(){
let data = ...;
this.$emit("loadCloud", data);
},
容器頁(yè)面
<Layer @loadLayer="loadLayer" @loadCloud="loadCloud" @clear="clearMap"></Layer>
五、運(yùn)行結(jié)果
六、總結(jié)
其他組件要與地圖組件交互，中間要通過(guò)容器頁(yè)面，其他組件與地圖組件并沒(méi)有直接交互。這其實(shí)是一種命令模式。好處是其他組件和地圖組件解耦，沒(méi)有耦合在一起，意味著互不影響。這有利于地圖組件本身的擴(kuò)展和優(yōu)化。缺點(diǎn)的話，每個(gè)東東都要通過(guò)容器頁(yè)面轉(zhuǎn)發(fā)，容器頁(yè)面代碼可能會(huì)有冗余，有些方法根本就是個(gè)傳聲筒，給人的感覺(jué)是重重復(fù)復(fù)的寫(xiě)，意義不太大。
以上就是開(kāi)發(fā)一個(gè)封裝iframe的vue組件的詳細(xì)內(nèi)容，更多關(guān)于封裝iframe的vue組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vscode中使用vue的一些插件總結(jié)(方便開(kāi)發(fā))
對(duì)于很多使用vscode編寫(xiě)vue項(xiàng)目的新手同學(xué)來(lái)說(shuō),可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于vscode中使用vue的一些插件,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
使用Bootrap和Vue實(shí)現(xiàn)仿百度搜索功能
這篇文章主要介紹了使用Bootrap和Vue實(shí)現(xiàn)仿百度搜索功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了vue中定義的data為什么是函數(shù),vue中已經(jīng)幫我們控制臺(tái)輸出警告，并且不會(huì)讓組件中的data合并到options中去，那么，很友好的處理了開(kāi)發(fā)者的強(qiáng)行將data寫(xiě)成對(duì)象的可能性，需要的朋友可以參考下2022-09-09
基于Vue、Vuex、Vue-router實(shí)現(xiàn)的購(gòu)物商城(原生切換動(dòng)畫(huà))效果
這篇文章主要介紹了基于Vue、Vuex、Vue-router實(shí)現(xiàn)的購(gòu)物商城(原生切換動(dòng)畫(huà))效果,需要的朋友可以參考下2018-01-01
最近一直在做 Vue項(xiàng)目代碼層面上的優(yōu)化，寫(xiě)文章是很easy的事情，今天小編給大家分享Vue.js 父子組件通信的十種方式，感興趣的的朋友跟隨小編一起看看吧2018-10-10
vue實(shí)現(xiàn)給當(dāng)前元素添加樣式,其他元素?zé)o樣式問(wèn)題
這篇文章主要介紹了vue實(shí)現(xiàn)給當(dāng)前元素添加樣式,其他元素?zé)o樣式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue實(shí)現(xiàn)數(shù)字時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)數(shù)字時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
本文章向大家介紹vue組件中的數(shù)據(jù)共享，主要包括vue組件中的數(shù)據(jù)共享使用實(shí)例、應(yīng)用技巧、基本知識(shí)點(diǎn)總結(jié)和需要注意事項(xiàng)，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-12-12
vue?實(shí)現(xiàn)左滑圖片驗(yàn)證功能
網(wǎng)頁(yè)中滑動(dòng)圖片驗(yàn)證一直是各大網(wǎng)站、移動(dòng)端的主流校驗(yàn)方式，其主要作用是為了區(qū)分人和機(jī)器以及為了防止機(jī)器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護(hù)方式，這篇文章主要介紹了vue?實(shí)現(xiàn)左滑圖片驗(yàn)證,需要的朋友可以參考下2023-04-04
vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決
這篇文章主要介紹了vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10