关于js内存泄露

Question

自己写了一段代码，朋友一看就指出了一些问题，考虑场景不全面啊之类的，然后也说了存在内存泄露问题，对于js内存泄露这个东西，一直不懂···麻烦各位指点一二···，看看下面的代码哪里有问题，哪里存在内存泄露，如果可以，也麻烦贴一下这方面的好的文章

/**
 *
 *
 *
 *
 * 
 */
var $=require("$");
/**
 * [getPrefix 补充前缀]
 * @param  {[type]} opt [css3 对象]
 * @return {[type]}     [css3 对象]
 */
var getPrefix=function(opt){
    var prefix=['-webkit-','-moz-','-ms-','-o-'];
    var result={};
    var i=0;
    for(var i=0;i<=prefix.length;i++){
        if(i==prefix.length){
            for(key in opt){
                result[key]=opt[key];
            }
        }
        else{
            for(key in opt){
                result[prefix[i]+''+key]=opt[key];
            }
        }
        
    }

    return result;
};
/**
 * [getobj 重定义对象]
 * @param  {[type]} obj [description]
 * @return {[type]}     [description]
 */
var getobj=function(obj){
    if(!obj || Object.prototype.toString.call(obj) !== "[object Object]"){
        return {};
    }else{
        return obj;
    }
};
/**
 * [transition description]
 * @param  {[type]}   obj      [设置过渡 DOM]
 * @param  {[type]}   property [过渡属性]
 * @param  {[type]}   duration [过渡时间]
 * @param  {Function} fn       [过渡方式]
 * @param  {[type]}   delay    [延迟时间]
 * @param  {Function} callback [回调]
 * @return {[type]}            [description]
 */
exports.transition=function(obj,property,duration,fn,delay,callback){
    var cc_opt={
        "property":property || "all",
        "duration":duration || "0.5s",
        "fn":fn ||"linear",
        "delay":delay || "0s"
    };
    if(parseFloat(duration)>0){
        queue.duration=parseFloat(duration)*1000;
    }
    var cssopt={
        "transition":cc_opt.property+" "+cc_opt.duration+" "+cc_opt.fn+" "+cc_opt.delay
    };
    cssopt=getPrefix(cssopt);
    obj.css(cssopt);
    callback && callback.call && callback.call();
};

/**
 * [translate3d description]
 * @param  {[type]}   obj      [description]
 * @param  {[type]}   opt      [description]
 * @param  {Function} callback [description]
 * @return {[type]}            [description]
 */
exports.translate3d=function(obj,opt,callback){
    if(!this.isqueue){
        var _this=queue;
    }else{
        _this=this;
    }
    opt=getobj(opt);
    var point={
        x:opt.x!==undefined && parseFloat(opt.x)>=0?opt.x:0,
        y:opt.y!==undefined && parseFloat(opt.y)>=0?opt.y:0,
        z:opt.z!==undefined && parseFloat(opt.z)>=0?opt.z:0
    };
    var cc_opt={
        'transform':'translate3d('+point.x+'px,'+point.y+'px,'+point.z+'px)'
    };
    cc_opt=getPrefix(cc_opt);
    obj.css(cc_opt);
    callback && callback.call && callback.call();
    setTimeout(function(){
        _this.dequeue();
    },_this.duration);
    return _this;
}

/**
 * [scale3d description]
 * @param  {[type]}   obj      [description]
 * @param  {[type]}   opt      [description]
 * @param  {Function} callback [description]
 * @return {[type]}            [description]
 */
exports.scale3d=function(obj,opt,callback){
    if(!this.isqueue){
        var _this=queue;
    }else{
        _this=this;
    }
    opt=getobj(opt);
    var point={
        x:opt.x!==undefined && parseFloat(opt.x)>=0?opt.x:1,
        y:opt.y!==undefined && parseFloat(opt.y)>=0?opt.y:1,
        z:opt.z!==undefined && parseFloat(opt.z)>=0?opt.z:1
    };
    var cc_opt={
        'transform':'scale3d('+point.x+','+point.y+','+point.z+')'
    };
    cc_opt=getPrefix(cc_opt);
    obj.css(cc_opt);
    callback && callback.call && callback.call();
    setTimeout(function(){
        _this.dequeue();
    },_this.duration);
    return _this;
}
/**
 * [rotate description]
 * @param  {[type]}   obj      [description]
 * @param  {[type]}   opt      [description]
 * @param  {Function} callback [description]
 * @return {[type]}            [description]
 */
