Es6 Module

codingzon-es6-Modules

Export-Import in ES6

JavaScript's es6 allow you to organize the code components in the form of modules and can be import them into other modules.

This makes code maintenance easier. If they are written in separate files.

With the help of import and export keywords, Modules can be used in other programs.

Using Export


You can export a function or variable from any file.

Let us create a file named employee.js, and fill it with the things we want to export.

There are two types of exports: 1. Named and 2. Default.

Named exports must be enclosed using curly braces. Default exports do not.

Named Exports

You can create named exports two ways. 1. In-line individually, or 2. All at once at the bottom.

MOVETOP↑

 

Example
In-line individually:

export const empname = "benny"
export const empage = 30

// first declare variable and export
let empcompany = "xyz"
export{empcompany }




All at once at the bottom:

employeerecord.js

// first declare variable and export

const empname = "sunny"
const empage = 30
const empcompany = "xyz"
 
export{empname,empage,empcompany }


Default Exports

Only one default export can be used in a file.In the given example, there is only one export.

Example
empdetails.js

const getEmpDetails = () => {
  const empname = "Jenny";
  const empage = 30;
  return empname  + ' ,' + empage ;
};


export { getEmpDetails}

 

Using Import


You can import modules into a file in two ways, either it can name or default export.


Example
Import named exports from the file employeerecord.js: in the below given file employeerecord2.js

1. Import named exports 

employeerecord2.js
 
import {empname, empage, empcompany }  './employeerecord.js'
 
 
console.log(empname);
console.log(empage);
console.log(empcompany);
 
 
 
namedimport.html
This HTML file will execute the employeerecord2.js component, which is embedded in the script tag. And must be specified type="module".
<!DOCTYPE html>
<html>
<head>

<title>ES6 Modules</title>
   
</head>
<body>
  <script src="./employeerecord2.js" type="module"> 
  
</script>

</body>
</html>
 TOP

Example:
empdetails.js
 let empcompany = "abc"
const getEmpDetails = () => {
  const empname = "Jenny";
  const empage = 30;
  return empname  + ',' + empage ;
};
let getCompany = function(){
   return empcompany.toUpperCase()
}

export {getEmpDetails, getCompany} //default export
  
 
 empdetails3.js
 import {getEmpDetails,getCompany}  from './empdetails.js'
 
console.log(getEmpDetails() );
console.log(getCompany() );
 
GOTOP↑
 

2. Import a default export 
 empdetails2.js
import  getEmpDetails a from "./empdetails.js";
 console.log(getEmpDetails);
 
Another approach.. 
 
The component can be renamed while importing as shown in the example 
empdetails4.js
import  * as emp from "./empdetails.js";
 console.log(emp.getEmpDetails);


defaultimport.html 
<!DOCTYPE html>
<html>
<head>

<title>ES6 Modules</title>
   
</head>
<body>
  <script src="./empdetails4.js" type="module"> 
  
</script>

</body>
</html>
 

 ES6HOME
 
 




































Comments











Post a Comment



















Popular posts from this blog









Using javascript pass form variables to iframe src 














Image







      Open PDF in Bootstrap Modal Window   This tutorial shows How to pass a JavaScript/jQuery variable to bootstrap modal  view and sets it to iframe  src attribute. It passes value dynamically to src attribute of the iframe. When the user clicks a link, it opens the URL in a popup window. This  code shows the PDF in a Model without download option by hiding the toolbar.  To show PDF toolbar in modal, just add #toolbar=1   in the above script. index.php <!DOCTYPE html> <html lang= "en" >     <head>         <title>Bootstrap Model with PDF Example - coding-zon</title>         <meta charset= "utf-8" >         <meta name= "viewport"  content= "width=device-width, initial-scale=1" >         <link rel= "stylesheet"  href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" >         <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.








Read more










 Creating a new PDF by Merging PDF documents using TCPDF














Image







Merging two PDFs in PHP What is PDF? The Portable Document Format. PDF  stands for "Portable Document Format". Essentially, the format is used when you need to save files that cannot be modified but still need to be easily shared and printed. PDF is one of the most commonly used file types around. PDFs generally contain shareable data, such as text or photo documents etc., and are accessible to anyone who has a computer or smartphone. Unlike a Word file, which requires Microsoft Word to view or edit, most browsers will open a PDF. How to merge PDFs?  You can merge several documents into one. In PHP, you  have a library called TCPDF which allows you to combine one or more PDF  documents to one single document. In this article, we will create a new PDF by Merging PDF documents using TCPDF. Download the  PDFMerger-tcpdf.zip here. Unzip it and copy it to the PHP server. Copy the  PDF files into the same folder that you want to combine. Open the file: merge-pdf-example.php Provide








Read more










Import excel file into mysql in PHP 














Image







  Upload Excel file and Import  it into MySQL in PHP  Create a table in some database with given code.   Download Library  - extract it, rename the folder to library . Create index.php  file with given code in a server. Create  excelUpload.php  with given code. Create db_config.php . Create one Excel file with some sample data as shown in the below image of Excel file. Create ' uploads ' folder in the same directory. Now start server, run the index.php. Upload a .xls  file. If Everything is fine, Excel data inserted in the above created MySQL table - tbl_products . PHP Version:    5.5.11 Folder Structure       Query: CREATE  TABLE  IF NOT  EXISTS  `tbl_products` (   `id` int ( 11 ) NOT  NULL  AUTO_INCREMENT,   `productname` varchar ( 100 ) DEFAULT  NULL ,   `description` varchar ( 100 ) DEFAULT  NULL ,   PRIMARY  KEY  (`id`) )     Top index.php <!DOCTYPE html>  <html>  <head>  <title> coding-zon Demo - Upload Excel to MySQL in PHP </title>  <lin








Read more