Media Pengembangan Web & App | by APPKEY

Pembuatan Website Front end 5 Hal Yang Harus Anda Hentikan Saat Mengembangkan FrontEnd...

5 Hal Yang Harus Anda Hentikan Saat Mengembangkan FrontEnd dengan Kode Jquery

-

Mengembangkan frontend dengan kode JQuery temasuk menjadi salah satu yang diinginkan setiap pengembang. Terutama ketika mampu menguasainya. Pengembangan suatu website bukanlah lagi menjadi hal yang sulit.

Berikut 5 hal yang harus Anda pikirkan ulang ketika mengembangkan dengan kode JQuery

1. Berhenti Menggunakan Ready Document

jquery-2

Kembali ke masa kerangka server yang berat, mengetahui bahwa halaman Anda sepenuhnya dibuat sebelum Anda mencoba mengubahnya adalah masalah besar. Hal ini terutama berlaku jika Anda menggunakan tampilan parsial dari beberapa jenis tampilan yang dimasukkan ke dalam tata letak/halaman master oleh server pada waktu proses.

Saat ini, dianggap praktik terbaik untuk menyertakan skrip Anda di bagian bawah halaman. Terlepas dari atribut async HTML5, skrip dimuat dan dijalankan secara sinkron oleh browser. Artinya, jika Anda memiliki skrip besar di kepala halaman, itu akan menunda pemuatan DOM dan membuat halaman Anda tampak lebih lambat dari yang sebenarnya.

Memuat semua skrip terakhir setidaknya akan membuat aplikasi Anda tampak memuat lebih cepat. Ini juga memberi Anda kesempatan untuk menggunakan spinner atau memuat overlay jika Anda sepenuhnya bergantung pada JavaScript untuk UI Anda.

Jika Anda mengikuti praktik terbaik “skrip di bagian bawah”, maka Anda tidak memerlukan fungsi ready dokumen kode  jQuery karena HTML sudah dimuat pada saat skrip dijalankan.

<p id="zack">This element is on the page <strong>BEFORE</strong> all the scripts. No document ready needed.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
// if you include your scripts at the very bottom, you don't need document ready
(function($) {
$("#zack").css("color", "green");
$("#slator").css("color", "red");
}(jQuery));
</script>
<p id="slater">This element comes after the scripts and won't be available.</p>

2. Berhenti Menggunakan Iterator yang Salah

Kami tidak punya bukti kuat untuk mendukung ini, tetapi kami menebak bahwa setiap fungsi adalah yang paling banyak digunakan dari metode utilitas kode jQuery. Kami mendasarkan ini pada seberapa sering saya tergoda untuk menggunakannya dan seberapa sering terlihat pada kode orang lain.

Sangat nyaman untuk mengulang elemen DOM dan koleksi JavaScript. Ini juga singkat. Tidak ada yang salah dengan itu, kecuali itu bukan satu-satunya fungsi iterasi yang disediakan kode jQuery. Orang-orang menggunakan masing-masing seperti Zack Morris, di mana setiap masalah pengulangan mulai terlihat seperti Kelly Kapowski.

PETA

Jika Anda memiliki larik item dan ingin mengulanginya serta memfilter beberapa item, Anda mungkin tergoda untuk menggunakan setiap metode seperti ini:

