閱讀 jquery 原始碼的筆記 - I don't like this

I_dont_like_this = function (key)
{
var nodes = document.querySelectorAll(key);
var l = nodes.length;
for(var i = 0; i <  l ; i++)
{
var node = nodes[i];
node.parentNode.removeChild(node);
}
}
I_dont_like_this("iframe.fb_ltr");

I_dont_like_this(".fb_iframe_widget");

這是我剛寫好，專門隱藏網站外掛FB按讚功能的函數，準備作成 chrome 外掛

document.querySelectorAll 這東西是瀏覽器內建的選擇器

我爬 jQuery 在第6456行找到的

閱讀 jquery 原始碼的筆記 - Array.slice 的妙用

在 jquery v1.10.2 裡面的第 232行寫到 :

toArray: function() {
return core_slice.call( this );
}

他的功能是把 jquery 物件從物件 {} 轉換成陣列 []
在這裡的 this 是個 jquery 物件
而 core_slice 是宣告在第 55 行 :

core_deletedIds = [],
core_slice = core_deletedIds.slice,

以上來自第48行和第55行
我們知道他宣告了一個變數  core_slice 把陣列的 slice 函數拿來用
 slice 能作什麼事呢?

從這裡我們知道執行

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);

會得到

citrus = ["Orange","Lemon"];

的結果

根據測試我發現 core_slice.call(A) 的運作模式是先判斷 A 有無 length 屬性
如果有就 new 一個新的陣列 然後把對應的元素丟進新的陣列裡，如果沒有傳入參數的話就是全丟進去
嘗試實作看看 :

function slice(A, start, end) {
    var output = [];
    if (start == undefined) start = 0;
    if (end == undefined) end = A.length;
    if (start < 0) start = A.length + start;
    if (end < 0) end = A.length + end;
    for (var i = start; i < end; i++) {
        output.push(A[i]);
    }
    return output;

}

試用起來跟內建的一樣
可以測試以下程式碼

var o = {};
o.length = 5;
o[0] = 1;
slice(o);
[].slice.call(o);

閱讀 jquery 原始碼的筆記 - && 和 || 運算子的妙用

在 jquery v1.10.2 裡面的第 153行寫到:

context && context.nodeType ? context.ownerDocument || context : document,

它的實際意義是
如果 context 不存在 或者 context 沒有 nodeType 屬性時，傳回 document
如果 context 存在，而且 context 具有 nodeType 屬性時，嘗試傳回 context.ownerDocument ，如果 context.ownerDocument 不存在就改成傳回 context

為什麼可以這樣寫 ?

運算子 && 的功能

執行 A && B 假如A可以轉換為 false 就 return A 否則 return B

試著實作 function and(A,B){ if(Boolean(A) === false) return A; return B;}

結果發現 A && B 跟 and(A, B) 的運作結果完全相同

運算子 || 的功能

執行 A || B 假如 A 可以轉換為 true 就 return A 否則 return B

試著實作 function or(A,B){ if(Boolean(A) === true) return A; return B;}

結果發現 A || B 跟 or(A, B) 的運作結果完全相同



附上可以轉換為 false 的物件列表 (從這裡找到的)
0
-0
null
""
false
undefined
NaN
除了這些東西之外 丟進 Boolean 都會傳回 true

Parse JavaScript Object Online

為了快快樂樂學習js而作的一個函數

功能是把js Object轉成jQuery Treeview所需的html碼

可以用來觀察 js object 結構

以下是結果 有興趣的人可以看一下原始碼

Parse JavaScript Object Online