آموزش

بهترین روشهای کدنویسی جی کوئری

بازدید87.6kپست ها1آخرین فعالیت7 سال پیش
6
0

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

[size=x-large]استفاده از کتابخانه jQuery[/size]

۱- همیشه از یک CDN برای اضافه کردن جی کوئری استفاده کنید. زمانی که از CDN ها استفاده میکنید شانس اینکه جی کوئری قبلا توسط مرورگر کاربر Cache شده باشه زیاده پس دیگه نیازی نیست دوباره فایل دانلود بشه و در نهایت باعث میشه سرعت بارگذاری صفحه بالاتر بره. البته من فقط به مهمترین مزیت استفاده از CDN ها اشاره کردم، میتونید در این مقاله بیشتر بخونید.

برای مثال:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js" type="text/javascript"><\/script>')</script>

به این نکته توجه کنید که ما پروتکل(http یا https) رو مشخص نمیکنیم، این باعث میشه تا مرورگر خودش پروتکل رو بهش اضافه کنه و تو سایت های https مشکلی پیش نیاد. برای مثال اگر صفحه https باشه جی کوئری هم با همین پروتکل لود میشه. بنابراین، باید دقت کنید که اگر تو لوکال باشید با پروتکل //:file لود میشه.

با کدی که در لاین دوم نوشتیم اگر به هر علتی جی کوئری از CDN قابل دریافت نباشه از نسخه ای که تو سایت خودمون هست استفاده میکنیم.

۲- برای بالابردن سرعت صفحه بهتره تمام کدهای جاوا اسکریپت رو در انتهای صفحه بذارید.

۳- از کدام نسخه استفاده کنم؟

  • از میخواین از نسخه های قدیمی IE ‏(۶و۷و۸) ساپورت کنید از نسخه های ۲ و بالاتر جیکوئری استفاده نکنید.
  • اگر پلاگینهاتون مشکل سازگاری ندارن بهتره همیشه از آخرین نسخه جی کوئری استفاده کنید.
  • هیچوقت دو نسخه مختلف رو در یک صفحه لود نکنید.
  • از jquery-latest.js که خود سایت jQuery.com در اختیار میذاره استفاده نکنید (از یک نسحه ثابت استفاده کنید).

[size=x-large]
متغیرهای jQuery[/size]

۱- اگر بخواید متغییرتون بتونه به عنوان یه object برای جی کوئری شناخته بشه باید قبل از نام متغیر علامت $ وجود داشته باشه.

۲- در بیشتر مواقع بهتره آبجکت بازگشتی از یک selector رو تو یه متغیر ذخیره کنید تا بتونید بعدا هم از اون استفاده کنید.

var $myDiv = $("#myDiv");
$myDiv.click(function(){...});

۳- از Method Chaining استفاده کنید:
$("#myDiv").addClass("error").show();

معمولا اگر تعداد متد ها زیاد بشه هر متد رو در لاین جدید و بصورت دندانه دار مینویسن:

$("#myLink")
    .addClass("bold")
    .on("click", myClickHandler)
    .on("mouseover", myMouseOverHandler)
    .show();

۴- توصیه میشه برای نامگذاری متغیرها در جی کوئری از Camel Case استفاده کنید. تو این شیوه نامگذاری،  حرف اول هر کلمه با حرف بزرگ نوشته میشه.

[size=x-large]Selector ها [/size]
۱- تا جایی که امکان داره از ID المنت ها استفاده کنید. این روش انتخاب المنت خیلی سریعتره چون از متد document.getElementById استفاده میشه.

۲- برای سریع تر بودن، زمانی که از Class برای انتخاب المنت ها استفاده میکنید در صورت امکان سعی کنید نوع النمت رو مشخص نکنید.

var $products = $("div.products"); // SLOW
var $products = $(".products"); // FAST

مقایسه سرعت.

