Closure Compiler @extends doesn't work when using class container objects

In the process of annotating all my javascript compilers to close, I am currently heavily dependent on defining classes in ie objects:

Class.SomeClass = function() {};
Class.SomeOtherClass = function() {};

      

, but not:

function SomeClass() {};
SomeClass.prototype = {};

      

However, this gives me a warning when I try to annotate the extension ... the compiler states that I cannot determine what type the Class.SomeClass is:

JSC_TYPE_PARSE_ERROR: Bad type annotation. Unknown type Class.SomeObject 
*  @extends Class.SomeObject

      

Paste the following code below into the closure compiler with ADVANCED_OPTIMIZATIONS :

// ==ClosureCompiler==
// @output_file_name default.js
// @compilation_level ADVANCED_OPTIMIZATIONS
// ==/ClosureCompiler==

(function($) {

    "use strict";

    var Class = {};

    /**
     *  @constructor
     */
    Class.ObjectA = function() {};
    Class.ObjectA.prototype = {};

    /**
     *  @constructor
     *  @extends Class.ObjectA
     */
    Class.ObjectB = function() {};
    Class.ObjectB.prototype = $.extend(new Class.ObjectA(), {
        initialize: function() {}
    });


    window.test = new Class.ObjectB();
    window.test.initialize();

})(jQuery);

      

+3


source to share


2 answers


The answer is not obvious. You just need to add @const

to your namespace Class

.



/** @const */
var Class = {};

      

+6


source


well, the easiest is, since you will be compiling it in advance mode anyway, maybe use goo.provide and just bundle base.js in. then obviously you should use goog.inherits for your inheritance as extended mode understands the .js base much better than $ .extends does.

so my code to achieve this would look like this:

// ==ClosureCompiler==
// @output_file_name default.js
// @compilation_level ADVANCED_OPTIMIZATIONS
// @use_closure_library true
// ==/ClosureCompiler==

goog.provide('Class.ObjectA')

/**
*  @constructor
*/
Class.ObjectA = function() {};

goog.provide('Class.ObjectB');
/**
*  @constructor
*  @extends Class.ObjectA
*/
Class.ObjectB = function() {};
Class.ObjectB.prototype =
{
    initialize: function() {}
}

goog.inherits(Class.ObjectB, Class.ObjectA);


window.test = new Class.ObjectB();
window.test.initialize();

      



In the ui compiler, you need to select the option to add closure library which will add goog.base.

Now you also have some jqueury style foo in your approach like (function ($) {}) (jQuery); which I would overestimate the usage if you are starting to push the advanced compilation route (I will personally use jquery versus the closure library, but I know people who continued to use jquery with advanced capabilities). going into advanced mode, I also recommend that you look at a build system like plovr.

+1


source







All Articles