0

So I wan't to preview some UI effects without the user having to refresh their client. I thought of doing this by creating a new instance of my Anim object which is defined using a plain simple constructor.

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

So far so good, but how do I create a new instance of an object away from it's constructor?

This is in a different file, trying to create a new instance just for the sake of previewing it to the user. I'm receiving an error telling me that:

Anim is not defined

I get that it's out of scope, but how do I make it available? 

$('span').on('click', function() {
    new Anim( $('div') );
});
cнŝdk
  • 31,391
  • 7
  • 56
  • 78
piggypig
  • 117
  • 8
  • 1
    So `Anim` is out of scope... How are you including the first file? – elclanrs Jul 18 '15 at 23:46
  • Anim is defined as a plugin, no namespace, separate file. – piggypig Jul 18 '15 at 23:48
  • 2
    Make sure `Anim` is accessible from whatever scope your other file is in, and also `Anim` is defined at the time when `new Anim` is being executed. – Derek 朕會功夫 Jul 18 '15 at 23:49
  • @piggypig: What "plugin" are you talking about? A jQuery plugin? What pattern does it use? Please show the complete file and how you load it. – Bergi Jul 18 '15 at 23:55
  • If you include both files in your HTML via ` – kadrian Jul 18 '15 at 23:56
  • But since it being an object, not defined inside a any other function scope or namespace object, shouldn't it be available in the global scope and therefor callable now? – piggypig Jul 19 '15 at 00:04
  • @Bergi, It's literally as simple as shown above, no jQuery widget pattern, just a constructor, what's inside the methods doesn't matter. Could be as simple as an alert telling the user what effect was chosen. – piggypig Jul 19 '15 at 00:05
  • @Bergi. I can't post it all, if wan't an exact example, have a look at [this Bootstrap](https://github.com/twbs/bootstrap/blob/master/js/alert.js) plugin, my plugin is using the same "pattern". – piggypig Jul 19 '15 at 00:12
  • 1
    @piggypig: That *is* a jQuery plugin. It's not "just" a constructor, the constructor is in an IEFE scope that makes it invisible to the outside. You're not creating a global variable there – Bergi Jul 19 '15 at 00:26
  • @bergi, You're right, I wasn't thinking clear and didn't write that part in my own plugin yet. When done it's a jQuery plugin, which makes it way easier. I'll make it so I can do $('div').anim('zoomIn') since that will be attached to jQuery prototype, which is in scope. Cool! Thanks. – piggypig Jul 19 '15 at 00:34

1 Answers1

1

The best approach here is to define your Anim object as a Module, take a look at AMD (Asynchronus Module Definition), then you can just import our js file everywhere and use new instances of your object:

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

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

Put it in afile call it Anim.js.

Then just include this file in your HTML page or in any other JS file and create new instances of Anim object:

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

For further information about AMD modules, take a look at:

cнŝdk
  • 31,391
  • 7
  • 56
  • 78