使用闭包编译器时，如何使用静态方法创建一个类数组？

Question

I'm having issues with an API I'm developing. I want to have an array of classes, each of which implement the same interface and have static methods. I will have another class that will cycle through the array of classes and pick one based on the return value of one of the static methods, but the compiler is removing the static methods and the javascript encounters a TypeError when it tries to call the static method. I've tried searching several forums, but I can't find anything that helps. This error only happens in advanced compilation mode, not simple, and even happens in advanced compilation in debug mode.

I am thinking this is because the compiler doesn't realize I am using the function because of the complicated way I am calling it.

I have put together a somewhat simplified example of what I am trying to do that causes an error.

See below for the code:

The Racer interface is an interface that is implemented by two classes: Runner and Jogger . The interface has one static method called getModesOfTransportation that returns an array of the ways that racer can move, and an instance method, called getTransportationModes, that does the same thing. This file also defines a custom type, racing.RacerClass , that (I think) makes a type that is a function that returns a racer object when called with the new keyword. I formed this based on https://developers.google.com/closure/compiler/docs/js-for-compiler#types . I would think that I should define that the type also has a static method, but I can't figure out how. Could this custom type be the culprit of the error?

racer.js:

    goog.provide('racing.Racer');

    /** @typedef function(new:racing.Racer)*/
    racing.RacerClass={};// My custom typedef

    /**
     * Interface for racers.
     * @interface
     */
    racing.Racer=function(){};

    /**
     * Gets the ways this racer can move.
     * @return {Array.<string>} The ways this racer can move.
     */
    racing.Racer.getModesOfTransportation=function(){}


    /**
     * Gets the ways this racer can move.
     * @return {Array.<string>} The ways this racer can move.
     */
    racing.Racer.prototype.getTransportationModes=function(){}

The Helper class stores a list of Racer constructors. The registerRacer function accepts a constructor for a Racer and adds it to the list. The constructor function passed will also have a static getModesOfTransportation function on it. The getRacers function returns a list of the racers that have been registered.

helper.js:

    goog.provide('racing.Helper');

    /**
     * A collection of functions to help with finding racers.
     */
    racing.Helper={};


    /**
     * An array of racers.
     * @type {Array.<racing.RacerClass>}
     * @private
     */
    racing.Helper.racers_=[]


    /**
     * Adds the given racer to the list.
     * @param {racing.RacerClass} racer A racer to add to the list of racers.
     */
    racing.Helper.registerRacer=
    function(racer){
            racing.Helper.racers_.push(racer);
    }


    /**
     * Gets an array of registered racers.
     * @return Array.<racing.RacerClass> A list of all registered racers.
     */
    racing.Helper.getRacers=
    function(){
            return racing.Helper.racers_;
    }

The Jogger class implements the Racer interface, the return value of the two functions is ['jog'] At the end of the file, it registers itself with the helper.

jogger.js:

    goog.provide('racing.Jogger');
    goog.require('racing.Racer');
    goog.require('racing.Helper');

    /**
     * This racer can jog.
     * @constructor
     */
    racing.Jogger=function(){
            console.log('Jogger is going');
    };

    /**
     * Gets the ways this racer can move.
     * @static
     * @return {Array.<string>} The ways this racer can move.
     */
    racing.Jogger.getModesOfTransportation=
    function(){
            return ['jog'];//I can jog
    }


    /**
     * Gets the ways this racer can move.
     * @return {Array.<string>} The ways this racer can move.
     */
    racing.Jogger.prototype.getTransportationModes=
    function(){
            return ['jog'];//I can jog
    }

    //Register this racer
    racing.Helper.registerRacer(racing.Jogger);

The Runner class also implements the Racer interface, but the return value of the two functions is ['run'] At the end of the file, it registers itself with the helper.

runner.js:

    goog.provide('racing.Runner');
    goog.require('racing.Racer');
    goog.require('racing.Helper');

    /**
     * This racer can run.
     * @constructor
     */
    racing.Runner=
    function(){
            console.log('Runner is going');
    };

    /**
     * Gets the ways this racer can move.
     * @static
     * @return {Array.<string>} The ways this racer can move.
     */
    racing.Runner.getModesOfTransportation=
    function(){
            return ['run'];//I can run
    }


    /**
     * Gets the ways this racer can move.
     * @return {Array.<string>} The ways this racer can move.
     */
    racing.Runner.prototype.getTransportationModes=
    function(){
            return ['run'];//I can run
    }

    //Register this racer
    racing.Helper.registerRacer(racing.Runner);

