Question

我正在创建一个幻灯片，使用Transition对象来转换幻灯片：

function Transition(slide, settings){
    this.slide = slide;
    this.el = slide.el;
    this.settings = settings;
    this.duration = (this.settings['transitionSpeed'] / 1000) + 's';
    this.endAnimation = null;
}

Transition.prototype.inRight = function(callback){
    callback();
}

Transition.prototype.outRight = function(callback){
    callback();
}

Transition.prototype.inLeft = function(callback){
    callback();
}

Transition.prototype.outLeft = function(callback){
    callback();
}

每个方法都对应于幻灯片在从右侧，右侧，左侧和左侧过渡时的行为方式。当Transition对幻灯片采取行动时，一切顺利;

function ClassBasedTransition(slide, settings, transitionName){
    Transition.call(this, slide, settings);
    this.transitionName = transitionName;
}

ClassBasedTransition.prototype = Object.create(Transition.prototype);
ClassBasedTransition.prototype.constructor = ClassBasedTransition;

ClassBasedTransition.prototype.inRight = function(callback){
    var self = this;
    this.endAnimation = function(){
        DomUtil.removeClass(this, 'nd-' + self.transitionName + '-in-right-transition');
        callback();
        this.removeEventListener( 'webkitAnimationEnd', bound );
    }

    var bound = this.endAnimation;
    this.el.style.webkitAnimationDuration = this.duration;

    this.el.addEventListener( 'webkitAnimationEnd', bound);
    DomUtil.addClass(this.el, 'nd-' + this.transitionName + '-in-right-transition');
}

 **SNIP**

然而，由于我一直在介绍3D过渡，我实际上是在库容器上进行过渡，而不是单独的幻灯片，有四个过渡没有意义，而只有两个：

 //3 DIMENSIONAL TRANSITION
function D3Transition(slide, settings, transitionName){
    Transition.call(this, slide, settings);
    this.transitionName = transitionName;

    this.galleryEl = slide.gallery.el;
    if(!DomUtil.hasClass(this.galleryEl, 'nd-' + transitionName + '-gallery'))
        DomUtil.addClass(this.galleryEl, 'nd-' + transitionName + '-gallery');
}

D3Transition.prototype = Object.create(Transition.prototype);
D3Transition.prototype.constructor = D3Transition;

D3Transition.prototype.inRight = function(callback){
     **APPLY 3D EFFECT FORWARD**
}

D3Transition.prototype.inLeft = function(callback){
        **EFFECT 3D EFFECT IN REVERSE**
    }

D3Transition.prototype.outLeft = function(callback){
     **NO OP**
}

D3Transition.prototype.outRight = function(callback){
        **NO OP**
    }

有没有办法密封D3Transition.prototype.outLeft和D3Transition.prototype.outRight，以便派生对象无法实现它们？我知道我们可以用javascript密封对象，有没有办法密封个别原型函数？

Answer 1

您可以使属性不可写，以便继承类无法对其进行修改：

Object.defineProperty(D3Transition.prototype, 'outLeft', {
  value    : function(){},
  writable : false
});

使用两种方式进行演示：http://jsbin.com/paqehera/1/edit

此解决方案可防止对outLeft属性的直接赋值对继承类原型和任一类的实例产生任何影响。但是，解决方案并不完美，因为可以再次使用Object.defineProperty在原型或实例上重新定义属性（如Benjamin Gruenbaum的评论中所述）。

Answer 2

你做出左转和右转的那一刻只是功能

var outLeft = function() {};

而不是原型，它变成了'私有'方法，这意味着它只能在D3Transition中使用。但是你需要像这样实现它：

function d3Transition() {
    var outLeft = function() {};
}

派生对象无法访问该方法，但可以从D3Transition内部访问，基本上将其设为私有。

我相信这就是你所需要的。

Answer 3

如果您不希望D3Transistion没有outLeft和outRight，您可以将它们设置为null或undefined，因为尝试调用它会引发错误，但它仍会显示在属性列表中。

D3Transition.prototype.outLeft = D3Transition.prototype.outRight = null;

你基本上通过让函数在原型链的下方隐藏它，所以Transition.prototype.outLeft将不会用于D3Transition的实例或从它继承的对象。

javascript中的密封方法

3 个答案: