\nIn JavaScript es6, modules provide the ability to use variables, methods and classes in another JavaScript file.<\/p>\n
The following is an example to export a function from a JavaScript file for use in another JavaScript file:<\/p>\n
export function printSomething(value) {\n console.log(value)\n}\n<\/code><\/pre>\n\nThe function is exported by including the export keyword. It could also export the function like this:<\/p>\n
function printSomething(value) {\n console.log(value)\n}\n\nexport {printSomething};\n<\/code><\/pre>\n\nExporting multiple items would be comma separated:<\/p>\n
printExample.js:<\/p>\n
const season = 'Spring'\n\nfunction printSomething(value) {\n console.log(value)\n}\n\nexport {season, printSomething};\n<\/code><\/pre>\nTo use an exported item in another file, add an import as follows:<\/p>\n
home.js:<\/p>\n
import printExample from '.\/printExample.js';\n\n(function() {\n\n printExample.printSomething(\"abc\");\n\n})();\n<\/code><\/pre>\nThe name after the import keyword is the name of the class, function or variable being exported from the .js file.<\/p>\n
\nAn export can also be renamed when importing it using an alias:<\/p>\n
home.js:<\/p>\n
import printExample as pe from '.\/printExample.js';\n\n(function() {\n\n pe.printSomething(\"abc\");\n\n})();\n<\/code><\/pre>\nThe top level JavaScript file importing a module, must be included in an html or php file using a type of module:<\/p>\n
index.html:<\/p>\n
<html>\n <head>\n\n <\/head>\n\n <body>\n\n <script src=\"home.js\" type=\"module\"><\/script>\n <\/body>\n<\/html>\n\n<\/code><\/pre>\nImplementation:<\/strong><\/br><\/br><\/p>\n\nIf you have been following along with the JavaScript Tutorial Series, take a look at modules\/TemperatureConverter.js and modules\/Weather.js. These are both JavaScript modules. They both are used by the javascript_tutorial.js file.<\/p>\n
In TemperatureConverter.js and Weather.js, notice the export default statements at the end of each file. These statements export the entire TemperatureConverter and Weather classes for use by other JavaScript files.<\/p>\n
In javascript_tutorial.js, notice the following lines at the top of the file:<\/p>\n
\nimport TemperatureConverter from \".\/modules\/TemperatureConverter.js\";\nimport Weather from \".\/modules\/Weather.js\";\n<\/code><\/pre>\nThese lines import the entire TemperatureConverter and Weather classes. <\/p>\n
Further down, those names will be used to access functionality within its class.<\/p>\n
\nFor this implementation, there aren’t any file changes.<\/p>\n
For completeness, each file in the tutorial is shown below:<\/p>\n
\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"css\/style.css\"\/>\n <\/head>\n\n <body>\n <header>\n <nav>\n\n <\/nav>\n\n <article id=\"toolbar\">\n <article id=\"currentWeather\" class=\"text-center\">\n <section id=\"location\">\n <\/section>\n <section id=\"weatherTemperature\">\n <span id=\"temperatureValue\"><\/span>\n <span id=\"degreeSymbol\">°<\/span>\n <span id=\"temperatureUnits\"><\/span>\n <\/section>\n <section id=\"weatherDescription\">\n <\/section>\n <img id=\"weatherIcon\"> \n <\/img>\n <\/article> \n <\/article>\n\n <\/header>\n\n <main><\/main>\n\n <footer><\/footer>\n\n <script src=\"js\/javascript_tutorial.js\" type=\"module\"><\/script>\n <\/body>\n<\/html>\n<\/code>\n<\/pre>\njs\/javascript_tutorial.js:<\/p>\n
\n\n\/\/ JavaScript Tutorial\n\n\/*\n * This file will add JavaScript\n * to a website.\n *\/\nimport TemperatureConverter from \".\/modules\/TemperatureConverter.js\";\nimport Weather from \".\/modules\/Weather.js\";\n\n(function() {\n let doc = document;\n let defaultLocation = [-86.7816, 36.1627]; \/\/ longitude, latitude\n\n function setWeather(data) {\n if (data) {\n let temp = Math.round(data.main.temp);\n try {\n let fahrenheit = TemperatureConverter.convertCelsiusToFahrenheit(temp - 273);\n console.log(\"Fahrenheit temperature: \" + fahrenheit);\n } catch (error) {\n console.log(\"Error setting weather: \" + error.message);\n }\n }\n }\n\n function init() {\n let locationStr = \"\";\n for (let i = 0, num = defaultLocation.length; i < num; i++) {\n locationStr += defaultLocation[i];\n if (i === 0) {\n locationStr += \", \";\n }\n }\n\n console.log(\"Setting weather for location: \" + locationStr);\n\n setWeather({ main: { temp: 30 } });\n }\n\n init();\n})();\n\n<\/code><\/pre>\njs\/modules\/TemperatureConverter.js:<\/p>\n
\n\nclass TemperatureConverter {\n \n static convertKelvinToCelsius(kelvin) {\n if (typeof kelvin !== 'number') {\n throw 'Kelvin value is not a number';\n }\n return Math.round(kelvin - 273);\n }\n \n static convertCelsiusToFahrenheit(celsius) {\n if (typeof celsius !== 'number') {\n throw 'Celsius value is not a number';\n }\n return Math.round((celsius * (9\/5)) + 32);\n };\n \n static convertFahrenheitToKelvin(fahrenheit) {\n if (typeof fahrenheit !== 'number') {\n throw 'Fahrenheit value is not a number';\n }\n return Math.round(((5\/9) * (fahrenheit - 32)) + 273);\n };\n}\n\nexport default TemperatureConverter;\n\n<\/code><\/pre>\njs\/modules\/Weather.js:<\/p>\n
\n\nclass Weather {\n\n \/\/ Constructor\n constructor() {\n };\n\n getLocation() {\n let url = 'https:\/\/ipinfo.io\/json';\n let options = {\n mode : 'cors'\n };\n };\n\n getWeather(coordinates) {\n } \n }\n\nexport default Weather;\n\n<\/code><\/pre>\ncss\/style.css:<\/p>\n
<\/p>\n
\n\nheader nav {\n height: 10vh;\n border-bottom: 1px solid darkgray;\n}\n\nheader #toolbar {\n height: 5vh;\n border-bottom: 1px solid darkgray;\n}\n\nmain {\n height: 72vh;\n border-bottom: 1px solid darkgray;\n}\n\nfooter {\n height: 10vh;\n border-bottom: 1px solid darkgray;\n}\n\n<\/code><\/pre>\nYou should see the following in the browser console when loading the index.html file:<\/p>\n
Setting weather for location: -86.7816, 36.1627
\njavascript_tutorial.js:19 Fahrenheit temperature: -405<\/p>\n
\nNote, the files will need to be loaded onto a web server. If running them locally in Chrome, you may get a CORS error.<\/p>\n
\nThe JavaScript tutorial series starts with this post<\/a>.<\/p>\n\n(paid links)<\/br>
\nMore JavaScript<\/a><\/br><\/br><\/p>\n