屬性window設置器解決方案：
<script type="module">
import Dms from 'https://cdn.jsdelivr.net/npm/[email protected]/dms.js';
alert(Dms.toLat(-3.62, 'dms'));
window.Dms = Dms;
</script>
<script>
let Dms;
Object.defineProperty(window, 'Dms', {
get(){
return Dms;
},
set(val){
Dms = val;
window.dispatchEvent(new Event('dms-set'));
}
});
window.addEventListener('dms-set', () => alert('SECOND TIME: ' + Dms.toLat(-3.62, 'dms')));
</script>
一些承諾的解決方案：
<script type="module">
import Dms from 'https://cdn.jsdelivr.net/npm/[email protected]/dms.js';
alert(Dms.toLat(-3.62, 'dms'));
window.Dms = Dms;
</script>
<script>
promisifyGlobal('Dms');
Dms.then(Dms => alert('SECOND TIME: ' + Dms.toLat(-3.62, 'dms')));
function promisifyGlobal(name){
let global, promise = new Promise(resolve => {
Object.defineProperty(window, name, {
get(){
return promise;
},
set(val){
global = val;
resolve(global);
}
});
});
}
</script>
您可以輕松地動態導入到非模塊腳本中：
<script>
(async () => {
const {default: Dms} = await import('https://cdn.jsdelivr.net/npm/[email protected]/dms.js');
alert(Dms.toLat(-3.62, 'dms'));
})();
</script>
最后是一些瘋狂的通用解決方案：
<script type="module">
import Dms from 'https://cdn.jsdelivr.net/npm/[email protected]/dms.js';
alert(Dms.toLat(-3.62, 'dms'));
</script>
<script>
// this script will handle all imports
// tweak to import several exports and named exports
for(const script of document.querySelectorAll('script[type=module]')) {
const regex = /import\s+([^\s]+)\s+from\s+["\']([^"\']+)/g;
let matches;
while(matches = regex.exec(script.textContent)){
const [, name, url] = matches;
const src = `import ${name} from '${url}'; export default ${name};`;
window[name] = new Promise(resolve => {
import(`data:text/javascript, ${src}`).then(({default:imported}) => {
setTimeout(() => resolve(imported));
});
});
}
}
</script>
<script>
Dms.then(Dms => alert('SECOND TIME: ' + Dms.toLat(-3.62, 'dms')));
</script>
