zoukankan      html  css  js  c++  java
  • no-jquery 05 Utilities

    Utilities

    type

    // is this a function?
    typeof someValue === 'function';
    
    // is this an object?
    someValue != null &&
        Object.prototype.toString.call(someValue) === "[object Object]";
        
    // works in modern browsers
    Array.isArray(someValue);
    
    
    // works in all browsers
    Object.prototype.toString.call(someValue) === "[object Array]";
    

    Combine and copy objects

    // our helper function
    function extend(first, second) {
        for (var secondProp in second) {
            var secondVal = second[secondProp];
            // Is this value an object?  If so, iterate over its properties, copying them over
            if (secondVal && Object.prototype.toString.call(secondVal) === "[object Object]") {
                first[secondProp] = first[secondProp] || {};
                extend(first[secondProp], secondVal);
            }
            else {
                first[secondProp] = secondVal;
            }
        }
        return first;
    };
    
    // example use - updates o1 with the content of o2
    extend(o1, o2);
    
    // example use - creates a new object that is the aggregate of o1 & o2
    var newObj = extend(extend({}, o1), o2);
    

    Iterate over object properties

    for (var myObjectProp in myObject) {
        // deal with each property in the `myObject` object...
    }
    
    // works in all browsers
    for (var prop in myObject) {
        if (myObject.hasOwnProperty(prop)) {
            // deal w/ each property that belongs only to `myObject`...
        }
    }
    
    // works in modern browsers
    Object.keys(myObject).forEach(function(prop) {
        // deal with each property that belongs to `myObject`...
    });
    

    Iterate over array elements

    // works in all browsers
    for (var index = 0; i < myArray.length; i++) {
        var arrayVal = myrray[index];
        // handle each array item...
    }
    
    // works in modern browsers
    myArray.forEach(function(arrayVal, arrayIndex) {
        // handle each array item
    }
    

    Find an element in an array

    // works in modern browsers
    var indexOfValue = theArray.indexOf('c');
    
    // works in all browsers
    function indexOf(array, valToFind) {
        var foundIndex = -1;
        for (var index = 0; index < array.length; i++) {
            if (theArray[index] === valToFind) {
                foundIndex = index;
                break;
            }
        }
    }
    
    // example use
    indexOf(theArray, 'c');
    
    // works in modern browsers
    var allElementsThatMatch = theArray.filter(function(theArrayValue) {
        return theArrayValue !== 'b';
    });
    
    // works in all browsers
    function filter(array, conditionFunction) {
    var validValues = [];
        for (var index = 0; index < array.length; i++) {
            if (conditionFunction(theArray[index])) {
                validValues.push(theArray[index]);
            }
        }
    }
    
    // use example
    var allElementsThatMatch = filter(theArray, function(arrayVal) {
        return arrayVal !== 'b';
    })
    

    Turn a pseudo-array into a real array

    var realArray = [].slice.call(pseudoArray);
    
    [].forEach.call(pseudoArray, function(arrayValue) {
        // handle each element in the pseudo-array...
    });
    

    Modify a function

    Change a function's context

    // works in modern browsers
    function Outer() {
        var eventHandler = function(event) {
            this.foo = 'buzz';
        }.bind(this);
    
        this.foo = 'bar';
        // attach `eventHandler`...
    }
    
    var outer = new Outer();
    // event is fired, triggering `eventHandler`
    
    // works in all browsers
    function Outer() {
        var self = this,
            eventHandler = function(event) {
                self.foo = 'buzz';
            };
    
        this.foo = 'bar';
        // attach `eventHandler`...
    }
    
    var outer = new Outer();
    // event is fired, triggering `eventHandler`
    

    Create a new function with some pre-determined arguments

    function log(appId, level, message) {
        // send message to central server
    }
    
    var ourLog = log.bind(null, 'master-shake');
    
    // example use
    ourLog('error', 'dancing is forbidden!');
    

    Trim a string

    // works in modern browsers
    '  hi there!   '.trim();
    
    // works in all browsers, but needed in IE 8 and older
    '  hi there!   '.replace(/^s+|s+$/g, '');
    
    // works in all browsers
    function trim(string) {
        if (string.trim) {
            return string.trim();
        }
        return string.replace(/^s+|s+$/g, '');
    }
    

    Associate data with an HTML element

    // works in all browsers
    var data = (function() {
        var lastId = 0,
            store = {};
    
        return {
            set: function(element, info) {
                var id;
                if (element.myCustomDataTag === undefined) {
                    id = lastId++;
                    element.myCustomDataTag = id;
                }
                store[id] = info;
            },
    
            get: function(element) {
                return store[element.myCustomDataTag];
            }
        };
    }());
    
    // use it
    
    // make the elements aware of each other
    var one = document.getElementById('one'),
        two = document.getElementById('two'),
        toggle = function(element) {
            if (element.style.display !== 'none') {
                element.style.display = 'none';
            }
            else {
                element.style.display = 'block';
            }
        };
    
    data.set(one, {partnerElement: two});
    data.set(two, {partnerElement: one});
    
    // on click, either hide or show the partner element
    // remember to use `attachEvent` in IE 8 and older, if support is required
    one.addEventListener('click', function() {
        toggle(data.get(one).partnerElement);
    });
    two.addEventListener('click', function() {
        toggle(data.get(two).partnerElement);
    });
    
    // works only in the latest browsers
    // make the elements aware of each other
    var weakMap = new WeakMap(),
        one = document.getElementById('one'),
        two = document.getElementById('two'),
        toggle = function(element) {
            if (element.style.display !== 'none') {
                element.style.display = 'none';
            }
            else {
                element.style.display = 'block';
            }
        };
    
    weakMap.set(one, {partnerElement: two});
    weakMap.set(two, {partnerElement: one});
    // on click, either hide or show the partner element
    // remember to use `attachEvent` in IE 8 and older, if support is required
    one.addEventListener('click', function() {
        toggle(weakMap.get(one).partnerElement);
    });
    two.addEventListener('click', function() {
        toggle(weakMap.get(two).partnerElement);
    });
    
    
    // works in all browsers
    var data = window.WeakMap ? new WeakMap() : (function() {
        var lastId = 0,
            store = {};
    
        return {
            set: function(element, info) {
                var id;
                if (element.myCustomDataTag === undefined) {
                    id = lastId++;
                    element.myCustomDataTag = id;
                }
                store[id] = info;
            },
    
            get: function(element) {
                return store[element.myCustomDataTag];
            }
        };
    }());
    
  • 相关阅读:
    ArrayList removeRange方法分析
    LinkedHashMap源码分析(基于JDK1.6)
    LinkedList原码分析(基于JDK1.6)
    TreeMap源码分析——深入分析(基于JDK1.6)
    51NOD 2072 装箱问题 背包问题 01 背包 DP 动态规划
    51 NOD 1049 最大子段和 动态规划 模板 板子 DP
    51NOD 1006 最长公共子序列 Lcs 动态规划 DP 模板题 板子
    8月20日 训练日记
    CodeForces
    CodeForces
  • 原文地址:https://www.cnblogs.com/jinkspeng/p/4480573.html
Copyright © 2011-2022 走看看