PDA

View Full Version : مبتدی: تو JQ این دستورات کارشون چیه؟



baha_film
پنج شنبه 13 مرداد 1390, 08:10 صبح
(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
return this.each(function() {
var me = $(this), noop = function(){},
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
$li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
$li.not(".back").hover(function() {
move(this);
}, noop);
$(this).hover(noop, function() {
move(curr);
});
$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
setCurr(curr);
function setCurr(el) {
$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
curr = el;
};
function move(el) {
$back.each(function() {
$.dequeue(this, "fx"); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};
});
};
})(jQuery);


extend:?
fx:?
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});?
offsetLeft:?
$li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];:?

mehdi.mousavi
جمعه 14 مرداد 1390, 06:28 صبح
سلام.
تابع extend برای merge کردن دو یا چند object مورد استفاده قرار می گیره. کد زیر رو در نظر بگیرید:

var obj1 = { p1:1, p2:[2, 3, 4] };
var obj2 = { p1:7 };
var res = $.extend(obj1, obj2);

اینجا res برابر میشه با

{ p1:7, p2: [2, 3, 4] }

و البته obj1 نیز به res تغییر میکنه. در حقیقت تابه extend پارامترهای دوم، سوم و ... رو با هم merge میکنه، اونها رو در پارامتر اول قرار میده و همون مقدار رو در خروجی خودش نیز برمیگردونه. اگر فرضا نیاز داشته باشیم تا obj1 تغییر نکنه، می تونیم بدین شکل عمل کنیم:

var obj1 = { p1:1, p2:[2, 3, 4] };
var obj2 = { p1:7 };
var res = $.extend( {}, obj1, obj2);

اینجا res همون مقدار بالایی رو بخودش می گیره، اما obj1 دیگه تغییر نمیکنه و همون object اولیه باقی میمونه.

حالا در کدی که شما نوشته اید، یعنی

o = $.extend({
fx: "linear",
speed: 500,
click: function(){}
}, o || {});

چه اتفاقی میفته؟

اینجا جای اینکه توسعه دهنده LavaLamp بخواد جداگانه چک کنه که o برابر null هستش یا خیر، با یک حقه کوچک null بودن o رو handle کرده. یعنی:

o || {}

اینجا اگر o برابر null باشه، نتیجه یک JSON Object تهی هستش (یعنی {}). اگر هم نباشه، نتیجه o هستش. سپس، نتیجه این مقدار با object ای که در پارامتر اول داده شده، merge میشه. فرض کنید speed در o تعریف نشده باشه، بدین ترتیب مقدار پیش فرض 500 رو بخودش میگیره و همینطور بقیه property ها...

اما fx چیه؟ متود animate پارامتری داره تحت عنوان easing که نشوندهنده سرعت پیشرفت فریم ها در animation در بازه های مختلفه. jQuery بطور پیش فرض، دو تابع easing رو پیاده سازی کرده: swing و linear (یعنی نوسانی و خطی). اون linear ای که میبینید داره تعیین میکنه که انیمیشن بر اساس یک تابع خطی باید frame هاش تغییر کنه.

در نهایت، offsetLeft چیه؟ این property به شما فاصله از سمت چپ به نزدیک ترین parent element رو بر میگردونه (اطلاعات بیشتر (https://developer.mozilla.org/en/DOM/element.offsetLeft)).

موفق باشید.