(function($) {
var allStarCast = [
{ firstName: "Zack", lastName: "Morris" },
{ firstName: "Kelly", lastName: "Kapowski" },
{ firstName: "Lisa", lastName: "Turtle" },
{ firstName: "Screech", lastName: "Powers" },
{ firstName: "A.C.", lastName: "Slater" },
{ firstName: "Jessie", lastName: "Spano" },
{ firstName: "Richard", lastName: "Belding" }

// iterate through the cast and find zack and kelly
var worldsCutestCouple = [];
$.each(allStarCast, function(idx, actor) {
if (actor.firstName === "Zack" || actor.firstName === "Kelly") {
worldsCutestCouple.push(actor);
});
console.log(worldsCutestCouple);
}(jQuery));

Itu berfungsi, tetapi kode jQuery sebenarnya menyediakan metode khusus untuk skenario ini dan itu disebut peta. Apa yang dilakukannya adalah mengambil item apa pun yang dikembalikan dan menambahkannya ke array baru. Kode perulangan kemudian terlihat seperti ini…

(function($)
var allStarCast = [
{ firstName: "Zack", lastName: "Morris" },
{ firstName: "Kelly", lastName: "Kapowski" },
{ firstName: "Lisa", lastName: "Turtle" },
{ firstName: "Screech", lastName: "Powers" },
{ firstName: "A.C.", lastName: "Slater" },
{ firstName: "Jessie", lastName: "Spano" },
{ firstName: "Richard", lastName: "Belding" }
// iterate through the cast and find zack and kelly
var worldsCutestCouple = $.map(allStarCast, function(actor, idx) {
if (actor.firstName === "Zack" || actor.firstName === "Kelly") {
return actor;
}
});
console.log(worldsCutestCouple);
}(jQuery));

Apakah Anda memperhatikan bahwa argumen untuk callback .map () dan callback .each () terbalik? Hati-hati karena itu dapat mengganggu Anda ketika mulai menggunakan peta.

Fungsi peta memungkinkan Anda memodifikasi item sebelum diarahkan ke dalam array baru.

Artikel Terkait  CSS Adalah? Memahami Pengertian, Cara Kerja, dan Penggunaannya dalam Website

GREP

Jika Anda menghabiskan sebagian besar hari Anda di Windows, istilah ini mungkin asing bagi Anda. Istilah ini biasanya digunakan untuk utilitas baris perintah Unix untuk mencari file yang berisi teks yang cocok dengan ekspresi reguler yang diberikan.

Di kode jQuery, grep adalah fungsi yang tujuannya adalah untuk mengurangi koleksi dengan menghapus elemen yang tidak lolos pengujian di callback. Callback yang diberikan mengembalikan nilai boolean. Kembalikan nilai benar jika Anda ingin item tetap ada, dan salah (y) jika tidak. Ini tidak akan mempengaruhi array asli. Anda tidak dapat mengubah item saat Anda menguranginya.
(function($) {
var allStarCast = [
{ firstName: "Zack", lastName: "Morris" },
{ firstName: "Kelly", lastName: "Kapowski" },
{ firstName: "Lisa", lastName: "Turtle" },
{ firstName: "Screech", lastName: "Powers" },
{ firstName: "A.C.", lastName: "Slater" },
{ firstName: "Jessie", lastName: "Spano" },
{ firstName: "Richard", lastName: "Belding" }
// iterate through the cast and find zack and kelly
var worldsCutestCouple = $.grep(allStarCast, function(actor) {
return (actor.firstName === "Zack" || actor.firstName === "Kelly");
});
console.log(worldsCutestCouple);
}(jQuery));

3. Berhenti Menggunakan “ini”

jquery-3

Ini bukan masalah kode jQuery, tetapi jQuery pasti dapat memperburuk masalah. Konteks “ini” selalu berubah. jQuery terkadang mengubah konteks menjadi sesuatu yang mungkin tidak Anda harapkan. Di setiap callback, ini adalah item atau elemen saat ini dalam koleksi.

Dalam fungsi peta, itu adalah objek jendela. Anda dapat melihat bagaimana Anda bisa menjadi bingung dengan cukup cepat.

Lihatlah contoh berikut dan kemudian kita akan membahas mengapa itu meledak.

(function($)
var sbtb = {
log: function(message) {
$("#log").append("").html(message);
},
cast: [
{ firstName: "Zack", lastName: "Morris", soExcited: false },
{ firstName: "Kelly", lastName: "Kapowski", soExcited: true },
{ firstName: "Lisa", lastName: "Turtle", soExcited: true },
{ firstName: "Screech", lastName: "Powers", soExcited: false },
{ firstName: "A.C.", lastName: "Slater", soExcited: false },
{ firstName: "Jessie", lastName: "Spano", soExcited: true },
{ firstName: "Richard", lastName: "Belding", soExcited: false }
],
soExcited: function() {
// use "this" to get a reference to the cast on this object
$.each(this.cast, function(idx, actor) {
// call the log function
this.log(actor.firstName + " " + actor.lastName); // BOOM! Splosions.
// "this" is now a cheesy actor, not the sbtb object anymore
sbtb.soExcited();
}(jQuery));

Karena jQuery mengubah ruang lingkup untuk Anda dalam loop ini, ada baiknya untuk menyimpan referensi  ini di suatu tempat sehingga Anda tahu itu tidak akan berubah pada Anda.

(function($)
var sbtb = {
log: function(message) {
$("#log").append("
").append(message);
},
cast: [
{ firstName: "Zack", lastName: "Morris", isExcited: false },
{ firstName: "Kelly", lastName: "Kapowski", isExcited: true },
{ firstName: "Lisa", lastName: "Turtle", isExcited: true },
{ firstName: "Screech", lastName: "Powers", isExcited: false },
{ firstName: "A.C.", lastName: "Slater", isExcited: false },
{ firstName: "Jessie", lastName: "Spano", isExcited: true },
{ firstName: "Richard", lastName: "Belding", isExcited: false }
soExcited: function() {
// store this in that so we don't get confused later on when
// our the context of "this" changes out from underneath us
var that = this;
// use "that" to get a reference to the cast on this object
$.each(that.cast, function(idx, actor) {
// call the log function
if (actor.isExcited) {
that.log(actor.firstName + " " + actor.lastName);
// the value of "that" doesn't change - it's still the object
}
});
}
};
sbtb.soExcited();
}(jQuery));

4. Berhenti Menggunakan SEMUA JQUERIES

jQuery terus bertambah ukurannya, Ini wajar jika fungsionalitas baru ditambahkan. Meskipun ukurannya terus berkurang sejak 1.8.3, hal ini menimbulkan kecaman dari komunitas yang mengklaimnya “tidak cocok” untuk pengembangan seluler karena massanya yang besar.

Namun, kode jQuery bukan lagi pustaka semua atau tidak sama sekali. jQuery sekarang mendukung pembuatan kustom. Kami tahu sangat menggoda untuk menggunakan jQuery CDN dan terus berjalan, tetapi penting untuk memikirkan semua kode yang Anda minta pengguna Anda untuk mendownload yang mungkin tidak mereka butuhkan.

Bukan masalah besar di desktop, tetapi bit menjadi sangat berharga di perangkat seluler, dan tidak ada gunanya mengirimkan banyak kode untuk mendukung browser lama jika aplikasi Anda adalah aplikasi seluler.

Anda punya dua pilihan di sini. Anda dapat menuju ke situs GitHub dan membuat bangunan khusus dengan Git. Ini sebenarnya sangat mudah dan saya tidak punya masalah untuk membuatnya bekerja.

Artikel Terkait  Inilah 6 Properti CSS yang Belum Banyak Dikenal Developer

5. Berhenti Menggunakan jQuery…

… Bila Anda tidak perlu.

DOKUMEN.QUERYSELECTOR

Jika Anda menggunakan setidaknya IE versi 8 dan yang lebih baru, Anda dapat memetakan $ ke document.querySelector, yang akan mengembalikan Anda elemen pertama yang cocok dari selektor. Anda dapat meneruskan pemilih CSS apa pun ke fungsi tersebut.

Perhatikan bahwa IE 8 hanya mendukung pemilih CSS 2.1 untuk querySelector.

<div class="container">
<ul>
<li id="pink">Pink</li>
<li id="salmon">Salmon</li>
<li id="blue">Blue</li>
<li id="green">Green</li>
<li id="red">Red</li>
</ul>
</div>
<script>
// create a global '

DOKUMEN.QUERYSELECTORALL

Trik yang rapi adalah memetakan $ ke querySelector (1 hasil) dan memetakan $$ ke querySelectorAll yang akan memberi Anda semua elemen DOM yang cocok. Bagian yang sulit dari ini adalah querySelectorAll mengembalikan daftar node yang tidak terlalu membantu.

Anda mungkin akan membutuhkan ini sebagai array yang dapat Anda potong. Anda dapat mengubah daftar node menjadi array dengan menggunakan Array.prototype.slice.call (nodeList).

Perhatikan bahwa mengonversi nodeList ke array tidak didukung di IE 8 dan di bawahnya.Pada titik ini Anda mungkin berpikir untuk diri sendiri, “Banyak sekali JavaScript yang harus ditulis ketika saya bisa menyertakan kode jQuery bro,” dan itu adil.

Ini tidak diragukan lagi dapat dikurangi, tetapi jQuery menempatkan begitu banyak kemudahan pada objek dan koleksi sehingga ketika Anda mulai bergulir tanpanya, Anda melihat jenis kode yang diperlukan untuk membuat ulang hanya sebagian kecil dan implementasi ini bahkan tidak mendukung IE 8 dan di bawahnya atau browser Blackberry. Bergantung pada apa yang perlu dilakukan aplikasi Anda, itu bisa menjadi kode yang jauh lebih sedikit daripada menyertakan jQuery.

Berhenti Membaca Artikel Yang Memberitahu Anda Untuk Berhenti Melakukan Sesuatu

Hal ini untuk menggarisbawahi poin bahwa ini adalah saran, bukan aturan hukum yang mutlak. Ada seribu cara untuk membantah dan atau membenarkan salah satu item ini.

Ini hanya untuk membuat Anda berpikir tentang bagaimana Anda menggunakan kode  jQuery dan bagaimana Anda mungkin dapat melakukannya dengan lebih baik daripada yang Anda lakukan sekarang. Jadi nikmati jQuery, berbahagialah, dan tetaplah di sekolah.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Domain Google? Apa Bedanya Dengan Domain Biasa?

Saat memutuskan untuk membuat website menjadi salah satu bentuk media digital marketing Anda dalam bersaing di zaman digital ini,...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya