Common interface for various devices (web, smart tv, tablet, mobile)

Question

We deliver content for different devices - web, smart tv, tablet and mobile - and I'm trying to provide a common JavaScript interface providing functions like play stream, alert, log etc without thinking of how the device actually do this.

My question is: Is there a way to provide this like an interface, that the Device could implement and ensure that all implementations follows this interface signature?

Example of implementation of typical functions against web browser on pc:

    $.extend({
        Device : function() {

            this.play = function(url){
                console.log("Play: " + url);
            }

            this.alert = function(title, message, buttonText) {
                alert(title + "\n" + message);
            }

            this.log = function(message){
                console.log(message);
            }

            this.error = function(message){
                console.error(message);
            }
        }
    });

The same functions against against samsung tv

$.extend({
    Device : function() {
        var that = this;

        var TV = new $.TV();
        TV.init();

        this.play = function(url){
            TV.play(url);
            that.log("Play: " + url);
        }

        this.alert = function(title, message, buttonText) {
            alert(title + "\n" + message);
        }

        this.log = function(message){
            //no console on tv, so have to include on in the html
            $("#console").append('<div class="console-log">' + message + '</div>');
            if($("#console").children().size()>=5){
                $("#console").children().first().remove();
            }
        }

        this.error = function(message){                
            $("#console").append('<div class="console-error">' + message + '</div>');
            if($("#console").children().size()>=5){
                $("#console").children().first().remove();
            }
        }
    }
});

Answer 1

Sure there is. They are called prototypes.

You use prototypical inheritance.

(Uses .new and Object.make because prototypes are a bit ugly otherwise)

// Device prototype
var Device = {
    play: function(url){
        console.log("Play: " + url);
    },
    alert: function(title, message, buttonText) {
        alert(title + "\n" + message);
    },
    log: function(message){
        console.log(message);
    },
    error: function(message){
        console.error(message);
    }
};

var TVDevice = Object.make(Device, {
    constructor: function () {
        this.TV = new $.TV();
        this.TV.init();
    },
    play: function (url) {
        Device.play.apply(this, arguments);
        this.TV.play(url);    
    },
    log: function (message) {
        //no console on tv, so have to include on in the html
        $("#console").append('<div class="console-log">' + message + '</div>');
        if($("#console").children().size()>=5){
            $("#console").children().first().remove();
        }
    },
    error: function(message){                
        $("#console").append('<div class="console-error">' + message + '</div>');
        if($("#console").children().size()>=5){
            $("#console").children().first().remove();
        }
    }
});

var tvDevice = TVDevice.new();