俗話說"挖坑容易, 填坑難", 可能不是坑, 走的人多了也就變成了坑. 哎, 且看我能為後人填多少坑吧, 能填多少是多少吧.
坑: this
JavaScript裡面的坑真的是很多啊, 比如說 this, 估計就難道了很多人. 其實很簡單, 就是無論是誰call的這個對象, this就refer它了.
- 在定義函數(shù)function的時候, this指的是window
- 在Object裏面定義函數(shù)的時候, this指的是這個Object
- 在定義內(nèi)函數(shù)的時候, this 指的是window. (內(nèi)函數(shù)不傳遞this)
例子(jQuery):
做練習(xí), 圖方便, 沒有下載到本地, 直接load網(wǎng)上的
``` javascript
(function(){
var obj = {
doIt: function(e){
console.log(this);
e.preventDefault();
}
};
$('a').on('click', obj.doIt);
})();
這裡的this指的是, anchor, 因為是a叫的function 'obj.doIt'
(function(){
var obj = {
doIt: function(){
console.log(this);
}
};
$('a').on('click', function(e){
obj.doIt();
e.preventDefault();
});
})();
這裡的this指的是, obj本身, 因為沒有任何東西傳入到obj.doIt()裡面去.
如果還是聽不懂額, 這麼多選擇到底怎們辦啊?
對於新手來說, jQuery指出了一條簡潔的道路, 那就是用這個
$('a').on('click', $.proxy(obj.doIt, obj)); 把特定的Object傳入進去, 可以refer API. 當然, 這裡的this, 永遠都refer後面的obj.
坑: call 和 apply
call和apply之間有什麼區(qū)別? 據(jù)我所致, 毛線都沒有.
僅僅是兩個不同function的名字了, 比如說 裡面 vs 裏面.
- call的第二個及以後的parameter接受的是單獨的parameter.
- apply的第二個parameter接受到的是array(數(shù)組).
call(this, a,b,c,d);
apply(this, [a,b,c,d]);
坑: css 和 animate
這個算是jQuery裡面獨有的吧. css沒有反映時間, 效果是立即呈現(xiàn)的; animate 與之相反, 但是"只有數(shù)字值可創(chuàng)建動畫（比如 "margin:30px"）鱼的。字符串值無法創(chuàng)建動畫（比如 "background-color:red"）亭螟。"
例子
$('button').on('click', function () {
box.css({
'left': w,
'top': h
'position': 'absolute'
})
});
效果立顯. 位置, 方式等全部都改變.
$('button').on('click', function () {
box.animate({
'left': w,
'top': h
'position': 'absolute'
})
});
相反, 只有位置改變, 方式不改變(position 無效).
坑: 本地圖片 vs 網(wǎng)絡(luò)圖片
做練習(xí), 偷懶沒有將圖片下載到本地, 直接調(diào)用網(wǎng)絡(luò)上的圖片, 如下
<div class="slider">
<ul>
<li>
<img src="https://octodex.github.com/images/saritocat.png" alt="saritocat"/>
</li>
<li>
<img src="https://octodex.github.com/images/topguntocat.png" alt="labtocat"/>
</li>
<li>
<img src="https://octodex.github.com/images/octoliberty.png" alt="octoliberty"/>
</li>
<li>
<img src="https://octodex.github.com/images/twenty-percent-cooler-octocat.png" alt="21"/>
</li>
</ul>
</div>
用這個方法
var sliderUL = $('div.slider').css('overflow', 'hidden').children('ul'),
imgs = sliderUL.find('img'),
imgWidth = imgs[0].width,
console.log('pic width: '+imgs[0].width);
imgWidth為0, 將圖片換位本地後, 算出正常width, 又是jQuery的一個坑. 當然了, 另外一個解決方法就是將function傳入window.load之後.
$(window).load(function() {
// content
});
順便提一句, $(document).ready(function(){})與$(window).load(function(){})的區(qū)別就是, 前者是DOM ready, 後這是content ready, 比如說圖片.