The Organizer class has a public function called startRace that gets and stores an instance of a Racer that can run by calling the protected getRunner function. The getRunner function cycles through the list of racers and tries to find one that can run, but, once the code has been compiled, the racerClass.getModesOfTransportation() fails saying that getModesOfTransportation is undefined.

organizer.js:

    goog.provide('racing.Organizer');
    goog.require('racing.Helper');
    goog.require('goog.array');

    /** 
     * Class that helps with starting a race.
     * @constructor
     */
    racing.Organizer=function(){}


    /**
     * A racer that can run.
     * @protected
     * @returns {racing.Racer}
     */
    racing.Organizer.prototype.runner=null;


    /**
     * Get a racer that can run.
     * @protected
     * @returns {racing.Racer}
     */
    racing.Organizer.prototype.getRunner=
    function(){
            //Cycle through the racers until we find one that can run.
            goog.array.findIndex(racing.Helper.getRacers(),
                    function(racerClass){
                            if(goog.array.contains(racerClass.getModesOfTransportation(),'run')){
                                    this.runner=new racerClass();
                                    return true;
                            }
                            else return false;
                    },this
            );
    }


    /**
     * Starts a race.
     */
    racing.Organizer.prototype.startRace=
    function(){
            this.runner=this.getRunner();
    }

The final file just includes all of the classes for the compiler.

api.js:

    //Include the racers
    goog.require('racing.Runner');
    goog.require('racing.Jogger');

    //Include the organizer and export its properties
    goog.require('racing.Organizer')
    goog.exportSymbol('racing.Organizer', racing.Organizer);
    goog.exportProperty(racing.Organizer.prototype, 'startRace', racing.Organizer.prototype.startRace);

Running new racing.Organizer().startRace(); on the compiled code, in debug mode, yields the following error, and when I look at the compiled code, the getModesOfTransportation function no longer exists:

    Uncaught TypeError: Object function () {
            console.log("Runner is going")
    } has no method '$getModesOfTransportation$'
    $$racing$Organizer$$$$$startRace$$
    (anonymous function)

I'd like to be able to get this to work without having to split the class into a class with just static functions, and a class with just the constructor, because that would make the code confusing. I've tried to figure this out, but I can't.

Thanks in advance for any ideas/suggestions.

Answer 1

I think you might be able to use @expose to stop the compiler from removing members. Or maybe I mis-understand what you're asking.

Answer 2

As stated above "static" methods are collapsed, and @expose prevents this by exporting them. The alternatives are is to indirectly add the property:

function helperAddMyProp(obj, value) {
  obj.myProp = value;
}

/** @construcor */
function Foo() {};
helperAddMyProp(Foo, 1);

It will likely get inlined later but after properties have been collapsed. This demonstrates the problem (on closure-compiler.appspot.com):

// ==ClosureCompiler==
// @compilation_level ADVANCED_OPTIMIZATIONS
// @output_file_name default.js
// @formatting pretty_print
// @debug true
// ==/ClosureCompiler==

function Foo(name) {
  alert('Hello, ' + name);
}
Foo.prop = 2;
Foo("me");
alert(Foo.prop);

And this the solution:

// ==ClosureCompiler==
// @compilation_level ADVANCED_OPTIMIZATIONS
// @output_file_name default.js
// @formatting pretty_print
// @debug true
// ==/ClosureCompiler==

function addProp(obj, value) {
  obj.prop = value;
}
function Foo(name) {
  alert('Hello, ' + name);
}
addProp(Foo,2);
Foo("me");
alert(Foo.prop);

Answer 3

If you change RacerClass to @constructor , it will work.

/** @typedef function(new:racing.Racer)*/
racing.RacerClass={};// My custom typedef

Use @typedef only for object attributes consistency. Its instanceof is Object . But you need racing.RacerClass instanceof to be RacerClass .

EDIT:

change to:

/** 
* @constructor 
* @implements {racing.Racer} 
*/
racing.RacerClass={};// My custom typedef