資訊專欄INFORMATION COLUMN
摘要：異步加載異步加載指的是為指定加載的回調(diào)函數(shù)，在的主體資源加載完畢之后，將自動調(diào)用該回調(diào)函數(shù)。
幾種加載js的方式
同步加載
異步加載
延遲加載
同步加載用的最多的一種方式，又稱阻塞模式，會阻止瀏覽器的后續(xù)處理，停止后續(xù)的解析，只有當當前加載完成，才能進行下一步操作。所以默認同步執(zhí)行才是安全的。但這樣如果js中有輸出document內(nèi)容、修改dom、重定向等行為，就會造成頁面堵塞。所以一般建議把 異步加載
異步加載又叫非阻塞加載，瀏覽器在下載執(zhí)行js的同時，還會繼續(xù)進行后續(xù)頁面的處理。主要有三種方式。
動態(tài)創(chuàng)建script標簽
let script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://webapi.amap.com/maps?v=1.4.6&key="+key+"&callback=init";
script.onerror = reject;
document.head.appendChild(script);
新的
這種方式有缺點很明顯，1：會導致加載頁面變得很慢；2：單頁應用的頁面，如果頁面中雖然用不到地圖，但是也會加載這個js文件，這是沒有必要的。
異步加載異步加載指的是為 JS API 指定加載的回調(diào)函數(shù)，在 JS API 的主體資源加載完畢之后，將自動調(diào)用該回調(diào)函數(shù)?；卣{(diào)函數(shù)應該聲明在 JS API 入口文件引用之前，異步加載可以減少對其他腳本執(zhí)行的阻塞，HTTPS 下我們也建議使用異步方式：
或者
window.onLoad = function(){
var map = new AMap.Map("container");
}
var url = "http://webapi.amap.com/maps?v=1.4.6&key=您申請的key值&callback=onLoad";
var jsapi = doc.createElement("script");
jsapi.charset = "utf-8";
jsapi.src = url;
document.head.appendChild(jsapi);
vue項目中引入高德地圖
如何在vue的組件化開發(fā)中引入高德地圖呢？我寫了一個loadMap.js文件
export function MP(key) {
return new Promise(function (resolve, reject) {
window.init = function () {
resolve(AMap)
};
let script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://webapi.amap.com/maps?v=1.4.6&key="+key+"&callback=init";
script.onerror = reject;
document.head.appendChild(script);
})
}
然后在用到高德地圖的vue的組件中
import {MP} from "../../../utils/loadMap";
MP("d275691902d1744cad9a7ddc1fc20657").then(function (AMap) {
that.errNetwork = false;
initAMapUI(); //這里調(diào)用initAMapUI初始化
that.initMap(AMap);
}).catch(err=>{
that.errNetwork = true;
})
小坑
在這兒我不僅用到了高德地圖，還用到的地圖的UI庫。在高德地圖JavaScript API之后引入UI組件庫的入口文件：
同步方式：
異步方式
關鍵是UI庫依賴于地圖js文件，在這里，我們可以js加載完的回調(diào)onload函數(shù)和promise.all()函數(shù)來實現(xiàn)。loadMap.js文件如下：
export function MP(key) {
const p1 = new Promise(function (resolve, reject) {
window.init = function () {
console.log("script1-------onload");
resolve(AMap)
};
let script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://webapi.amap.com/maps?v=1.4.6&key="+key+"&callback=init";
script.onerror = reject;
document.head.appendChild(script);
});
const p2 = new Promise(function (resolve,reject) {
let script2 = document.createElement("script");
script2.type = "text/javascript";
script2.src = "http://webapi.amap.com/ui/1.0/main-async.js";
script2.onerror = reject;
script2.onload = function(su){
console.log("script2-------onload",su);
resolve("success")
};
document.head.appendChild(script2);
});
return Promise.all([p1,p2])
.then(function (result) {
console.log("result----------->",result);
return result[0]
}).catch(e=>{
console.log(e);})
};
promise.all中的then的成功回調(diào)返回rusult是一個數(shù)組，分別代表p1和p2的結(jié)果，這里只返回p1的結(jié)果（map對象）就可以了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95535.html
摘要：仿滴滴出行項目最近，各大社區(qū)出現(xiàn)很多小伙伴的項目，趁著這股熱潮我也用擼了一個滴滴出行的項目?？墒?，后來在手機上發(fā)現(xiàn)，輸入的時候居然調(diào)不出軟鍵盤，寫項目的時候沒考慮到設備問題，簡直是大大的失誤。也就是說可以在組件內(nèi)部進行請求，不需要提交。 Vue2.0 仿滴滴出行項目 最近，各大社區(qū)出現(xiàn)很多小伙伴的vue項目，趁著這股熱潮我也用vue擼了一個滴滴出行的項目。 效果預覽 showImg(h...
摘要：當屬性為合法地名字符串時例外，因為百度地圖會根據(jù)地名自動調(diào)整的值由于百度地圖只有一種加載方式，因此組件及其所有子組件的渲染只能是異步的。 在使用vue做項目的時候，有用到百度地圖，使用了vue-baidu-map插件，包括拾取位置坐標，搜索位置等 1.引入方式 showImg(https://segmentfault.com/img/bVbv0hs?w=835&h=531); 可在ap...
摘要：獲取富文本內(nèi)容地圖我是使用高德地圖在全局導入為我申請的也可以自己去申請高德地圖官網(wǎng)案例 前言 今天是個好日子,大家六一快樂;vue-cli生成的template還需要配置axios,vuex,element等插件,該項目中將這些常用插件進行了配置;項目開發(fā)中template可以快速復用,也是可以快速上手vue的一個demo; 1.動態(tài)效果圖 showImg(https://segmen...
摘要：高德文檔梳理首先，我們要加載外部，在外部加載完畢，然后初始化地圖。加載外部你的初始化地圖初始化地圖的前提是，成功加載外部，然后使用高德提供的對象來構(gòu)造實例。 高德文檔 https://lbs.amap.com/api/java... 梳理 首先，我們要加載外部js，在外部js加載完畢，然后初始化地圖。 加載外部js showImg(https://segmentfault.com/im...
閱讀 2713·2021-10-22 09:55
閱讀 2073·2021-09-27 13:35
閱讀 1298·2021-08-24 10:02
閱讀 1565·2019-08-30 15:55
閱讀 1231·2019-08-30 14:13
閱讀 3499·2019-08-30 13:57
閱讀 2004·2019-08-30 11:07
閱讀 2486·2019-08-29 17:12
