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));