Teknik Pemfaktoran Semula JavaScript yang Penting untuk Kod yang Lebih Bersih dan Cekap

Sebagai pengarang yang paling laris, saya menjemput anda untuk menerokai buku saya di Amazon. Jangan lupa ikuti saya di Medium dan tunjukkan sokongan anda. terima kasih! Sokongan anda bermakna dunia!

Pemfaktoran semula JavaScript ialah kemahiran penting untuk pembangun yang ingin meningkatkan kualiti dan kebolehselenggaraan kod mereka. Memandangkan saya telah mengusahakan banyak projek selama ini, saya mendapati bahawa melaksanakan teknik ini secara konsisten membawa kepada pangkalan kod yang lebih mantap dan cekap.

Pengesanan Bau Kod selalunya merupakan langkah pertama dalam proses pemfaktoran semula. Saya bergantung pada alatan seperti ESLint dan SonarQube untuk mengenal pasti isu yang berpotensi dalam kod saya. Alat ini membantu saya melihat masalah seperti pembolehubah yang tidak digunakan, fungsi kompleks dan penggayaan yang tidak konsisten. Berikut ialah contoh cara saya menyediakan ESLint dalam projek saya:

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    // Custom rules
    'no-unused-vars': 'error',
    'max-len': ['error', { code: 100 }],
    'complexity': ['error', 10],
  },
};

Setelah saya mengenal pasti isu yang berpotensi, saya beralih kepada teknik pemfaktoran semula yang khusus. Kaedah Ekstrak adalah salah satu teknik yang paling biasa dan berkesan yang saya gunakan. Ia melibatkan memecahkan fungsi yang besar dan kompleks kepada yang lebih kecil dan lebih fokus. Ini bukan sahaja meningkatkan kebolehbacaan tetapi juga menjadikan kod lebih boleh digunakan semula dan lebih mudah untuk diuji.

Pertimbangkan contoh fungsi ini yang mengira jumlah harga item dalam troli beli-belah:

function calculateTotalPrice(items) {
  let total = 0;
  for (let item of items) {
    let price = item.price;
    if (item.onSale) {
      price *= 0.9;
    }
    if (item.quantity > 5) {
      price *= 0.95;
    }
    total += price * item.quantity;
  }
  return total;
}

Kita boleh memfaktorkan semula ini menggunakan teknik Kaedah Ekstrak:

function calculateTotalPrice(items) {
  return items.reduce((total, item) => total + calculateItemPrice(item), 0);
}

function calculateItemPrice(item) {
  let price = applyDiscounts(item.price, item);
  return price * item.quantity;
}

function applyDiscounts(price, item) {
  if (item.onSale) price *= 0.9;
  if (item.quantity > 5) price *= 0.95;
  return price;
}

Versi pemfaktoran semula ini lebih mudah dibaca dan membolehkan ujian lebih mudah bagi setiap komponen.

Satu lagi teknik berkuasa yang sering saya gunakan ialah Gantikan Bersyarat dengan Polimorfisme. Pendekatan ini amat berguna apabila berurusan dengan logik bersyarat kompleks yang berbeza-beza berdasarkan jenis objek. Daripada menggunakan pernyataan if-else atau menukar kes, kami boleh menggunakan prinsip berorientasikan objek untuk mencipta penyelesaian yang lebih fleksibel dan boleh diperluaskan.

Berikut ialah contoh cara saya boleh memfaktorkan semula fungsi yang mengira kos penghantaran berdasarkan jenis produk:

// Before refactoring
function calculateShippingCost(product) {
  if (product.type === 'book') {
    return product.weight * 0.5;
  } else if (product.type === 'electronics') {
    return product.weight * 0.8 + 2;
  } else if (product.type === 'clothing') {
    return product.weight * 0.3;
  }
  return product.weight * 0.6; // Default shipping cost
}

// After refactoring
class Product {
  constructor(weight) {
    this.weight = weight;
  }

  calculateShippingCost() {
    return this.weight * 0.6;
  }
}

class Book extends Product {
  calculateShippingCost() {
    return this.weight * 0.5;
  }
}

class Electronics extends Product {
  calculateShippingCost() {
    return this.weight * 0.8 + 2;
  }
}

class Clothing extends Product {
  calculateShippingCost() {
    return this.weight * 0.3;
  }
}

// Usage
const book = new Book(2);
console.log(book.calculateShippingCost()); // 1

const electronics = new Electronics(3);
console.log(electronics.calculateShippingCost()); // 4.4

Pendekatan polimorfik ini memudahkan untuk menambah jenis produk baharu tanpa mengubah suai kod sedia ada, mematuhi Prinsip Terbuka/Tertutup.

