Hello World! | Keep Coding

js quiz

11 Oct 2013

找出字符串出现最多次数的字符

var str = "sakfjksdjffffffff";

function getMostFrequenceLetter(str){
    var i = 0,
        len = str.length,
        dict = {},
        list = [];
    for (; i<len; i++) {
        var c = str[i];//char
        dict[c] = dict[c]? (dict[c]+1):1;
        list[dict[c]] = c;
    };

    return list.slice(-1);
}

getMostFrequenceLetter(str);

数组去重

function onlyUnique(value, index, self) { 
    return self.indexOf(value) === index;
}

// usage example:
var a = ['a', 1, 'a', 2, '1'];
var unique = a.filter( onlyUnique )

求对称数

function isSymmetry (num) {
    return num.toString().split('').reverse().join('') == num
}

字符串模板方法

if (!String.prototype.supplant) {
    String.prototype.supplant = function (o) {
        return this.replace(
            /\{([^{}]*)\}/g,
            function (a, b) {
                var r = o[b];
                return typeof r === 'string' || typeof r === 'number' ? r : a;
            }
        );
    };
}
param = {domain: 'valvion.com', media: 'http://media.valvion.com/'};
url = "{media}logo.gif".supplant(param);//"http://media.valvion.com/logo.gif".

支持嵌套

if (!String.prototype.supplant) {
    String.prototype.supplant = function(o) {
        return this.replace(
            /\{([^{}]*)\}/g,
            function(a, b) {
                var p = b.split('.');
                var r = o;
                try {
                    p.forEach(function(v, k) {
                        r = r[v]
                    })
                } catch (e) {
                    r = a;
                }
                return typeof r === 'string' || typeof r === 'number' ? r : a;
            }
        );
    };
}
param = {domain: 'valvion.com', c:{a:{media: 'http://media.valvion.com/'}};
url = "{c.a.media}logo.gif".supplant(param);//"http://media.valvion.com/logo.gif".

$().html(value) vs $().empty().append(value)

07 Oct 2013

当需要清空某个dom结点内容时，我所知道的有两种方法：
1.Element.removeChild(child)

   
// Removing all children from an element  
var element = document.getElementById("test");  
while (element.firstChild) {  
  element.removeChild(element.firstChild);  
}

2.Element.innerHTML=""

第一种方式虽然可读性较好，但显然不如第二种方法简洁。
理论上方式2会比方式1快很多，从代码上来分析也是如此，至少方式二不用做while循环，也不用判断属性。事实上也的确如此，但只限于子结点较少的情况下。
在子结点个数多过的情况下，方式1是优于方式2的。性能测试之killing a lots of kids　　　

jquery提供了两个类似的接口与之相对应:
1.$().empty()
2.$().html('')

所以，替换dom内容也同样有两种方式:
1.$().empty().append(HTMLString|HTMLElement|jQueryElement)
2.$().html(HTMLString)

jQuery 1.9.1 empty方法实现如下，与方式1相似

      
empty: function() {
    var elem,
        i = 0;

    for ( ; (elem = this[i]) != null; i++ ) {
        // Remove element nodes and prevent memory leaks
        if ( elem.nodeType === 1 ) {
            jQuery.cleanData( getAll( elem, false ) );
        }

        // Remove any remaining nodes
        while ( elem.firstChild ) {
            elem.removeChild( elem.firstChild );
        }

        // If this is a select, ensure that it displays empty (#12336)
        // Support: IE<9
        if ( elem.options && jQuery.nodeName( elem, "select" ) ) {
            elem.options.length = 0;
        }
    }

    return this;
}

jQuery 1.9.1 html方法的实现:

    
html: function( value ) {
        return jQuery.access( this, function( value ) {
            var elem = this[0] || {},
                i = 0,
                l = this.length;

            if ( value === undefined ) {
                return elem.nodeType === 1 ?
                    elem.innerHTML.replace( rinlinejQuery, "" ) :
                    undefined;
            }

            // See if we can take a shortcut and just use innerHTML
            if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
                ( jQuery.support.htmlSerialize || !rnoshimcache.test( value )  ) &&
                ( jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value ) ) &&
                !wrapMap[ ( rtagName.exec( value ) || ["", ""] )[1].toLowerCase() ] ) {

                value = value.replace( rxhtmlTag, "<$1></$2>" );

                try {
                    for (; i < l; i++ ) {
                        // Remove element nodes and prevent memory leaks
                        elem = this[i] || {};
                        if ( elem.nodeType === 1 ) {
                            jQuery.cleanData( getAll( elem, false ) );
                            elem.innerHTML = value;
                        }
                    }

                    elem = 0;

                // If using innerHTML throws an exception, use the fallback method
                } catch(e) {}
            }

            if ( elem ) {
                this.empty().append( value );
            }
        }, null, value, arguments.length );
    },

可以看到，当传入的参数不为html字符串时，会执行这样的语句:

  
if ( elem ) {
    this.empty().append( value );
}

不言而喻，当传入的参数不为html字符串或html字符串较长时，$().empty().append(value)的性能会优于$().html(value),性能测试之jquery html vs empty append;
同时，基于代码可读性也建议优先使用$().empty().append(value)

refs :
jquery-html-vs-empty-append
kill-lots-kids
deleting-child-nodes-of-a-div-node
Element.innerHTML