任務2學習感悟

/**
 *  2. JavaScript數據類型及語言基礎
 */

// 判斷是否數組的函數
function isArray(arr) {
    // 利用Object.prototype.toString會返回各種內置類型，來判斷返回的是不是'[object Array]'這裏o小寫
    return Object.prototype.toString.call(arr) == '[object Array]';
}

// 判斷是否函數的函數
function isFunction(fn) {
    // 注意typeof()返回的是6個字符串
    return typeof(fn) == 'function';
}

// 深拷貝的函數
function cloneObject(src) {
    // 只有object和array裏，for-in才能獲取到參數
    // 注意返回的是'[object Array]'後面大寫
    if (Object.prototype.toString.call(src).slice(8, -1) === 'Object'
        || Object.prototype.toString.call(src).slice(8, -1) === 'Array') {
        // 判斷是Object還是Array
        var result = src instanceof Object ? {} : [];
        for (var i in src) {
            if (src.hasOwnProperty(i)) {
                // 對象或數組裏面，繼續遍歷來獲取，直到屬性值爲非Object或Array
                result[i] = cloneObject(src[i]);
            }
        }
        return result;
    }
    // 原始類型和Date, Boolean等對象類型直接返回就好了
    else {
        return src;
    }
}


// 數組去重，返回去重後的數組
function uniqArray(arr) {
    var array = [];
    for (var i = 0, len = arr.length; i < len; i++) {
        if (array.indexOf(arr[i]) === -1) {
            array.push(arr[i]);
        }
    }
    return array;
}


// 對字符串首尾進行空格字符的去除，返回去除後的字符串
function trim(str) {
    var pattern = String('\t\r\n');
    if (pattern.indexOf(str.charAt(0)) != -1) {
        return trim(str.substring(1));
    }
    else {
        return str.substring(0);
    }
}
var s = '   hi';
console.log(trim(s));

function trim(str) {
    return str.replace(/^(\s)*(\s$)*/, '');
}
console.log(trim('   hi   '));


function each(arr, fn) {
    for (var i = 0, len = arr.length; i < len; i++) {
        fn(arr[i], i);
    }
}
var arr = ['java', 'c', 'php', 'html'];
function output(item) {
    console.log(item)
}
each(arr, output);  // java, c, php, html


// 獲取一個對象裏面第一層元素的數量，返回一個整數
function getObjectLength(obj) {
    var count = 0;
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            count++;
        }
    }
    return count;
}
// 使用示例
var obj = {
    a: 1,
    b: 2,
    c: {
        c1: 3,
        c2: 4
    }
};
console.log(getObjectLength(obj)); // 3


// 判斷是否爲郵箱地址
function isEmail(emailStr) {
    // 郵箱可以爲[數字,字母,-,_]
    return emailStr.match(/^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+[.a-zA-Z0-9-_]/g)===-1?false:true;
}
// 使用示例
isEmail('[email protected]');


// 判斷是否爲手機號
function isMobilePhone(phone) {
    return phone.search(/^1\d{10}/g)===-1?false:true;
}
// 使用示例
isMobilePhone('18810544291');


/**
 * 3.DOM
 */
// 爲element增加一個樣式名爲newClassName的新樣式
function addClass(element, newClassName) {
    // document.querySelector(selecttor) 返回第一個匹配css選擇器的對象
    // document.querySelectorAll(selectors) 返回一組匹配css選擇器的對象
    // element有個className屬性
    document.querySelector(element).className += ' ' + newClassName;
}
// 使用示例
var element = '.first';
addClass(element, 'newClass');// 注意newClass前面的空格


// 移除element中的樣式oldClassName
function removeClass(element, oldClassName) {
    // 由於replace不改變原字符串,而是返回改變後的字符串,所以要重新賦值
    document.querySelector(element).className = document.querySelector(element).className.replace(oldClassName, '');
}

// ife中xyc的方法,有classList和remove兩個新方法
// 其中remove方法並不是數組裏的,好像是DOM的
function removeClass(element, oldClassName) {
    document.querySelector(element).classList.remove(oldClassName);
}

// 判斷siblingNode和element是否爲同一個父元素下的同一級的元素，返回bool值
function isSiblingNode(element, siblingNode) {
    var isSiblingNode = false;
    // 利用parentNode和childNodes來獲得其父元素的全部子元素
    var parent = document.querySelector(element).parentNode.childNodes;
    var sib = document.querySelector(siblingNode);
    for (var i = 0, len = parent.length; i < len; i++) {
        if (sib=== parent[i]) {
            isSiblingNode = true;
        }
    }
    return isSiblingNode;
}
// 參考xyc的方法,雖然return false放在後面,好像總會返回false.但是在for中返回true就直接退出了
function isSiblingNode(element, siblingNode) {
    // 利用parentNode和childNodes來獲得其父元素的全部子元素
    var parent = document.querySelector(element).parentNode.childNodes;
    var sib = document.querySelector(siblingNode);
    for (var i = 0, len = parent.length; i < len; i++) {
        if (sib=== parent[i]) {
            return true;
        }
    }
    return false;
}


// 獲取element相對於瀏覽器窗口的位置，返回一個對象{x, y}
function getPosition(element) {
    var position = {};
    position.x = document.querySelector(element).offsetLeft;
    position.y = document.querySelector(element).offsetTop;
    return position;
}


// 實現一個簡單的Query
// getElementById不用#
function $(selector) {
    // 如果裏面包含空格,則是組合查找
    if (selector.indexOf(' ') !== -1) {
        var parent = $(selector.split(' ')[0]);
        var child = $(selector.split(' ')[1]);
        for (var i = 0; i < parent.childNodes.length; i++) {
            if (child === parent.childNodes[i]) {
                return parent.childNodes[i];
            }
        }
    }
    // id查找
    if (selector.charAt(0) === '#') {
        return document.getElementById(selector.slice(1));
    }
    // 類查找
    else if (selector.charAt(0) === '.') {
        var className = selector.slice(1);
        var tags = document.getElementsByTagName('*');
        for (var i in tags) {
            if (tags[i].nodeType === 1) {
                if (tags[i].className.search(className) !== -1) {
                    return tags[i];
                }
            }
        }
    }
    // 屬性查找
    else if (selector.charAt(0) === '[') {
        var attr = selector.slice(1, -1);
        var tags = document.getElementsByTagName('*');
        // 找有值的屬性的元素
        if (attr.indexOf('=') !== -1) {
            var name = attr.split('=')[0];
            var value = attr.split('=')[1];
            for (var i in tags) {
                if (tags[i].nodeType === 1) {
                    if (tags[i].getAttribute(name) === value) {
                        return tags[i];
                    }
                }
            }
            return false;
        }
        // 找包含某屬性的元素
        else {
            for (var i in tags) {
                if (tags[i].nodeType === 1) {
                    if (tags[i].getAttribute(attr) !== null) {
                        return tags[i];
                    }
                }
            }
            return false;
        }
    }
    else {
        return document.getElementsByTagName(selector)[0];
    }
}

/**
 * 4.事件
 */

1. JS居然有原生的document.querySelector(selector)和document.querySelectorAll(selector)兩個原生的找DOM元素的方法

2. 謹記string.slice(from, to)方法

3. string.replace()不會修改原字符串

4. 用document.querySelector(selector).classList.remove()這個remove('className').這裏的remove()方法能移除classList數組中對應class.但不是數組提供的方法.應該是DOM的