جاوا اسکریپت خالص بهتر است یا جی کوئری؟ | راهنمای کاربردی
در طی سالهای اخیر صنعت نرمافزار مسیر ترجیح جاوا اسکریپت خالص را بر استفاده از کتابخانههای خارجی پیموده است. در این مقاله بررسی میکنیم که جاوا اسکریپت خالص چه تفاوتی با جی کوئری دارد و استفاده از هر کدام چه مزایا و معایبی دارند. «جی کوئری» (jQuery) یک کتابخانه سبک و با استفاده آسان جاوا اسکریپت است که به ایجاد کارکردهای پیچیده با تنها چند خط کدنویسی کمک میکند.
کدنویسی جی کوئری کوتاهتر است و در اغلب موارد سادهتر از معادل جاوا اسکریپت خالص خود محسوب میشود. از این رو باید پرسید چرا بسیاری از توسعهدهندگان تلاش میکنند از این کتابخانه دور باشند و بیشتر از جاوا اسکریپت خالص استفاده کنند؟ در ادامه این مقاله به مقایسه جاوا اسکریپت و جی کوئری از طریق فید کردن یک عنصر روی صفحه وب میپردازیم. سپس مهمترین مزیتها و معایب جی کوئری را بر میشمریم. در نهایت ارسال فرم AJAX را با جی کوئری معرفی کرده و آن را با ارسال فرم AJAX از طریق جاوا اسکریپت خالص مقایسه خواهیم کرد.
فید کردن یک عنصر در جاوا اسکریپت و جی کوئری
جی کوئری کتابخانهای است که سطح بالایی از تجرید را ارائه میکند و موجب شده که استفاده آسانی داشته باشد، اما فرصتهای یادگیری مختلفی را از کاربر میگیرد.
به مثال کوچک زیر توجه کنید که در آن جاوا اسکریپت خالص را با جی کوئری از طریق فید کردن یک عنصر صفحه وب مقایسه کردهایم. ابتدا به بررسی جاوا اسکریپت خالص میپردازیم.
1function fadeIn(el) { // Vanilla JavaScript
2 el.style.opacity = 0;
3 var last = +new Date();
4 var tick = function() {
5 el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
6 last = +new Date();
7 if (+el.style.opacity < 1) {
8 (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
9 }
10 };
11 tick();
12}
13fadeIn(el); // calling the above function
معادل جی کوئری کد فوق به صورت زیر است:
1$(el).fadeIn();
چنان که از این مقایسهی کاملاً گویا مشخص است، کتابخانه جی کوئری شامل برخی تابعهای پیشساخته برای کارهایی مانند دستکاری DOM، انیمیشن یا اجرای ناهمگام (AJAX) است که استفاده مکرر دارند.
مزایا و معایب جی کوئری
در این بخش تلاش میکنیم یک جمعبندی از مزایا و معایب جی کوئری داشته باشیم.
مزیتهای جی کوئری
- بهترین بخش جی کوئری این است که در برابر مرورگرها دارای انعطافپذیری است. معنی این حرف آن است که جی کوئری با همه مرورگرهای موجود سازگار است، از این رو توسعهدهندگان هیچ نگرانی در مورد مرورگری که کاربر ممکن است مورد استفاده قرار دهد نخواهند داشت. با این حال، این روزها اغلب مرورگرها از همین کارکرد در جاوا اسکریپت خالص نیز پشتیبانی میکنند.
- نوشتن خطوط کد کم و تجرید بالا موجب میشود که استفاده از جی کوئری برای افرادی که با شیوه استفاده از جاوا اسکریپت آشنا نیستند، آسان باشد. بدین ترتیب بسیاری از افراد در آغاز توسعه وب با جاوا اسکریپت آشنا نیستند و شاید هرگز هم آشنا نشوند. دلیل استفاده از جی کوئری برای این افراد آن است که کاربرپسندی بیشتری دارد و به طور خاص برای افراد مبتدی مناسب است.
معایب جی کوئری
- جاوا اسکریپت خالص بسیار سریعتر از جی کوئری است. جاوا اسکریپت خالص نسبت به جی کوئری بسته به عملیاتی که اجرا میشود، بین 10 تا 25 برابر سریعتر است.
- سطح بالای تجرید در جی کوئری به این معنی است که لازم نیست موارد زیادی را بیاموزید. این بدان معنی است که شما در مرحله یک فرد مبتدی که از جی کوئری برای رفع نیازهای خود استفاده میکند، گیر میکنید و همیشه یک مبتدی میمانید.
- کتابخانه جی کوئری باید در همه صفحههای وب HTML گنجانده شود.
برای این که به تفاوت ماهوی دو روش استفاده از جی کوئری و جاوا اسکریپت خالص بهتر آشنا شوید، دو مثال را در ادامه ارائه کردهایم.
ارسال فرم با جی کوئری
1$('#contact-form-button').click(function(event){
2 event.preventDefault(); // prevent default submit event that would automatically reload webpage
3
4 // initalizing variables
5 const form = $('#contact-form');
6 const url = form.prop('action'); // the url to redirect to "/contact"
7 const type = form.prop('method'); // the method "POST" or "GET"
8 const data = new FormData(form); // formData object with all key ("id" attribute)-value("user input") pairs
9
10 $.ajax({
11 url: url,
12 type: type,
13 data: formData,
14 processData: false,
15 contentType: false,
16 beforeSend: function() {
17 // show the preloader (progress bar)
18 $('#form-response').html("<div class='progress'><div class='indeterminate'></div></div>");
19 },
20 complete: function () {
21 // hide the preloader (progress bar)
22 $('#form-response').html("");
23 },
24 success: function ( response ){
25 // object has been returned from backend
26 // object contains key-value pairs in an object
27 // these keys 'feedback' and 'content' are set in the backend
28
29 if ( !$.trim( response.feedback )) { // empty response from backend
30 error_msg = "An empty response was returned.";
31 }
32 else { // non-empty response
33 error_msg = response.feedback;
34
35 // load content by
36 $('#form-content').html(response.content);
37 }
38 },
39 error: function(xhr) { // an error occured
40 // logging the error
41 console.log("error. see details below.");
42 console.log(xhr.status + ": " + xhr.responseText);
43
44 // returning user-feedback
45 error_msg = "An error occured";
46 },
47 }).done(function() {
48 // this part is always executed, even when the AJAX request was not succesfull
49 $('#form-response').append(error_msg);
50 });
51};
52
53// Flask's way of adding a csrf token to the AJAX request
54var csrf_token = "{{ csrf_token() }}";
55
56// set the CRSF token in the request headers
57$.ajaxSetup({
58 beforeSend: function(xhr, settings) {
59 if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
60 xhr.setRequestHeader("X-CSRFToken", csrf_token);
61 }
62 }
63});
ارسال فرم با جاوا اسکریپت خالص
1document.body.addEventListener( 'click', function (event) {
2 event.preventDefault(); // prevent default submit event that would automatically reload webpage
3
4 // initializing variables
5 const form = event.target.form; // get the form
6 const data = new FormData(form); // formData object with all key ("id" attribute)-value("user input") pairs
7
8 const request = new XMLHttpRequest();
9 request.open(form.method, form.action, true);
10 request.send(data);
11
12 request.addEventListener("load", function () {
13
14 const messages = document.getElementById("messages-list");
15
16 if (this.readyState === 4 && this.status === 200) {
17
18 // catch JsonResponse from backend
19 const response = JSON.parse(this.responseText);
20
21 // display user-feedback
22 messages.innerHTML += response.feedback; // append message to HTML content
23
24 // load content by
25 const element = document.getElementById("form-content");
26 const section = element.parentNode; // get parent HTML content
27 section.removeChild(element); // delete child HTML content
28 section.innerHTML = response.content; // paste response HTML content
29 }
30 else { // error occurred
31 // logging the error
32 console.log("error. see details below.");
33 console.log(xhr.status + ": " + xhr.responseText);
34
35 // display user-feedback
36 messages.innerHTML += "An error occured, please try again.";
37 }
38 }
39});
سخن پایانی
بدین ترتیب به پایان این مقاله با موضوع مقایسه جاوا اسکریپت خالص با جی کوئری رسیدیم. امیدواریم با مطالعه این مقاله با مزایا و معایب کتابخانه جی کوئری آشنا شده و در مورد استفاده یا عدم استفاده از آن در پروژههای خود تصمیمگیری کرده باشید.