exports.rotate=function(obj,opt,callback){
    if(!this.isqueue){
        var _this=queue;
    }else{
        _this=this;
    }
    opt=getobj(opt);
    var type=false;
    var point={
        x:opt.x!==undefined && parseFloat(opt.x)>=0?parseFloat(opt.x):false,
        y:opt.y!==undefined && parseFloat(opt.y)>=0?parseFloat(opt.y):false,
        z:opt.z!==undefined && parseFloat(opt.z)>=0?parseFloat(opt.z):false,
        angle: opt.angle!==undefined && parseFloat(opt.angle)>=0?parseFloat(opt.angle):false,
    };
    var cc_opt={
        'transform':''
    };
    if(!isNaN(point.x) && isNaN(point.y) && isNaN(point.z)){
        type='rotateX';
    }
    else if(isNaN(point.x) && !isNaN(point.y) && isNaN(point.z)){
        type='rotateY';
    }
    else if(isNaN(point.x) && isNaN(point.y) && !isNaN(point.z)){
        type='rotateZ';
    }
    else if(!isNaN(point.x) && !isNaN(point.y) && !isNaN(point.z)){
        type='rotate3d';
    }
    else if(!isNaN(point.x) && !isNaN(point.y) && isNaN(point.z) && !isNaN(angle)){
        type='rotate';
    }
    else{
        throw new Error('opt参数错误！');
    }

    switch(type){
        case 'rotateX':
            cc_opt['transform']='rotateX('+point.x+'deg)';
        break;
        case 'rotateY':
            cc_opt['transform']='rotateY('+point.y+'deg)';
        break;
        case 'rotateZ':
            cc_opt['transform']='rotateZ('+point.z+'deg)';
        break;
        case 'rotate3d':
            cc_opt['transform']='rotate3d('+point.x+','+point.y+','+point.z+','+point.angle+'deg)';
        break;
        case 'rotate':
            cc_opt['transform']='rotate('+point.x+','+point.y+')';
        break;
        default:
        break;
    };

    cc_opt=getPrefix(cc_opt);
    obj.css(cc_opt);

    setTimeout(function(){
        _this.dequeue();
    },_this.duration);
    return _this;
};

/**
 * [Queue 队列函数]
 */
function Queue(){
    this.list=[];
    return this;
}
Queue.prototype={
    isqueue:true,
    duration:1,
    //出列
    dequeue:function(){
        var _this=this;
        var dofn=false;
        if(_this.getLen()>0){
            dofn=_this.list.shift();
            dofn && dofn.call && dofn();
        }else{
            return false;
        }
    },
    //入列
    enqueue:function(fn){
        var _this=this;
        _this.list.push(fn);
    },
    //初始化队列函数
    addQueueFn:function(key,fn){
        var _this=this;
        if(!_this[key]){
            _this[key]=function(){
                var _arguments=arguments;
                _this.enqueue(function(){
                    fn.apply(_this,_arguments);
                });
                return _this;
            };
        }
    },
    //获取长度
    getLen:function(){
        var _this=this;
        return _this.list.length;
    }
};
var queue=new Queue();
//添加队列函数
queue.addQueueFn("translate3d",exports.translate3d);
queue.addQueueFn("rotate",exports.rotate);
queue.addQueueFn("scale3d",exports.scale3d);

Answer 1

你朋友说了，有内存泄露，为何不问问你朋友呢？

我不知道题主写js有多久了哈，只能用“中规中矩”四个字来说。

别怕内存泄露，别一听到内存泄露，就惊悚万分。
有内存泄露很正常，浏览器自身都存在来不及释放的可能，当然我们需要通过优化代码来避免内存泄露。

你可以先去了解下，js常见的内存泄露的几种方式，还有使用Chrome之类的Heap Profiling工具来检测，是否真有内存泄露。

内存泄露属于优化的范畴，如果是初学别太纠结。还有就是，其实很多公司实际项目开发的时候真不是很在乎这些优化处理。

当然，你内存泄露非常厉害，那另当别论。