جاوااسکریپت خالص بهتر است یا جی‌کوئری؟

در چند سال گذشته، استفاده از جاوااسکریپت ساده به‌جای jQuery افزایش یافته است. جی‌کوئری یکی از کتابخانه‌های سبک زبان JavaScript است که روند یادگیری ساده‌تری نسبت به جاوا اسکریپت دارد. با استفاده از jQuery، می‌توانید عملکردهای پیچیده را تنها با استفاده از چند خط کد انجام دهید. به‌عبارت‌دیگر، یکی از تفاوت‌های مهم بین جی‌کوئری و جاوااسکریپت کوتاه‌تر و ساده‌تر‌بودن کدها در جی‌کوئری است. با‌این‌حال، بسیاری از توسعه‌دهندگان همچنان سعی می‌کنند تا از جاوااسکریپت خالص به‌جای جی‌کوئری استفاده کنند. در این مطلب از بلاگ آکادمی ابرها، می‌خواهیم با مقایسه جاوااسکریپت و جی‌کوئری، دلیل این مسئله را توضیح دهیم؛ پس تا پایان با ما همراه باشید.

ساده و مختصر بودن کدها؛ اولین فرق تفاوت جی‌کوئری و جاوااسکریپت

جی‌کوئری کتابخانه‌ای است که انتزاع فراوانی دارد و همین موضوع استفاده از آن را نیز آسان می‌کند. برای روشن‌تر‌شدن موضوع، به این مثال توجه کنید.

در‌ادامه، کد ساده‌ای از جاوااسکریپت خالص را می‌بینید: 

function fadeIn(el) { // Vanilla JavaScript
  el.style.opacity = 0;
  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();
    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };
  tick();
}
fadeIn(el); // calling the above function

معادل همین کد در کتابخانه جی‌کوئری به‌صورت زیر است:

$(el).fadeIn();

همان‌طور‌که در این مثال نیز مشاهده می‌کنید، کتابخانه jQuery توابع از‌پیش‌نوشته‌شده‌ای دارد که از آن‌ها می‌توان برای اقدامات مختلف مانند اعمال تغییرات در DOM و انیمیشن‌ها یا اجرای ناهم‌زمان (AJAX) استفاده کرد.

مزایا و معایب jQuery

برخی از مزایای jQuery عبارت‌اند از:

۱. انعطاف‌پذیری در انواع مرورگرها

یکی از مزیت‌های اصلی jQuery انعطاف‌پذیری در انواع مرورگرهاست. به‌عبارت‌دیگر، کدهایی که با jQuery می‌نویسید، در تمامی مرورگرهای رایج به‌طورکامل و بدون مشکل اجرا می‌شوند. بدین‌ترتیب، دیگر نیازی نیست تا درباره مرورگری که کاربر از آن استفاده می‌کند، نگرانی داشته باشید. گفتنی است امروزه اکثر مرورگرها از عملکردهای مشابه در JavaScript نیز پشتیبانی می‌کنند.

۲. کدهای کاربرپسند و ساده

یکی دیگر از مزیت‌های jQuery که می‌توان از آن به‌عنوان تفاوت جی‌کوئری و جاوااسکریپت نام برد، مختصر‌نویسی کدهاست. به‌همین‌دلیل، اکثر توسعه‌دهندگانی که نمی‌دانند چطور باید از جاوااسکریپت استفاده کنند، با jQuery احساس راحتی بیشتری می‌کنند. کدهای کاربرپسند و ساده به شما کمک می‌کند تا خیلی درگیر کدهای طولانی نشوید

jQuery چندان هم بدون مشکل نیست. در‌ادامه، به برخی از معایب جی‌کوئری اشاره خواهیم کرد.

۱. سرعت اندک در‌مقابل JavaScript ساده

یکی از مشکلات مهم سرعت است. هر‌چه به‌عنوان توسعه‌دهنده با استفاده از jQuery راحت‌تر و سریع‌تر می‌توانید کدنویسی کنید، درمقابل کاربران برای استفاده از وب‌سایت شما زمان بیشتری صرف خواهند کرد. در بررسی‌های انجام‌شده، مشخص شد که عملکرد کدهای نوشته‌شده با جاوااسکریپت خالص ممکن است ۱۰ تا ۲۵ برابر سریع‌تر از عملکرد کدهای نوشته‌شده با جی‌کوئری باشد.

۲. ممکن است شما همیشه تازه‌کار باقی بمانید

همان‌طور‌که قبلاً گفتیم، یکی از مزایای استفاده از جی‌کوئری این است که با استفاده از توابع از‌پیش‌تعیین‌شده، می‌توانید طول کدنویسی خود را کاهش دهید. بااین‌حال، این موضوع چاقویی دو‌لبه است؛ چراکه استفاده از توابعی که هیچ نقشی در تولید آن‌ها ایفا نکرده‌اید، می‌تواند شما را از یادگیری مبانی برنامه‌نویسی و توسعه باز‌دارد. به‌عبارت‌دیگر، این خطر همواره وجود دارد که شما به کدنویسی ساده jQuery عادت کنید و هیچ‌وقت به‌سراغ یادگیری عمیق برنامه‌نویسی نروید و در‌نتیجه، همیشه به‌عنوان تازه‌کار شناخته شوید.

