炫酷js代码(持续整理)

323 阅读1分钟

1.判断对象类型(引用至《JavaScript设计模式与开发实践》)

var Type = {};
for ( var i = 0, type; type = [ 'String', 'Array', 'Number' ][ i++ ]; ){
    (function( type ){
        Type[ 'is' + type ] = function( obj ){
            return Object.prototype.toString.call( obj ) === '[object '+ type +']';
        }
    })( type )
};
Type.isArray( [] ); // 输出:true
Type.isString( "str" ); // 输出:true


2.惰性函数(引用至《JavaScript设计模式与开发实践》)

var addEvent = function( elem, type, handler ){
    if ( window.addEventListener ){
        addEvent = function( elem, type, handler ){
            elem.addEventListener( type, handler, false );
        }
    }else if ( window.attachEvent ){
        addEvent = function( elem, type, handler ){
            elem.attachEvent( 'on' + type, handler );
        }
    }
    addEvent( elem, type, handler );
};

3.nodejs多个异步函数处理完后回调函数(引用至《深入浅出Node.js》)

var after = function (times, callback) {
    var count = 0, results = {};
        return function (key, value) {
        results[key] = value;
        count++;
        if (count === times) {
            callback(results);
        }
    };
};
var done = after(times, render);

var emitter = new events.Emitter();
var done = after(times, render);
emitter.on("done", done);
emitter.on("done", other);

fs.readFile(template_path, "utf8", function (err, template) {
    emitter.emit("done", "template", template);
});

db.query(sql, function (err, data) {
    emitter.emit("done", "data", data);
});

l10n.get(function (err, resources) {
    emitter.emit("done", "resources", resources);
});

4.1px问题

//mixin代码
@mixin border ($direction, $color:rgba(0, 0, 0, 0.1), $opacity:1, $width:1px) {    
    position: relative;    
    &::before {        
        content: '';        
        position: absolute;        
        @if $direction=='left' {            
            border-left: $width solid $color;            
            top: 0;            
            left: 0;            
            height: 100%;            
            transform-origin: 0 0;            
            opacity: $opacity;        
        }@else if $direction=='bottom' {            
            width: 100%;            
            border-bottom: $width solid $color;            
            left: 0;            
            bottom: 0;            
            transform-origin: 0 bottom;            
            opacity: $opacity;        
        }@else if $direction=='top' {            
            width: 100%;            
            border-bottom: $width solid $color;            
            left: 0;            
            top: 0;            
            transform-origin: 0 bottom;            
            opacity: $opacity;        
        }@else if $direction=='right' {            
            width: 100%;            
            border-right: $width solid $color;            
            left: 0;            
            top: 0;            
            transform-origin: 0 0;            
            opacity: $opacity;        
        }@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx) {            
            @if $direction=='left' {                   
                height: 200%;            
            }@else {                
                width: 200%;            
            }
            transform: scale(.5);            
            @if $direction=='right' {                
                height: 200%;            
            }@else {                
                width: 200%;
            }        
        }@media (-webkit-min-device-pixel-ratio: 3),(min-resolution: 3dppx) {
            @if $direction=='left' {
                height: 300%;
            }@else {
                width: 300%;
            }@if $direction=='right' {
                height: 300%;
            }@else {
                width: 300%;
            }
            transform: scale(.33);
        }    
    }
}

//使用:
@include border(bottom, rgba(0, 0, 0, 0.1));