۳- برای select کردن child ها (id->childs) از متد ()find. استفاده کنید که سریع تر هست چون اول المنت والد رو انتخاب میکنه و بعد در المنت های فرزند جست و جو میکنه در غیر اینصورت در هر تکرار، المنت والد هم جست و جو میشه.

// BAD, a nested query for Sizzle selector engine
var $productIds = $("#products div.id");

// GOOD, #products is already selected by document.getElementById() so only div.id needs to go through Sizzle selector engine
var $productIds = $("#products").find("div.id");

۴-  جی کوئری سلکتورهای شما رو از راست به چپ میخونه پس در سمت راست جزئیات زیاد و در سمت چپ جزئیات رو کم کنید.

// Unoptimized
$("div.data .gonzalez");

// Optimized
$(".data td.gonzalez");

مقایسه سرعت.

۵- از مشخص کردن سلکتور های اضافی خودداری کنید. هر چقدر سلکتورهاتون بیشتر باشن زمان جست و جو بیشتر و سرعت کم میشه.

$(".data table.attendees td.gonzalez");
 
// Better: Drop the middle if possible.
$(".data td.gonzalez");

۶- محدوده جست و جو سلکتورها رو مشخص کنید.

// SLOWER because it has to traverse the whole DOM for .class
$('.class');

// FASTER because now it only looks under class-container.
$('.class', '#class-container');

تو کد دوم جست و جو فقط در داخل class-container#  انجام میشه.

۷- از (*)Universal Selector استفاده نکنید.

$('div.container > *'); // BAD
$('div.container').children(); // BETTER

همچنین زمانی که نوع المنت(Type selector) رو قبل از سلکتورهای خاص مثل radio: مشخص نکنید بصورت خودکار Universal Selector در نظر گرفته میشه.

$('div.someclass :radio'); // BAD
$('div.someclass input:radio'); // GOOD

۸- زمانی که هدف شما انتخاب یک المنت دارای ID هست فقط از ID selector استفاده کنید و سلکتور های دیگه رو حذف کنید.

$('#outer #inner'); // BAD
$('div#inner'); // BAD
$('.outer-container #inner'); // BAD
$('#inner'); // GOOD, only calls document.getElementById()

[size=x-large]رویدادها (Events)[/size]

۱- سعی کنید در یک فایل تنها از یک Document.ready استفاده کنید چون روی خوانایی و عیب یابی کد شما تاثیر داره.

روشهای استفاده:

// Usual way
$(document).ready(function() {
    ...
});

// The shorthand
$(function() {
    ...
});

// store the jQuery document object to a variable
var $document = $(document);

$document.ready( //... );

۲- تا جایی که امکان داره از Attribute های اضافه کردن رویداد مثل onclick , ondblclick و ... خودداری کنید. بجای اون از جی کوئری استفاده کنید:

<a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!-- BAD -->

$("#myLink").on("click", myEventHandler); // GOOD

۳- به عنوان یه برنامه نویس، DRY رو همیشه باید رعایت کرد. برای چسبوندن رویداد به المنت ها بهترین روش رو انتخاب کنید. خودتون رو تکرار نکنید، از Event Delegation استفاده کنید. Event Delegation باعث میشه بجای اینکه به تک تک Child ها رویداد چسبونده بشه، به والد اونها اضافه میشه و بعد چک میشه که فرزند اونی که ما میخوام هست یا نه! یکی از مزایای این روش اینه که اگر بعد از اجرا شدن کد، فرزندی کم یا زیاد باشه باز کد ما درست کار میکنه.

// BAD.
  $("#longlist li").on("mouseenter", function() {

    $(this).text("Click me!");

  });

  $("#longlist li").on("click", function() {

    $(this).text("Why did you click me?!");

  });



// GOOD.
  var list = $("#longlist");

  list.on("mouseenter", "li", function(){

    $(this).text("Click me!");

  });

  list.on("click", "li", function() {

    $(this).text("Why did you click me?!");

  });

[size=x-large]Ajax[/size]
۱- توصیه میشه بجای استفاده از post.‏$ ، get.$ یا getJson.$ از ajax.$ استفاده کنید چون همه اونها از همین ajax.$ استفاده میکنن. در ضمن هنگام استفاه از ajax.$ میتونید تنظیمات بیشتری رو اعمال کنید.

کد اول فرقی با کد دوم نمیکنه:

// #1
$.post( "/ajax", {"data" : json }) 

// #2
$.ajax({ 
  type: "POST", 
  url: "/ajax", 
  data: {"data": json} 
});

۲- در پارامتر url متد ajax.$ پروتکل(مثل http یا https) رو مشخص نکنید.(protocolless).
۳- در درخواست های نوع GET ، مقادیر ارسالی به سرور رو در پارامتر url قرار ندید بجای اون از پارامتر data استفاده کنید.

// Less readable...
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});
 
