远离它的构造函数创建新的对象实例

Question

所以我不想在用户不必刷新客户端的情况下预览某些 UI 效果。我想通过创建我的 Anim 对象的新实例来做到这一点，该实例是使用简单的构造函数定义的。

function Anim(elem) {
  this.elem = elem
}

Amin.prototype.zoomIn = function() {
 // Do stuff
},

Amin.prototype.zoomOut = function() {
 // Do stuff
}

// obj is a jQuery object, like $('div');
var instance = new Anim(obj);

到目前为止一切顺利，但我如何创建一个对象的新实例而不是它的构造函数？

这是在不同的文件中，试图创建一个新实例只是为了向用户预览它。我收到一条错误消息：

Anim is not defined

我知道它超出了范围，但我该如何让它可用？

$('span').on('click', function() {
    new Anim( $('div') );
});

Answer 1

这里最好的方法是将你的Anim对象定义为一个模块，看看AMD (Asynchronus Module Definition)，然后你就可以导入我们的js随处归档并使用对象的新实例：

define(function(){
    var Anim = function(elem) {
        this.elem = elem;
        this.zoomIn = function() {
           // Do stuff
        };

        this.zoomOut = function() {
           // Do stuff
        }
    }
    return Anim;
});

把它放在一个文件中，称之为 Anim.js。

然后只需将此文件包含在您的 HTML 页面或任何其他 JS 文件中，并创建 Anim 对象的新实例：

define([pathToyourFile.Anim],function(Anim){
    $('span').on('click', function() {
        var instance = new Anim( $('div') );
    });
});

有关 AMD 模块 的更多信息，请查看：

远离它的构造函数创建新的对象实例

Create new object instance away from it's constructor

javascript

object

constructor

instance