jQuery方法實現

children

原生JavaScript中，如果希望找到某個元素的子元素，只能通過Node類型上的children方法一步一步獲取。如

let li = document.querySelector('ul').children[0].
let anchor = li.children[0]
...

這種方法很不好，因為js和html並未解耦，當html結構發生改變時，js也需要發生相應的變化。

jQuery有一個children方法，可以傳入一個參數，此時會返回需要查找到的那個元素。具體用法children用法

下麵是我實現的類children的方法，實現原理是：遞歸回調children函數，當兩個DOM節點相等時，就返回該節點。否則返回null，表示找不到。

childrens (ele, selector) {
  let [target, child, isChild, isChildList, i] = []
  target = ele instanceof Object ? ele : document.querySelector(ele)
  child = target.querySelector(selector)
  isChildList = target.children
  for (i = 0; i < isChildList.length; i++) {
    isChild = isChildList[i]
    if (isChild === child) {
      return isChild
    }
    if (isChild.children.length >= 1) {
      // 遞歸回調children函數，遞歸的原因是某個子節點可能還存在一個或多個子節點。
      isChild = this.childrens(isChild, selector)
      return isChild
    }
  }
  return null
}

$.extend()實現深淺複製

function copyObject () {
    let i = 1,
        target = arguments[0] || {},
        deep = false,
        length = arguments.length,
        name, options, src, copy,
        copyIsArray, clone;

    // 如果第一個參數的數據類型是Boolean類型
    // target往後取第二個參數
    if (typeof target === 'boolean') {
        deep = target;
        // 使用||運算符，排除隱式強制類型轉換為false的數據類型
        // 如'', 0, undefined, null, false等
        // 如果target為以上的值，則設置target = {}
        target = arguments[1] || {};
        i++;
    }

    // 如果target不是一個對象或數組或函數
    if (typeof target !== 'object' && !(typeof target === 'function')) {
        target = {};
    }

    // 如果arguments.length === 1 或
    // typeof arguments[0] === 'boolean',
    // 且存在arguments[1]，則直接返回target對象
    if (i === length) {
        return target;
    }

    // 迴圈每個源對象
    for (; i < length; i++) {
        // 如果傳入的源對象是null或undefined
        // 則迴圈下一個源對象
        if (typeof (options = arguments[i]) != null) {
            // 遍歷所有[[emuerable]] === true的源對象
            // 包括Object, Array, String
            // 如果遇到源對象的數據類型為Boolean, Number
            // for in迴圈會被跳過，不執行for in迴圈
            for (name in options) {
                // src用於判斷target對象是否存在name屬性
                src = target[name];
                // copy用於複製
                copy = options[name];
                // 判斷copy是否是數組
                copyIsArray = Array.isArray(copy);
                if (deep && copy && (typeof copy === 'object' || copyIsArray)) {
                    if (copyIsArray) {
                        copyIsArray = false;
                        // 如果目標對象存在name屬性且是一個數組
                        // 則使用目標對象的name屬性，否則重新創建一個數組，用於複製
                        clone = src && Array.isArray(src) ? src : [];
                    } else {
                        // 如果目標對象存在name屬性且是一個對象
                        // 則使用目標對象的name屬性，否則重新創建一個對象，用於複製
                        clone = src && typeof src === 'object' ? src : {};
                    }
                    // 深複製，所以遞歸調用copyObject函數
                    // 返回值為target對象，即clone對象
                    // copy是一個源對象
                    target[name] = copyObject(deep, clone, copy);
                } else if (copy !== undefined){
                    // 淺複製，直接複製到target對象上
                    target[name] = copy;
                }
            }
        }
    }
    // 返回目標對象
    return target;
}

期待噢：）

持續更新中...