Section 31: Writing Maintainable Code & The MVC Pattern - Keep Your Code Organized

The goals

💪🏻What's The Problem With Our Code?

✌🏻Code Refactoring

👍🏻The MVC Pattern

 

Let's look around our code

We check our code we've made till this date. 

And if there are some parts we need to fix.

 

Too Large Code Files Can Become Hard To Maintain

 

 Separating functions by the type (blog function vs auth function)

So we finished first refactoring here

 

The MVC Pattern

 

Class and constructor

The constructor method is a special method of a class for creating and initializing an object instance of that class.

The constructor method is a special method:

• It has to have the exact name "constructor"
• It is executed automatically when a new object is created
• It is used to initialize object properties

If you do not define a constructor method, JavaScript will add an empty constructor method.

 

Class Methods

Class methods are created with the same syntax as object methods.

Use the keyword class to create a class.

Always add a constructor() method.

Then add any number of methods.

Syntax

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

 

Create a Class method named "age", that returns the Car age:

Example

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}

let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";

You can send parameters to Class methods:

Example

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}

let date = new Date();
let year = date.getFullYear();

let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";

 

Make the class and define function together

 

And now we are separating the route code which was all in blog.js file to auth.js and models-post.js

We are doing this cause in this part we are using it to save in models because we are using database.

So we differentiate each code!

 

Now we can just organise like this

And then we can remove this Post model here cause we are not using it anymore!