Teknik Perkenalkan Objek Parameter amat berguna apabila berurusan dengan fungsi yang mengambil banyak parameter. Dengan mengumpulkan parameter yang berkaitan ke dalam satu objek, kami boleh memudahkan tandatangan fungsi dan menjadikan kod kami lebih mudah diselenggara.

Berikut ialah contoh cara saya boleh memfaktorkan semula fungsi yang mencipta akaun pengguna:

// Before refactoring
function createUser(firstName, lastName, email, password, birthDate, country, city, zipCode) {
  // User creation logic
}

// After refactoring
function createUser(userDetails, address) {
  // User creation logic
}

// Usage
createUser(
  { firstName: 'John', lastName: 'Doe', email: 'john@example.com', password: 'securepass', birthDate: '1990-01-01' },
  { country: 'USA', city: 'New York', zipCode: '10001' }
);

Versi pemfaktoran semula ini bukan sahaja lebih mudah dibaca tetapi juga lebih fleksibel, kerana lebih mudah untuk menambah atau mengalih keluar medan tanpa menukar tandatangan fungsi.

Mengalih keluar Kod Pendua ialah aspek kritikal pemfaktoran semula yang sentiasa saya ingat. Kod pendua boleh menyebabkan ketidakkonsistenan dan menyukarkan penyelenggaraan. Saya sering mengekstrak fungsi biasa ke dalam fungsi atau modul yang dikongsi.

Berikut ialah contoh cara saya boleh memfaktorkan semula kod pendua dalam komponen React:

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    // Custom rules
    'no-unused-vars': 'error',
    'max-len': ['error', { code: 100 }],
    'complexity': ['error', 10],
  },
};

Pemfaktoran semula ini menghapuskan pertindihan dan menjadikan kod lebih boleh diselenggara dan konsisten.

Menamakan Semula Pembolehubah dan Fungsi ialah teknik mudah tetapi berkuasa yang kerap saya gunakan. Nama yang jelas dan deskriptif boleh meningkatkan pemahaman kod dengan ketara dan berfungsi sebagai satu bentuk dokumentasi diri. Saya sentiasa berusaha untuk menggunakan nama yang menerangkan dengan tepat tujuan atau tingkah laku pembolehubah atau fungsi.

Sebagai contoh, bukannya:

function calculateTotalPrice(items) {
  let total = 0;
  for (let item of items) {
    let price = item.price;
    if (item.onSale) {
      price *= 0.9;
    }
    if (item.quantity > 5) {
      price *= 0.95;
    }
    total += price * item.quantity;
  }
  return total;
}

Saya akan memfaktorkan semula kepada:

function calculateTotalPrice(items) {
  return items.reduce((total, item) => total + calculateItemPrice(item), 0);
}

function calculateItemPrice(item) {
  let price = applyDiscounts(item.price, item);
  return price * item.quantity;
}

function applyDiscounts(price, item) {
  if (item.onSale) price *= 0.9;
  if (item.quantity > 5) price *= 0.95;
  return price;
}

Perubahan mudah ini menjadikan tujuan fungsi jelas serta-merta tanpa memerlukan ulasan tambahan.

Akhir sekali, Memudahkan Ungkapan Kompleks ialah teknik yang saya gunakan untuk menjadikan kod saya lebih mudah dibaca dan diselenggara. Memecahkan ungkapan logik yang kompleks kepada bahagian yang lebih kecil dan lebih mudah diurus menggunakan pembolehubah atau fungsi perantaraan boleh meningkatkan kejelasan kod dengan sangat baik.

Berikut ialah contoh cara saya boleh memfaktorkan semula keadaan yang kompleks:

// Before refactoring
function calculateShippingCost(product) {
  if (product.type === 'book') {
    return product.weight * 0.5;
  } else if (product.type === 'electronics') {
    return product.weight * 0.8 + 2;
  } else if (product.type === 'clothing') {
    return product.weight * 0.3;
  }
  return product.weight * 0.6; // Default shipping cost
}

// After refactoring
class Product {
  constructor(weight) {
    this.weight = weight;
  }

  calculateShippingCost() {
    return this.weight * 0.6;
  }
}

class Book extends Product {
  calculateShippingCost() {
    return this.weight * 0.5;
  }
}

class Electronics extends Product {
  calculateShippingCost() {
    return this.weight * 0.8 + 2;
  }
}

class Clothing extends Product {
  calculateShippingCost() {
    return this.weight * 0.3;
  }
}

// Usage
const book = new Book(2);
console.log(book.calculateShippingCost()); // 1

const electronics = new Electronics(3);
console.log(electronics.calculateShippingCost()); // 4.4