۳. الزام به گنجاندن کتابخانه در تمامی صفحات

یکی دیگر از معایب جی‌کوئری این است که لزوماً باید کدهای نوشته‌شده را در تمامی صفحات HTML قرار دهید. در‌ادامه برای مقایسه جاوااسکریپت و جی‌کوئری، دو تکه کد استفاده‌شده در آن‌ها را برای ارسال فرم ایجکس ارائه خواهیم کرد.

ارسال فرم AJAX با استفاده از jQuery

برای این منظور می‌توان از کدهای زیر استفاده کرد:

$('#contact-form-button').click(function(event){
    event.preventDefault(); // prevent default submit event that would automatically reload webpage
    
    // initalizing variables
    const form = $('#contact-form');
    const url = form.prop('action'); // the url to redirect to "/contact"
    const type = form.prop('method'); // the method "POST" or "GET"
    const data = new FormData(form); // formData object with all key ("id" attribute)-value("user input") pairs
        
    $.ajax({
        url: url,
        type: type,
        data: formData,
        processData: false,
        contentType: false,
        beforeSend: function() {
            // show the preloader (progress bar)
            $('#form-response').html("<div class='progress'><div class='indeterminate'></div></div>");
        },
        complete: function () {
            // hide the preloader (progress bar)
            $('#form-response').html("");
        },
        success: function ( response ){
            // object has been returned from backend
            // object contains key-value pairs in an object
            // these keys 'feedback' and 'content' are set in the backend
            
            if ( !$.trim( response.feedback )) { // empty response from backend
                error_msg = "An empty response was returned.";
            }
            else { // non-empty response
                error_msg = response.feedback;
                
                // load content by 
                $('#form-content').html(response.content);
            }
        },
        error: function(xhr) { // an error occured
            // logging the error
            console.log("error. see details below.");
            console.log(xhr.status + ": " + xhr.responseText);
            
            // returning user-feedback
            error_msg = "An error occured";
        },
    }).done(function() {
        // this part is always executed, even when the AJAX request was not succesfull
        $('#form-response').append(error_msg);
    });
};

// Flask's way of adding a csrf token to the AJAX request
var csrf_token = "{{ csrf_token() }}";

// set the CRSF token in the request headers
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrf_token);
        }
    }
});

ارسال فرم AJAX با استفاده از JavaScript خالص

همچنین برای ارسال فرم AJAX با استفاده از جاوااسکریپت خالص، می‌توان به‌صورت زیر کدنویسی کرد:

