在幻灯片教程中使用 famo.us“this”

Use of 'this' in famo.us slideshow tutorial

本文关键字：us this famo 幻灯片 教程      更新时间：2023-09-26
本教程

中没有涉及，但我对幻灯片教程中"this"如何影响表面放置行为感到困惑。这是"幻灯片视图"视图：

/* 幻灯片视图 */

define(function(require, exports, module) {
    var View = require('famous/core/View');
    var Surface = require('famous/core/Surface');
    var Transform = require('famous/core/Transform');
    var StateModifier = require('famous/modifiers/StateModifier');
    var ImageSurface = require('famous/surfaces/ImageSurface');
    var SlideData = require('data/SlideData');

    // SlideView constructor function
    // runs once for each new instance
    function SlideView() {
        View.apply(this, arguments);
        this.rootModifier = new StateModifier({
            size: this.options.size
        });
        this.mainNode = this.add(this.rootModifier);
        _createBackground.call(this);
        _createFilm.call(this);
        _createPhoto.call(this);
    }
    SlideView.prototype = Object.create(View.prototype);
    SlideView.prototype.constructor = SlideView;
    SlideView.DEFAULT_OPTIONS = {
        size: [400, 450],
        filmBorder: 15,
        photoBorder: 3,
        photoUrl: SlideData.defaultImage
    };

    function _createBackground(){
        var background = new Surface({
               // undefined size will inherit size from parent modifier
            properties: {
                backgroundColor: '#FFFFF5',
                boxShadow: '0 10px 20px -5px rgba(0, 0, 0, 0.5)'
            }
        });
        this.mainNode.add(background);
    }
    function _createFilm() {
        this.options.filmSize = this.options.size[0] - 2 * this.options.filmBorder;
        var film = new Surface({
            size: [this.options.filmSize, this.options.filmSize],
            properties: {
                backgroundColor: '#222',
                zIndex: 1
            }
        });
        var filmModifier = new StateModifier({
            origin: [0.5, 0],
            align: [0.5, 0],
            transform: Transform.translate(0, this.options.filmBorder, 1)
        });
        this.mainNode.add(filmModifier).add(film);
    }
    function _createPhoto() {
        var photoSize = this.options.filmSize - 2 * this.options.photoBorder;
        var photo = new ImageSurface({
            size: [photoSize, photoSize],
            content: this.options.photoUrl,
            properties: {
                zIndex: 2
            }
        });
        this.photoModifier = new StateModifier({
            origin: [0.5, 0],
            align: [0.5, 0],
            transform: Transform.translate(0, this.options.filmBorder + this.options.photoBorder, 2)
        });
        this.mainNode.add(this.photoModifier).add(photo);
    }

    module.exports = SlideView;
});

在此示例中，有 3 个表面，背景、胶片和照片。背景不使用表面修改器，胶片使用表面修改器但不绑定到"this"，照片确实使用绑定到"this"的表面修改器。为什么照片需要绑定到"这个"而不是胶片？我已经做了一些尝试和澄清，但行为真的很不稳定。

当您不想在外部世界中重用该变量时，请使用局部作用域变量（如 filmModifier）。但是，如果要访问函数外部的修饰符，则一种方法是将其绑定到此修饰符。因此，似乎photoModifier希望在其他地方或以后重复使用。检查幻灯片教程的最终版本，您将获得答案。

回答你的问题"为什么照片需要绑定到'这个'而不是胶片？

  • 稍后将在视图中使用该photoModifier来创建photo的过渡。
  • filmModifier 仅在构建时用于设置film，以后不需要访问。

这是一个设计决策，以后可以修改。

注意：在代码示例中，您仅显示SlideView示例的第一个修订版。下面是从名为 fadeIn() 的SlideView的外部方法访问photoModifier的代码示例。

SlideView.prototype.fadeIn = function() {
    this.photoModifier.setOpacity(1, { duration: 1500, curve: 'easeIn' });
    this.shake();
};
相关文章：