Versi pemfaktoran semula ini lebih mudah dibaca dan difahami, dan setiap keadaan boleh diuji secara bebas.

Menurut pengalaman saya, menggunakan teknik pemfaktoran semula ini secara konsisten membawa kepada peningkatan ketara dalam kualiti kod. Ia menghasilkan kod yang lebih mudah difahami, diselenggara dan dilanjutkan. Walau bagaimanapun, adalah penting untuk diingat bahawa pemfaktoran semula adalah proses yang berterusan. Apabila keperluan berubah dan ciri baharu ditambah, kami perlu sentiasa menyemak dan memfaktorkan semula kod kami untuk memastikan ia bersih dan cekap.

Salah satu faedah utama yang saya temui daripada pemfaktoran semula biasa ialah ia menjadikan penambahan ciri baharu atau membetulkan pepijat lebih mudah. Apabila kod berstruktur dengan baik dan mudah difahami, adalah lebih cepat untuk mencari kawasan yang perlu ditukar dan membuat pengubahsuaian yang diperlukan tanpa memperkenalkan pepijat baharu.

Selain itu, pemfaktoran semula selalunya membawa kepada peningkatan prestasi. Dengan memudahkan logik kompleks dan mengalih keluar redundansi, kami selalunya boleh menjadikan kod kami berjalan lebih pantas dan menggunakan sumber yang lebih sedikit. Ini amat penting dalam JavaScript, di mana prestasi boleh memberi kesan yang besar pada pengalaman pengguna, terutamanya dalam persekitaran penyemak imbas.

Satu lagi aspek pemfaktoran semula yang saya dapati amat berharga ialah cara ia memudahkan perkongsian pengetahuan dalam pasukan. Apabila kod bersih dan tersusun dengan baik, lebih mudah untuk pembangun lain memahami dan bekerja dengannya. Ini membawa kepada kerjasama yang lebih baik dan boleh mengurangkan dengan ketara masa yang diperlukan untuk menerima ahli pasukan baharu.

Perlu juga diperhatikan bahawa walaupun teknik ini hebat, teknik ini harus digunakan dengan bijak. Kejuruteraan yang berlebihan boleh menjadi masalah yang sama seperti kejuruteraan di bawah. Matlamatnya adalah untuk mencari keseimbangan yang betul - untuk menjadikan kod semudah dan sejelas mungkin, tetapi tidak lebih mudah.

Kesimpulannya, menguasai teknik pemfaktoran semula JavaScript ini sangat berharga dalam kerjaya saya sebagai pembangun. Mereka telah membantu saya menulis kod yang lebih baik, bekerja dengan lebih cekap dan bekerjasama dengan lebih berkesan dengan pasukan saya. Walaupun kadangkala boleh menggoda untuk tergesa-gesa melalui pembangunan untuk memenuhi tarikh akhir, saya mendapati bahawa meluangkan masa untuk memfaktorkan semula secara berkala membuahkan hasil dalam jangka panjang. Ia membawa kepada pangkalan kod yang lebih teguh dan boleh diselenggara yang boleh menyesuaikan diri dengan keperluan dan skala yang berubah-ubah apabila projek berkembang. Semasa kami terus menolak sempadan perkara yang mungkin dengan JavaScript, teknik pemfaktoran semula ini akan kekal sebagai alat penting dalam setiap kit alat pembangun.

---

101 Buku

101 Buku ialah syarikat penerbitan dipacu AI yang diasaskan bersama oleh pengarang Aarav Joshi. Dengan memanfaatkan teknologi AI termaju, kami memastikan kos penerbitan kami sangat rendah—sesetengah buku berharga serendah $4—menjadikan pengetahuan berkualiti boleh diakses oleh semua orang.

Lihat buku kami Kod Bersih Golang tersedia di Amazon.

Nantikan kemas kini dan berita menarik. Apabila membeli-belah untuk buku, cari Aarav Joshi untuk mencari lebih banyak tajuk kami. Gunakan pautan yang disediakan untuk menikmati diskaun istimewa!

Ciptaan Kami

Pastikan anda melihat ciptaan kami:

Pusat Pelabur | Pelabur Central Spanish | Pelabur Jerman Tengah | Hidup Pintar | Epos & Gema | Misteri Membingungkan | Hindutva | Pembangunan Elit | Sekolah JS

---

Kami berada di Medium

Tech Koala Insights | Dunia Epok & Gema | Medium Pusat Pelabur | Medium Misteri Membingungkan | Sains & Zaman Sederhana | Hindutva Moden

Atas ialah kandungan terperinci Teknik Pemfaktoran Semula JavaScript yang Penting untuk Kod yang Lebih Bersih dan Cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!