Halo semuanya,

Kami semua menggunakan JS dan komponennya saat mengembangkan produk kami di setiap bagian. Terkadang, beberapa kode javascript mungkin sangat rumit dan panjang. Dalam situasi serupa, kita memerlukan kode yang lebih ramping, fleksibel, dan efisien.

Jadi, jika Anda membuat kode pada javascript atau komponen lainnya, Anda harus berpikir untuk menulis kode Anda seperti sebuah produk. Baiklah, ‘Seperti apa tulisan sebuah produk?’ mari kita jawab pertanyaan-pertanyaan ini. Setiap pengembang telah menggunakan komponen jQuery ketika mengembangkan produk setidaknya untuk beberapa bagian kehidupan mereka. Jadi, kita semua mengetahui komponen seperti 'pemilih tanggal' atau 'pemilih warna' dll. Perbedaan antara komponen ini dan kode javascript normal lainnya adalah siapa pun dapat menggunakan komponen ini atau mengembangkan kode mereka pada komponen ini. Jadi, apa yang ingin saya katakan? Komponen-komponen ini berisi beberapa konfigurasi atau opsi untuk menggunakannya. Mereka tidak muncul hanya pada 2–3 fungsi. Selain itu, jika Anda memerlukan konfigurasi di dalamnya, Anda dapat menulis kode untuk komponen ini. Pada dasarnya, ada 4 cara untuk menulis kode javascript Anda. Mari kita analisa cara-cara ini dari dasar hingga lanjutan.

Berikut cerita tentang contoh kita: Anggap saja kita ingin mengatakan 'Halo, Dunia' setelah tindakan memuat halaman atau memanipulasi beberapa HTML.

Cara Pertama

OurLayoutPage.xxx

<script type="text/javascript"> 
  $(document).ready(function() {
     alert(‘Hello, world!’);
  });
</script>

Jadi, cara ini sangat sederhana. Ada halaman di aplikasi Anda, dan Anda sedang menulis beberapa kode untuk mengatakan 'Halo, Dunia' di tata letak Anda. Anda tidak menggunakan file atau fungsi javascript apa pun untuk melakukan ini. Seperti yang Anda lihat, cara ini tidak berguna, ini statis. Jika Anda sedang mengembangkan aplikasi berskala besar atau jika Anda memerlukan fungsi yang lebih fleksibel, cara ini kurang cocok untuk Anda 😁.

Cara Kedua

OurLayoutPage.xxx

<script type="text/javascript" src="/someFolder/ourJavascripCode.js"></script>

JavascriptCode.js kami

function firstFunction(param) {
  alert(param);
}
$(document).ready(function() {
  firstFunction("Hello, world!")
});

Kami menggunakan fungsi di 'Second Way'. Jadi, jika kita perlu menggunakan ''firstFunction'' lebih dari satu waktu atau tempat berbeda dan kita mengubah fitur fungsinya, kita tidak perlu mengubah semua tempat, Anda cukup mengubah fitur fungsinya saja, dengan cara ini, semua perubahan diterapkan untuk semua tempat. Hal ini hanyalah S.O.L.I.D. konsep. Mari kita buat lebih rumit lagi

Cara Ketiga

OurLayoutPage.xxx

<script type="text/javascript" src="/someFolder/ourJavascripCode.js"></script>

JavascriptCode.js kami

var jsConfig = {
mode:"Debug",
  version:"1.0.0",
  targetObjAttr:"web-target-attr",
  targetObjAttrValue:"web-target",
  targetFunction:"firstFunction",
  properties:{
    style=[
        {
          attr:"font-size",
          value:14
        },
        {
          attr:"font-size",
          value:14
        }
     ]
  }
}
function firstFunction(param) {
  var style;
  var el =     $(["+mode.targetObjAttr+"='"+mode.targetObjAttrValue+"']");
  $(el).text(param);
  $(mode.properties).each(function(i,property){
    style+=property.attr+":"+property.value+";";
  });
  $(el).style(style);
}
$(document).ready(function() {
  firstFunction("Hello, world!")
});

Seperti yang Anda lihat, ada lebih banyak kode menurut yang pertama 😁. Pada dasarnya perbedaan antara 'Second Way' dan 'Third Way' adalah variabel 'jsConfig'. Jadi, kami menggunakan variabel config untuk menerapkan perubahan. Kami telah memutuskan 'elemen mana yang dapat dimanipulasi', 'fungsi mana yang akan kami gunakan untuk operasi ini' dan 'peraturan mana yang kami perlukan'. Ada poin penting di sini, kami menggunakan semua fungsi dinamis. Tidak ada nilai statis apa pun. Kapan pun Anda mau, Anda dapat mengubah elemen mana yang dapat dimanipulasi atau nilai atribut mana yang sama dengan nilai elemen yang dimanipulasi. Selain itu, kami melacak mode fungsi 'debug' atau 'rilis' dan jika Anda mau, Anda dapat mengubah tindakan fungsi dengan nilai ini. Hal yang sama berlaku untuk 'versi kode/aplikasi'. Ini sedikit Js fungsional 😁

Nah, 'cara' yang terakhir ini menjadi topik blog kita selanjutnya karena sedikit lebih kompleks dan perlu dipelajari secara detail dibandingkan 'cara' lainnya 😁. Sekarang Anda punya ide 'Seperti apa coding sebuah produk?' 😁. Terima kasih telah membaca, Nikmati perkembangan Anda 😁

  • JS fungsional dengan proyek contoh di Github — 1
  • JS fungsional dengan proyek lanjutan di Github— 2