@zaichaopan/load-script v0.1.4
Load Script
Load script into client side javascript and returns a promise
Usage
This thin helper can help you load scripts like Google Map Api, Google OAuth Api to your client side javascript. So you don't have to specify a global callback in the script src which will get called after the script is fully loaded. It is inspired by load-google-maps-api.
Installation
npm install --save @zaichaopan/load-scriptImport helper
import { load } from '@zaichaopan/load-script'Now use method load to load the script you want. This method takes an object as parameter. This object should contain 3 required properties.
- src: a string to specify the script you want to load
- callbackName: a string to specify the name that the script will use to look for callback function name when it finished loading
- resolve: a string to specify the name of property that the script will assign the resolved value to.
If the script requires more parameters, like google map api requires key and libraries name. You can add assign them to a property called params, along with required properties: src, callbackName and resolve.
Examples
Google Map Api
To use google map, you have to do
Before:
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(//...);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>It sucks when you want to use it your individual React or Vue components. With this helper you can
After:
import { load } from '@zaichaopan/load-script'
let map;
load({
src: 'https://maps.googleapis.com/maps/api/js',
callbackName: 'callback',
resolve: 'google',
params: {
key: your_app_key,
libraries: 'places'
}
}).then(google => {
map = new google.maps.map(//...)
})Note:
After a script is loaded and resolve the value, the value will be cached. So it will not load the script twice.
Google OAuth Api
import { load } from '@zaichaopan/load-script'
let gapi
load({
src: 'https://apis.google.com/js/platform.js',
callbackName: 'onload',
resolve: 'gapi',
}).then(googleGapi => {
gapi = googleGapi
//...
})