Skip to content

Commit 58435bc

Browse files
AnkitKumarMishra5AnkitKumarMishra5
committed
JavaScript: Modules in JS, JS Engine overview
1 parent 7f6c5ae commit 58435bc

8 files changed

Lines changed: 157 additions & 0 deletions

File tree

‎JavaScript/FetchAPI.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,22 @@ <h1>Posts</h1>
5757

5858
postList.append(titleh2, bodyp, hr)
5959
}
60+
61+
/*
62+
# JavaScript Engine:
63+
- Web APIs:
64+
- Timer API
65+
- DOM API
66+
- Fetch API
67+
- Notification API
68+
- Geolacation API
69+
- Storage API
70+
- Task Queues: It queues all the callbacks which are ready for execution
71+
- Microtask Queue (Priority queue): Promise callback, async functions
72+
- Macrotask Queue: setTimeout, setInterval
73+
- Event Loop: Never ending loop which constantly keeps tracking task queue and call stack; picks up first callback from the queue and pushes it into the callstack for execution
74+
75+
*/
6076
</script>
6177
</body>
6278
</html>

‎JavaScript/ModulesInJS/cart.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
let count = 0
2+
3+
function addToCart() {
4+
console.log('Add to cart')
5+
}
6+
7+
function removeFromCart() {
8+
console.log('Remove from cart')
9+
}
10+
11+
function abc() {
12+
console.log('Cart ABC')
13+
}
14+
15+
export default abc

‎JavaScript/ModulesInJS/feature/abc.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import abc from '../order.js' // Import from parent folder file
2+
abc()
3+
4+
function test() {
5+
console.log('Test')
6+
}
7+
8+
export default test

‎JavaScript/ModulesInJS/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Modules in JS</title>
7+
</head>
8+
<body>
9+
<script>
10+
/*
11+
# Modules in JS:
12+
- Collection of code related to specific functionality
13+
- Benefits:
14+
- Improves readability and maintainability
15+
- Avoids redundancy (Using DRY principle)
16+
- Achieve encapsulation
17+
- Syntax:
18+
<script src="user.js" type="module">
19+
- Import/Export:
20+
- Export: An internal entity sent ouside
21+
- Import: An external entity brough inside
22+
- Types of exports/imports:
23+
- Default export/import ('default' keyword)
24+
- Can only export a single entity
25+
- Syntax:
26+
- Export: export default func1
27+
- Import: import func1 from './relative-path'
28+
- Rename entity during import
29+
- import test from './relative-path'
30+
- Named export/import
31+
- Can export multiple entities
32+
- Syntax:
33+
- Export
34+
- Way 1: export { funct1, funct2 }
35+
- Way 2: Export during declaration
36+
export function func1() {}
37+
export function func2() {}
38+
- Import: import { funct1, funct2 } from './relative-path'
39+
- Rename entity during import ('as' keyword)
40+
- Syntax:
41+
import {
42+
funct1 as abc,
43+
funct2 as def
44+
} from './relative-path'
45+
- Relative path:
46+
- ../ Parent folder
47+
- ./ Current folder
48+
- / Child folder
49+
*/
50+
</script>
51+
<script src="index.js" type="module"></script>
52+
<script src="user.js" type="module"></script>
53+
<script src="product.js" type="module"></script>
54+
<script src="cart.js" type="module"></script>
55+
<script src="order.js" type="module"></script>
56+
<script src="feature/abc.js" type="module"></script>
57+
</body>
58+
</html>

‎JavaScript/ModulesInJS/index.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import login from './user.js'
2+
import {
3+
getAllProducts as getAllP,
4+
getFilteredProducts as getFilteredP,
5+
getProductDetails as getPDetails
6+
} from './product.js'
7+
import cartAbc from './cart.js'
8+
import orderAbc from './order.js'
9+
10+
import test from './feature/abc.js' // Import from child folder file
11+
12+
login()
13+
getAllP()
14+
getFilteredP()
15+
getPDetails()
16+
17+
cartAbc()
18+
orderAbc()
19+
20+
test()

‎JavaScript/ModulesInJS/order.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
function confirmOrder(){
2+
console.log('Confirming order')
3+
}
4+
5+
function cancelOrder() {
6+
console.log('Cancelling Order')
7+
}
8+
9+
function abc() {
10+
console.log('Order ABC')
11+
}
12+
13+
export default abc

‎JavaScript/ModulesInJS/product.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export function getAllProducts() {
2+
console.log('Get all products')
3+
}
4+
export function getFilteredProducts() {
5+
console.log('Get filtered products')
6+
}
7+
export function getProductDetails() {
8+
console.log('Get product details')
9+
}
10+
11+
// export {
12+
// getAllProducts,
13+
// getFilteredProducts,
14+
// getProductDetails
15+
// }

‎JavaScript/ModulesInJS/user.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
let count = 0
2+
3+
function login() {
4+
console.log('Login')
5+
}
6+
7+
function signup() {
8+
console.log('Sign up')
9+
count++
10+
}
11+
12+
export default login

0 commit comments

Comments
 (0)