// More readable...
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});

۳- بهتره پارامتر dataType رو همیشه مشخص کنید تا بدونید چه قراره با چه نوع داده ای کار کنید.
۴- در مواقع لزوم از promise استفاده کنید. استفاده از promise اجازه میده تا بتونید چندین Callback بعد از اجرای تابع بفرستید. اطلاعات بیشتر.

$.ajax({ ... }).then(successHandler, failureHandler);

//OR
var promise = $.ajax({
  url: "/ServerResource.txt"
});
  
promise.done(successFunction);
promise.fail(errorFunction);
promise.always(alwaysFunction);

[size=x-large]متفرقه[/size]
۱- هیچوقت بیش از اندازه از animation ها استفاده نکنید.
۲- هنگام استفاده از پلاگین ها مطمئن باشید که با ورژن جی کوئری شما سازگار هست.
۳- پلاگین هایی رو برای استفاده انتخاب کنید که مستندات و پشتیبانی خوبی داشته باشن.
۴- تا حد امکان CSS رو با Jquery مخلوط نکنید:
$("#mydiv").css({'color':red, 'font-weight':'bold'}); // BAD

// CSS
.error { color: red; font-weight: bold; } /* GOOD */

// jQuery
$("#mydiv").addClass("error"); // GOOD

۵- از صفت data استفاده کنید. *-data یه attribute جدید و کاربردیه که با HTML5 اومده و برای ذخیره اطلاعات در المنت ها استفاده میشه:
<a id='foo' data-role="button" href="#page3" data-icon="gear" data-transition="none" data-iconpos="left"></a>

$('#foo').data('role'); //will return button
$('#foo').data('role', 'page') // will change the data-role attribute to 'page'
$('#foo').data('values', { foo: 'bar', num: 12}); //will store the json object into data-values attribute
$('#foo').data('values').num //will return the value inside your json : 12 (and not '12', .data() is trying to return the right value type)
$('#foo').data( { baz: 'foo' }); //will add baz to the previous stored element (values)

۶- همیشه حواستون باشه که متد های رد شده( Deprecated) رو بکار نگیرید و بجای اون از روشهای جدید استفاده کنید.
لیست متدهای رد شده.

۷- همیشه متدهای بومی جاوا اسکریپت سریعتر از متدهای جی کوئری هستن پس در مواقع لزوم میتونید از متدهای بومی جاوااسکریپت استفاده کنید:

$("#myId"); // is still little slower than...
document.getElementById("myId");

مقایسه سرعت کد.

[size=x-large]منابع[/size]
http://lab.abhinayrathore.com/jquery-standards/
http://gregfranko.com/jquery-best-practices
http://tutorialzine.com/2011/06/15-powerful-jquery-tips-and-tricks-for-developers/
http://learn.jquery.com
http://www.tipsfromsiliconvalley.com/2013/06/17/jquery-guide-10-best-practices-with-jquery-1-7-for-front-end-developers/
http://davidwalsh.name/event-delegate

آخرین ویرایش: 16-08-2015 ???? 20:56، توسط رضا رمضانپور
0

بسیار مفید بود.تشکر

سوال برنامه نویسی دارید؟

ندونستن عیب نیست، نپرسیدن چرا!

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.