Apakah ada cara mudah untuk mengubah kode jquery menjadi javascript? [Tutup]

144

Apakah ada cara mudah untuk mengubah kode jQuery menjadi javascript biasa? Saya kira tanpa harus mengakses atau memahami kode sumber jQuery.

javascript jquery code-conversion davidsleeps
sumber
8
saya pada dasarnya mencari sesuatu yang mengubah 1 baris jquery menjadi 10 baris vanilla javascript ... untuk kasus ketika jquery tidak tersedia ...
davidsleeps
1
Meskipun Anda tidak dapat menggunakan tag skrip untuk menyertakan jQuery, Anda selalu dapat menambahkan verison yang diperkecil ke file sumber. Saya tidak dapat melihat alasan mengapa jQuery tidak akan tersedia selain semacam politik perusahaan.
cdmckay
23
Saya bisa melihat manfaat yang baik untuk ini juga. Suppoe Anda hanya menggunakan sekitar 10-100 baris di javascript dengan jQuery. Ini akan menghemat bandwidth dengan mengkompilasi ulang dan mengganti fungsi ke metode inti dan dengan demikian tidak memuat semua yang lain dari jQuery.
5
Saya mendapat pertanyaan yang sama. Banyak yang menjawab bahwa jQuery lebih sederhana, tetapi seorang developer yang sudah terbiasa dengan JavaScript akan kesulitan memahami simbol / singkatan di jQuery. Dan alasan saya bertanya adalah, untuk beberapa alasan script jQuery yang saya dapatkan tidak akan berfungsi di Blackberry. Ini adalah skrip unggahan Ajax. Jadi saya rasa saya perlu menerjemahkannya ke Javascript :(
1
Saya mencoba membuat JS-kludge di dalam aplikasi yang sudah ada, dan semua fungsi JS bawaan dari jeda aplikasi jika saya menyertakan jQuery. Ini adalah aplikasi yang ditulis dengan buruk (JIRA Atlassian), dan saya yakin mereka yang harus disalahkan, tetapi saya juga membutuhkan ini.
chadoh

Jawaban:

43

Cara termudah adalah dengan hanya mempelajari cara melakukan traverse dan manipulasi DOM dengan api DOM biasa (Anda mungkin akan menyebutnya: JavaScript normal).

Namun ini bisa menyebalkan untuk beberapa hal. (itulah sebabnya perpustakaan diciptakan sejak awal).

Googling untuk "javascript DOM traversing / manipulation" akan memberi Anda banyak sumber daya yang berguna (dan beberapa kurang membantu).

Artikel-artikel di situs web ini cukup bagus: http://www.htmlgoodies.com/primers/jsp/

Dan seperti yang ditunjukkan Nosredna di komentar: pastikan untuk menguji di semua browser, karena sekarang jQuery tidak akan menangani ketidakkonsistenan untuk Anda.

Pim Jager
sumber
4
Dan Anda harus yakin untuk menguji berbagai versi dari setiap browser.
Nosredna
1
Bagaimana pilihan stasiun kerja desktop memengaruhi penggunaan jQuery?
Dan Davies Brackett
5
Saya bersimpati dengan politik penggunaan perpustakaan sumber terbuka untuk beberapa organisasi. Pada akhirnya, waktu yang Anda habiskan untuk menulis ulang dengan jelas (dan kemungkinan besar bermasalah) menjadi traversal DOM biasa dan JS adalah uang yang terbuang percuma bagi perusahaan. Anda mungkin membuat kasus bahwa perusahaan besar, termasuk yang sangat konservatif, menggunakan jQuery: docs.jquery.com/Sites_Using_jQuery : Oracle, Google, Amazon, Dell, Bank of America, Intuit, Salesforce. Ini bukanlah perusahaan komunis hippie. Ini adalah perusahaan yang sangat nyata yang departemen hukumnya mungkin telah menyelesaikan pekerjaan rumah mereka dan menerima jQuery ...
artlung
2
@davidsleeps - jQuery disetujui oleh Microsoft ... Ini termasuk dalam Visual Studio 2008, yang secara teknis menjadikannya alat "Microsoft". Apakah itu akan membuat atasan Anda merasa lebih baik?
Robert Harvey
4
Apa perbedaan bagi perusahaan Anda antara jquery dan sejumlah besar javascript yang Anda tulis untuk melakukan hal yang sama? Ini tidak seperti Anda menginstal apa pun, membuat kode dalam bahasa baru atau menambahkan ketergantungan APA PUN. Sejujurnya ini adalah hal terbodoh yang pernah saya dengar, mengizinkan javascript tetapi tidak jQuery. jQuery ADALAH JAVASCRIPT!
micmcg
63

Ini akan membuat Anda 90% jalan ke sana; )