document.body.addEventListener( 'click', function (event) {
    event.preventDefault(); // prevent default submit event that would automatically reload webpage

    // initializing variables
    const form = event.target.form; // get the form
    const data = new FormData(form); // formData object with all key ("id" attribute)-value("user input") pairs

    const request = new XMLHttpRequest();
    request.open(form.method, form.action, true);
    request.send(data);

    request.addEventListener("load", function () {
        
        const messages = document.getElementById("messages-list");

        if (this.readyState === 4 && this.status === 200) {

            // catch JsonResponse from backend
            const response = JSON.parse(this.responseText);

            // display user-feedback
            messages.innerHTML += response.feedback; // append message to HTML content

            // load content by
            const element = document.getElementById("form-content");
            const section = element.parentNode; // get parent HTML content
            section.removeChild(element); // delete child HTML content
            section.innerHTML = response.content; // paste response HTML content
        }
        else { // error occurred
            // logging the error
            console.log("error. see details below.");
            console.log(xhr.status + ": " + xhr.responseText);
            
            // display user-feedback
            messages.innerHTML += "An error occured, please try again.";
        }
    }
});

کدام را انتخاب کنیم؟ jQuery یا JavaScript ساده؟

قانون نوشته‌شده‌ای وجود ندارد که بتوانید بر‌اساس آن تصمیم بگیرید که در چه مواقعی باید از جی‌کوئری و در چه مواقعی از جاوااسکریپت خالص استفاده کنید. البته اگر تا این‌جا مطلب را دنبال کرده باشید، به برخی از تفاوت‌های اصلی بین جی‌کوئری و جاوااسکریپت نیز پی برده‌اید. به‌عنوان نمونه، حالا دیگر می‌دانید که جی‌کوئری برای دست‌کاری DOM معمولاً عملکردی بهتر از جاوااسکریپت خالص دارد؛ اما سرعت JS ساده به‌مراتب بیشتر از jQuery است. در‌ادامه، فرق بین جی‌کوئری و جاوااسکریپت را از‌نظر معیارهای مختلف ذکر کرده‌ایم.

به‌طورخلاصه، jQuery هنگام استفاده از CMS‌هایی مانند وردپرس به‌دلیل وجود افزونه‌های بسیار زیاد برای آن‌ها، گزینه ایدئال‌تری است. باوجوداین، جی‌کوئری از جاوااسکریپت ساخته شده است؛ به‌همین‌دلیل، حذف کلی JS منطقی به‌نظر نمی‌رسد. اگر می‌خواهید به توسعه‌دهنده فرانت‌اند تبدیل شوید، قطعاً یادگیری JavaScript ساده یکی از کارهای ضروری پیش پای شماست. 

توجه کنید که جاوااسکریپت قطعاً حاکم بلامنازع حوزه Front End است. کتابخانه‌ها و فریم‌ورک‌های بسیار زیادی روی این زبان برنامه‌نویسی نوشته شده است؛ اما همه ما می‌دانیم که این فریم‌ورک‌ها همان‌طورکه آمدنی داشته‌اند، رفتنی هم خواهند داشت و آنچه باقی می‌ماند، اَبَر‌زبان برنامه‌نویسی جاوااسکریپت است.

جمع‌بندی

در گذشته، وب‌سایت‌ها استاتیک بودند. به‌عبارت‌دیگر، هیچ‌چیزی در آن‌ها تغییر نمی‌کرد؛ اما با ورود جاوااسکریپت، عصر جدیدی در برنامه‌نویسی Front End آغاز و ظاهر وب‌سایت‌ها دچار تحولی عظیم شد. دراین‌میان، جاوااسکریپت به‌کمک توسعه‌دهندگان آمد تا بتوانند وب‌سایت‌های داینامیک ایجاد کنند. پس‌از‌آن، jQuery به‌عنوان کتابخانه‌ای متشکل از ابزارهای ایجاد‌شده توسعه‌دهندگان در سراسر جهان به میدان آمد تا کار توسعه‌دهندگان وب را ساده‌تر کند. با‌توجه‌به اینکه تفاوت جی‌کوئری و جاوااسکریپت یکی از سؤالات اساسی توسعه‌دهندگان تازه‌کار یا حتی برخی افراد باتجربه در‌زمینه طراحی وب است، در این مطلب از بلاگ آکادمی ابرها، تلاش کردیم تا فرق جی‌کوئری و جاوااسکریپت را به‌اختصار و به‌طورساده به شما توضیح دهیم.

سؤالات متداول

۱. برنامه‌نویسی Front End به چه معناست؟

هنگامی‌که به وب‌سایتی مراجعه می‌کنید، با منوها، دکمه‌ها، محتوای متنی، عکس‌ها و… روبه‌رو خواهید شد. کار برنامه‌نویس فرانت‌اند این است که محتوای بصری وب‌سایت را همان‌طور‌که طراح UI و UX از او خواسته است، با استفاده از زبان‌های برنامه‌نویسی طراحی کند.

۲. بهترین زبان برای برنامه‌نویسی فرانت‌اند چه زبانی است؟

بهترین و کامل‌ترین زبان برنامه‌نویسی فرانت‌اند جاوااسکریپت است. باوجوداین، کتابخانه‌ها و فریم‌ورک‌هایی نیز برای این زبان برنامه‌نویسی طراحی شده‌اند تا استفاده از آن را راحت‌تر کنند.

۳. جی‌کوئری چیست؟

جی‌کوئری یکی از کتابخانه‌های معروف زبان جاوااسکریپت است که به‌دلیل کوتاه‌بودن کدها و ساده‌بودن یادگیری، با اقبال توسعه‌دهندگان، به‌خصوص افراد تازه‌واردِ این حوزه، روبه‌رو شده است.

۴. آیا می‌توان بدون یادگیری جاوااسکریپت، برنامه‌نویس فرانت‌اند ماهر شد؟

توجه کنید که اگر حتی می‌خواهید از جی‌کوئری برای طراحی وب‌سایت استفاده کنید، بازهم جی‌کوئری کتابخانه‌ای از زبان جاوااسکریپت است. بنابراین، اگر تمام کدنویسی شما به طراحی وب‌سایت با استفاده از وردپرس محدود می‌شود، احتمالاً جی‌کوئری برایتان کافی است. بااین‌حال، اگر قصد دارید به برنامه‌نویس فرانت‌اند یا فول‌استک تبدیل شوید، قطعاً باید جاوااسکریپت را یاد بگیرید.

۵. سرعت عملکرد کدهای جاوااسکریپت بیشتر است یا جی‌کوئری؟

بی‌شک جاوااسکریپت سریع‌تر است؛ زیرا بررسی‌ها نشان می‌دهد که سرعت عملکرد کدهای نوشته‌شده با جاوااسکریپت ساده می‌تواند تا ۲۵ برابر کدهای نوشته‌شده با جی‌کوئری باشد.