Intermediate · Level 5: JavaScript AdvancedIntermediate60 menitBahasa Indonesia

Memecah File JavaScript

Latihan refactor local app dari satu script besar menjadi beberapa file module dengan tanggung jawab jelas.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Mengenali tanda script.js mulai terlalu besar
Memisahkan DOM, state, storage, dan utility code
Menggunakan script type module di local project
Menjelaskan alasan pemisahan file

JavaScriptRefactorES ModulesLocal Workflow

Isi lesson

7 blok

1.
Refactor dimulai dari tanggung jawabBelum selesaiWajib
2.
Sebelum refactor: satu file melakukan semuanyaBelum selesaiWajib
3.
Setelah refactor: file berdasarkan tanggung jawabBelum selesaiWajib
4.
main.js sebagai alur utamaBelum selesaiWajib
5.
Checklist local refactorBelum selesaiWajib
6.
Jangan memecah file tanpa alasanBelum selesaiOpsional
7.
RingkasanBelum selesaiWajib

Refactor dimulai dari tanggung jawab

Wajib

Memecah file bukan soal membuat banyak file agar terlihat profesional. Pemisahan file berguna jika setiap file punya tanggung jawab yang mudah dijelaskan.

Di local Vanilla JavaScript app, pembagian awal yang masuk akal biasanya sederhana: main.js untuk alur utama, dom.js untuk memilih atau membuat elemen DOM, state.js untuk data sementara, storage.js untuk localStorage, dan utils.js untuk helper kecil.

Bagian ini memengaruhi progres lesson.

Sebelum refactor: satu file melakukan semuanya

Wajib

const noteInput = document.querySelector("#noteInput");
const saveButton = document.querySelector("#saveButton");
const noteOutput = document.querySelector("#noteOutput");

let latestNote = localStorage.getItem("latestNote") || "";

function formatNote(note) {
  return note.trim();
}

function renderNote(note) {
  noteOutput.textContent = "Catatan: " + note;
}

saveButton.addEventListener("click", () => {
  latestNote = formatNote(noteInput.value);
  localStorage.setItem("latestNote", latestNote);
  renderNote(latestNote);
});

Kode ini masih kecil, tetapi sudah mencampur DOM selection, state, formatter, storage, render, dan event handler di satu tempat.

Bagian ini memengaruhi progres lesson.

Setelah refactor: file berdasarkan tanggung jawab

Wajib

bash

vanilla-js-notes/
  index.html
  main.js
  dom.js
  state.js
  storage.js
  utils.js

main.js menjadi pintu masuk. dom.js mengurus elemen halaman. state.js mengurus data sementara. storage.js mengurus localStorage. utils.js berisi helper kecil yang tidak bergantung pada DOM.

Bagian ini memengaruhi progres lesson.

main.js sebagai alur utama

Wajib

import { noteInput, saveButton } from "./dom.js";
import { setLatestNote } from "./state.js";
import { saveNote } from "./storage.js";
import { formatNote } from "./utils.js";

saveButton.addEventListener("click", () => {
  const note = formatNote(noteInput.value);

  setLatestNote(note);
  saveNote(note);
});

main.js membaca seperti daftar kerja utama. Detail DOM, state, storage, dan formatting berada di file masing-masing.

Bagian ini memengaruhi progres lesson.

Checklist local refactor

Wajib

Kerjakan di local Vanilla JavaScript app kamu:

Pilih satu script.js yang sudah punya DOM event dan localStorage atau data kecil.
Buat file main.js sebagai entry point utama.
Buat minimal dua file tambahan, misalnya dom.js dan storage.js.
Pindahkan DOM selection ke dom.js jika itu membuat main.js lebih bersih.
Pindahkan localStorage helper ke storage.js jika fitur kamu memakai penyimpanan lokal.
Pindahkan helper murni seperti formatNote ke utils.js jika ada.
Gunakan export pada file yang menyediakan function atau value.
Gunakan import pada main.js untuk mengambil bagian yang dibutuhkan.
Ubah HTML menjadi script type="module" src="main.js".
Jalankan ulang halaman di browser dan cek Console.
Jangan lanjut jika Console menampilkan error import path atau file not found.

Tandai selesai setelah app lokal tetap berjalan setelah dipisah menjadi beberapa file.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Opsional

Jangan memecah file tanpa alasan

Kalau satu file baru hanya berisi satu baris yang tidak membuat kode lebih jelas, pemisahan itu belum tentu membantu. Tujuannya adalah membuat tanggung jawab lebih mudah dibaca, bukan mengejar jumlah file.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Refactor file sebaiknya mengikuti tanggung jawab kode.
main.js cocok menjadi entry point yang membaca alur utama app.
dom.js, state.js, storage.js, dan utils.js adalah pembagian awal yang cukup untuk Vanilla JS kecil.
Browser membutuhkan type="module" agar import/export berjalan.
Berikutnya, Uji Kompetensi akan mengecek scope, closure, import/export, dan keputusan module boundary.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Refactor dimulai dari tanggung jawab.

Memuat progres Review module