Antipattern pohon Natal

Anti-pola, atau sekadar contoh kode yang tidak efektif, bisa menjadi kontributor yang sangat berbahaya, bahkan dalam kode sumber pengembang berpengalaman. Terkadang ini adalah konsekuensi dari menetapkan tugas atau tenggat waktu yang sangat ketat, terkadang kurangnya perhatian gagal.

Pada artikel ini saya akan memberi tahu Anda tentang desain pohon Natal antipattern. Inti dari anti-pola ini terletak pada kenyataan bahwa dalam beberapa kasus, pendekatan imperatif mempengaruhi teks sumber jauh lebih sulit untuk dipahami dan dipertahankan. Satu komplikasi memicu komplikasi berikutnya, dan seterusnya, hingga kami menyadari bahwa menulis ulang semuanya dari awal lebih mudah.

Saya menemukan anti-pola ini menarik karena Anda bisa mendapatkannya tidak hanya dengan satu perubahan, tetapi dengan seluruh rantai perbaikan yang terkait dengan pengembangan kode. Dan ya, Anda mengerti dengan benar, kami meyakinkan diri kami sendiri dan pelanggan bahwa kodenya semakin baik, tetapi pada akhirnya kami mendapatkan pohon Natal. Untuk lebih memahami hal ini, pertimbangkan serangkaian tugas, dari yang sederhana hingga yang rumit, dan coba lacak jalannya penilaian yang mengarah ke kode yang tidak efektif.

Kelahiran masalah

Bayangkan ada komponen sederhana yang menampilkan angka tertentu - "Counter"

const Counter = ({ value }) => {
	return <div>{ value }</div>;
};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

"Counter" tidak boleh diartikan secara harfiah. Ini hanyalah model yang disederhanakan untuk membandingkan esensi masalah.

Kami menerima tugas untuk membuatnya lebih fungsional, katakanlah, setelah angka, untuk menempatkan unit pengukuran - digits



. Komponennya sekarang terlihat seperti ini:

const Counter = ({ value, digits }) => {
	return <div>{ `${value} ${digits}` }</div>
};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , : 10 ()



. , :

const Counter = ({ value, digits, type }) => {
	const temp = type ? `(${digits})` : digits;
	return <div>{ `${value} ${temp}` }</div>
};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . , «Counter» , . . , — a



, b



c



, y



- f(a, b, c)



, .

, « ». , , . , . , , a * b



. , a + b.

«Counter» , (digits



type



) , . . a * b



, . , , :

, digits



, value



, , a



, . , , . . type



.

... . , , , , .

, , digits



, , , «Counter» . , ...

?

, «Counter» . , , , . digits



type



, b' = f(b)



. :

const getCoveredDigits = (digits) => `(${digits})`;

<Counter
  value={value}
  digits={getCoveredDigits(digits)}
/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, :

, f(b)



, . , «Counter».

Tentu saja, saat menerapkan "Counter" kami sengaja membuat beberapa kesalahan yang sering luput dari perhatian dalam produksi nyata. Meskipun tidak ada model komponen yang ideal, tetapi dengan dekomposisi yang lebih menguntungkan, jumlah teks sumber dapat dikurangi dan, sebagai hasilnya, meningkatkan keandalan dan skalabilitas aplikasi mereka secara keseluruhan.