Langkau ke kandungan
WANCODE
EN

Memahami Git Diff

17 minitPertengahanHTML · CSS · JS

Dalam pelajaran ini

  • Baca bahagian unified diff: header fail, header hunk, baris +, - dan context
  • Semak diff berbanding tujuan yang dinyatakan dan kesan tingkah laku yang dibuang
  • Baiki regression sambil mengekalkan bahagian perubahan yang anda mahu

Idea utama

Diff ialah penerangan paling jujur tentang sesuatu perubahan. Mesej commit menyatakan apa yang penulis maksudkan; baris - menunjukkan apa yang sebenarnya dibuang.

Tool agent menyunting fail secara terus, dan cara paling selamat untuk melihat apa yang dibuat ialah diff: git diff untuk perubahan yang belum di-stage, git diff --staged untuk yang sudah di-stage, git show untuk commit terakhir. Ini satu commit yang dibuat pembantu AI dengan mesej "Refactor checkout: support more discount codes, tidy naming".

Diff
diff --git a/script.js b/script.js
--- a/script.js
+++ b/script.js
@@ -1,23 +1,23 @@
+const DISCOUNTS = { RAYA10: 0.1, MERDEKA20: 0.2 };
+
 const cart = [
   { name: "Kopi O", price: 2.5, qty: 2 },
   { name: "Nasi lemak", price: 6, qty: 1 },
   { name: "Kuih lapis", price: 1.5, qty: 3 },
 ];

-function getTotal(items) {
-  return items.reduce((sum, item) => sum + item.price * item.qty, 0);
+function cartTotal(items) {
+  return items.reduce((sum, item) => sum + item.price, 0);
 }

 function applyDiscount(total, code) {
-  if (code === "RAYA10") {
-    return total * 0.9;
-  }
-  return total;
+  const rate = DISCOUNTS[code.toUpperCase()];
+  return total - total * rate;
 }

 function render() {
   const code = document.querySelector("#code").value;
-  const subtotal = getTotal(cart);
+  const subtotal = cartTotal(cart);
   document.querySelector("#subtotal").textContent = "RM " + subtotal.toFixed(2);
   document.querySelector("#total").textContent = "RM " + applyDiscount(subtotal, code).toFixed(2);
 }

Cara membacanya

--- a/ +++ b/
Fail sebelum (a/) dan selepas (b/) perubahan. Git juga mencetak baris index … dengan hash fail, yang tidak ditunjukkan di sini.
@@ -1,23 +1,23 @@
Header hunk: cebisan ini meliputi 23 baris bermula pada baris 1 dalam fail lama, dan 23 baris bermula pada baris 1 dalam fail baharu.
- line
Dibuang: baris ini wujud sebelum ini dan kini sudah tiada.
+ line
Ditambah: baris ini baharu.
line (space)
Context: tidak berubah, ditunjukkan supaya anda nampak di mana perubahan itu berada.

Semak diff berbanding mesejnya

  • Bagi setiap baris -, tanya: ke mana perginya tingkah laku ini? Kalau ia tiada dalam mana-mana baris +, ia telah dipadam. * item.qty hilang dalam perubahan "penamaan".
  • Semak kes baharu. applyDiscount lama memulangkan total untuk kod yang tidak dikenali. Yang baharu mengira total - total * undefined. Apa hasilnya?
  • Cari andaian baharu. code.toUpperCase() menganggap code sentiasa string. Kod lama tidak begitu.
  • Perubahan bercampur ialah tanda bahaya. Tukar nama dan tukar logik dalam baris yang sama mudah diluluskan secara tidak sengaja. Minta commit berasingan.

Apa yang ditulis pembantu AI

JavaScript
function applyDiscount(total, code) {
  const rate = DISCOUNTS[code.toUpperCase()];
  return total - total * rate;
}

Apa yang dihantar oleh penyemak

JavaScript
function applyDiscount(total, code) {
  const key = (code || "").trim().toUpperCase();
  const rate = DISCOUNTS[key];
  if (rate === undefined) return total;
  return total - total * rate;
}

Kekalkan penambahbaikan (jadual carian, kod tidak sensitif huruf besar/kecil) dan pulihkan jaminan lama (kod tidak dikenali atau tiada → tiada diskaun).

Dalam repo sebenar, anda tak perlu terima perubahan secara semua-atau-tiada: git add -p membolehkan anda stage hunk demi hunk, dan git restore -p <file> membolehkan anda buang hunk tertentu daripada perubahan yang belum di-stage. Baca setiap hunk walau apa pun.

script.js ialah kod selepas commit pembantu AI. Pratonton menunjukkan RM NaN walaupun anda belum menaip apa-apa kod. Berpandukan diff di atas, baiki applyDiscount supaya:

- RAYA10 (huruf besar atau kecil) memberi 10% diskaun dan MERDEKA20 memberi 20% — kekalkan ciri baharu, - kod yang tidak dikenali, string kosong atau tiada kod memulangkan total tanpa perubahan — jaminan lama.

Semakan

  • Kod yang dikenali masih berfungsi (huruf besar/kecil)
  • Kod tidak dikenali, kosong atau tiada tidak memberi diskaun
  • Halaman tidak lagi menunjukkan NaN

Uji kefahaman

Q1

Dalam diff, apa maksud baris yang bermula dengan ruang kosong?

Q2

Mesej commit berkata "tukar nama variable, tiada perubahan tingkah laku". Apakah cara paling boleh dipercayai untuk menyemak dakwaan itu?

Apa yang anda pelajari

  • ---/+++ menamakan fail, header @@ menunjukkan lokasi setiap hunk, -/+/ruang menandakan baris dibuang/ditambah/context.
  • Bagi setiap baris yang dibuang, cari ke mana perginya tingkah lakunya.
  • Semak dakwaan mesej commit berbanding diff — dan minta commit berasingan untuk tukar nama dan logik.
Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.

Langkah 1 daripada 2