Modern JS Loading
Async vs. Defer
When adding scripts to the head of your HTML document, it's crucial to ensure they don't block the page rendering. This is where async
and defer
attributes come into play.
Async: Scripts with
async
load in parallel with the HTML parsing and execute as soon as theyβre downloaded. Useasync
for scripts that don't rely on others or the DOM.
<script src="example.js" async></script>
Defer: Scripts with
defer
also load in parallel but execute in the order they appear in the document after the HTML is fully parsed. Usedefer
for scripts that depend on the DOM or other scripts.
<script src="example.js" defer></script>
2. Use of type="module"
Using type="module"
allows you to leverage ES6 modules, enabling better organization and modularization of your code.
-
Modules: By using
type="module"
, you can import and export functions, objects, or primitives between different files. This makes your code more maintainable and reusable.
<script type="module">
import { myFunction } from './module.js';
myFunction();
</script>
3. Use of Object
Objects are fundamental in JavaScript for storing collections of data and more complex entities.
- Object Syntax: An object is a collection of key-value pairs, where values can be properties or methods.
const person = {
name: 'John',
age: 30,
greet: function() {
console.log('Hello!');
}
};
person.greet();
4. Class + Constructor
ES6 introduced classes, providing a clearer and more concise syntax for creating objects and handling inheritance.
- Class and Constructor: A class in JavaScript is essentially a blueprint for creating objects, and the constructor method initializes new objects.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}`);
}
}
const john = new Person('John', 30);
john.greet();
5. Extends + Super
Classes can extend other classes, inheriting their properties and methods. The super
keyword is used to call the constructor of the parent class.
- Extends and Super: This allows for hierarchical class structures and code reuse.
class Employee extends Person {
constructor(name, age, jobTitle) {
super(name, age);
this.jobTitle = jobTitle;
}
work() {
console.log(`${this.name} is working as a ${this.jobTitle}`);
}
}
const jane = new Employee('Jane', 28, 'Software Developer');
jane.greet();
jane.work();
6. getElementById() β querySelector() & getElementsByClassName() β querySelectorAll()
Modern JavaScript provides more powerful and flexible ways to select DOM elements.
- querySelector() and querySelectorAll(): These methods allow you to use CSS selectors, providing a consistent and concise way to select elements.
// Old way
const elementById = document.getElementById('myId');
const elementsByClassName = document.getElementsByClassName('myClass');
// New way
const element = document.querySelector('#myId');
const elements = document.querySelectorAll('.myClass');
The modern methods are preferred because they provide a more uniform way to select elements and support complex selectors.
Conclusion
Today's exploration of JavaScript concepts like async/defer, modules, objects, classes, and modern DOM methods has been enlightening. These concepts are crucial for writing efficient, organized, and maintainable code.
I hope this summary helps all readers remember these key points, including me when I'll come back here to recall them in the future. Stay tuned for more updates as I continue my journey towards full-stack development.
Happy coding!π»
Top comments (0)