window.$ = document.querySelectorAll.bind(document)

Untuk Ajax, Fetch API sekarang didukung pada versi terkini dari setiap browser utama . Sebab $.ready(), hampirDOMContentLoaded memiliki dukungan universal . Anda Mungkin Tidak Perlu jQuery memberikan metode asli yang setara untuk fungsi jQuery umum lainnya.

Zepto menawarkan fungsionalitas serupa tetapi berbobot 10K ritsleting. Ada build Ajax khusus untuk jQuery dan Zepto serta beberapa kerangka kerja mikro , tetapi jQuery / Zepto memiliki dukungan yang solid dan 10KB hanya ~ 1 detik pada modem 56K.

Memanjakan
sumber
25

Saya baru saja menemukan tutorial yang cukup mengesankan tentang konversi jquery ke javascript dari Jeffrey Way pada 19 Jan 2012 *Copyright © 2014 Envato* :

http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/

Suka atau tidak suka, semakin banyak developer yang diperkenalkan ke dunia JavaScript melalui jQuery terlebih dahulu. Dalam banyak hal, para pendatang baru ini adalah yang beruntung. Mereka memiliki akses ke sejumlah besar API JavaScript baru, yang membuat proses traversal DOM (sesuatu yang banyak orang bergantung pada jQuery) jauh lebih mudah. Sayangnya, mereka tidak tahu tentang API ini!

Dalam artikel ini, kita akan mengambil berbagai tugas jQuery umum, dan mengonversinya menjadi JavaScript modern dan lama.

Saya mengusulkannya dalam komentar ke OP, dan setelah sarannya, saya mempublikasikannya memiliki jawaban untuk dirujuk semua orang.

Juga, Jeffrey Way menyebutkan tentang penyihir inspirasinya tampaknya menjadi dasar yang baik untuk pemahaman: http://sharedfil.es/js-48hIfQE4XK.html

Punya teaser, ini dokumen perbandingan jQuery dengan javascript:

$(document).ready(function() {
  // code…
});


document.addEventListener("DOMContentLoaded", function() {
  // code…
});

$("a").click(function() {
  // code…
})


[].forEach.call(document.querySelectorAll("a"), function(el) {
  el.addEventListener("click", function() {
    // code…
  });
});

Anda harus melihatnya.

Milche Patern
sumber
6

Apakah ada cara mudah untuk mengubah kode jQuery menjadi javascript biasa?

Tidak, terutama jika:

Sulit memahami contoh solusi javascript yang ditulis dalam jQuery.

JQuery dan semua kerangka kerja cenderung membuat pemahaman kode lebih mudah. Jika itu sulit dimengerti, maka vanilla javascript akan menyiksa :)

Ryan Florence
sumber
16
yang lain memiliki jawaban yang sebenarnya
ftrotter
2
Selain itu, meskipun JQuery membuat kode lebih ringkas (biasanya), masih diperdebatkan apakah itu benar-benar membuatnya lebih mudah . jQuery dapat membuat beberapa kode lebih sulit untuk diurai secara mental. Misalnya, <input onclick="myfunction(this)">dengan myfunction(field){ field.value = "3"; }lebih masuk akal bagi saya daripada<input id='thing'> dengan(function ($) { $(thing).click({ $(thing).val("3");});})()
liljoshu
6

Saya dapat melihat alasan, yang tidak terkait dengan postingan asli, untuk secara otomatis mengkompilasi kode jQuery ke dalam JavaScript standar:

16k - atau apa pun pustaka jQuery yang dikecilkan dan di-gzip - mungkin terlalu berlebihan untuk situs web Anda yang ditujukan untuk peramban seluler. W3c merekomendasikan bahwa semua permintaan HTTP untuk situs web seluler harus maksimal 20k.

spesifikasi w3c untuk seluler

Jadi saya menikmati coding di jQuery saya yang bagus, singkat, dan dirantai. Tapi sekarang saya perlu mengoptimalkan untuk seluler. Haruskah saya benar-benar kembali dan melakukan pekerjaan yang sulit dan membosankan untuk menulis ulang semua fungsi pembantu yang saya gunakan di perpustakaan jQuery? Atau adakah aplikasi praktis yang akan membantu saya mengompilasi ulang?

Itu akan sangat manis. Sayangnya, saya tidak berpikir hal seperti itu ada.


sumber