1

http://jqueryui.com/demos/widget/にあるこの例のjQueryUIウィジェットを考えると：

$(function() {
    // the widget definition, where "custom" is the namespace,
    // "colorize" the widget name
    $.widget( "custom.colorize", {
        // default options
        options: {
            red: 255,
            green: 0,
            blue: 0,

            // callbacks
            change: null,
            random: null
        },

        // the constructor
        _create: function() {
            this.element
                // add a class for theming
                .addClass( "custom-colorize" )
                // prevent double click to select text
                .disableSelection();

            this.changer = $( "<button>", {
                text: "change",
                "class": "custom-colorize-changer"
            })
            .appendTo( this.element )
            .button();

            // bind click events on the changer button to the random method
            // in 1.9 would use this._bind( this.changer, { click: "random" });
            var that = this;
            this.changer.bind("click.colorize", function() {
                // _bind would handle this check
                if (that.options.disabled) {
                    return;
                }
                that.random.apply(that, arguments);
            });
            this._refresh();
        },

        // called when created, and later when changing options
        _refresh: function() {
            this.element.css( "background-color", "rgb(" +
                this.options.red +"," +
                this.options.green + "," +
                this.options.blue + ")"
            );

            // trigger a callback/event
            this._trigger( "change" );
        },

        // a public method to change the color to a random value
        // can be called directly via .colorize( "random" )
        random: function( event ) {
            var colors = {
                red: Math.floor( Math.random() * 256 ),
                green: Math.floor( Math.random() * 256 ),
                blue: Math.floor( Math.random() * 256 )
            };

            // trigger an event, check if it's canceled
            if ( this._trigger( "random", event, colors ) !== false ) {
                this.option( colors );
            }
        },

        // events bound via _bind are removed automatically
        // revert other modifications here
        _destroy: function() {
            // remove generated elements
            this.changer.remove();

            this.element
                .removeClass( "custom-colorize" )
                .enableSelection()
                .css( "background-color", "transparent" );
        },

        // _setOptions is called with a hash of all options that are changing
        // always refresh when changing options
        _setOptions: function() {
            // in 1.9 would use _superApply
            $.Widget.prototype._setOptions.apply( this, arguments );
            this._refresh();
        },

        // _setOption is called for each individual option that is changing
        _setOption: function( key, value ) {
            // prevent invalid color values
            if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
                return;
            }
            // in 1.9 would use _super
            $.Widget.prototype._setOption.call( this, key, value );
        }
    });

    // initialize with default options
    $( "#my-widget1" ).colorize();

    // initialize with two customized options
    $( "#my-widget2" ).colorize({
        red: 60,
        blue: 60
    });

    // initialize with custom green value
    // and a random callback to allow only colors with enough green
    $( "#my-widget3" ).colorize( {
        green: 128,
        random: function( event, ui ) {
            return ui.green > 128;
        }
    });

    // click to toggle enabled/disabled
    $( "#disable" ).toggle(function() {
        // use the custom selector created for each widget to find all instances
        $( ":custom-colorize" ).colorize( "disable" );
    }, function() {
        $( ":custom-colorize" ).colorize( "enable" );
    });

    // click to set options after initalization
    $( "#black" ).click( function() {
        $( ":custom-colorize" ).colorize( "option", {
            red: 0,
            green: 0,
            blue: 0
        });
    });
});

次のような詳細モードでGoogleClosureCompilerを使用してコードをコンパイルします。

編集：externs_urlの代わりにする必要がありますが、明らかに複数の定義externを持つことはできません。externs_urlのcode_url代わりにextern、コンパイラは117の警告をスローします。

// ==ClosureCompiler==
// @compilation_level ADVANCED_OPTIMIZATIONS
// @output_file_name default.js
// @extern https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @extern https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js
// @formatting pretty_print
// ==/ClosureCompiler==

$(function() {
// the widget definition, where "custom" is the namespace,
// "colorize" the widget name
$.widget( "custom.colorize", {
// default options
options: {
red: 255,
green: 0,
blue: 0,

// callbacks
change: null,
random: null
},

// the constructor
_create: function() {
this.element
// add a class for theming
.addClass( "custom-colorize" )
// prevent double click to select text
.disableSelection();

this.changer = $( "<button>", {
text: "change",
"class": "custom-colorize-changer"
})
.appendTo( this.element )
.button();

// bind click events on the changer button to the random method
// in 1.9 would use this._bind( this.changer, { click: "random" });
var that = this;
this.changer.bind("click.colorize", function() {
// _bind would handle this check
if (that.options.disabled) {
return;
}
that.random.apply(that, arguments);
});
this._refresh();
},

// called when created, and later when changing options
_refresh: function() {
this.element.css( "background-color", "rgb(" +
this.options.red +"," +
this.options.green + "," +
this.options.blue + ")"
);

// trigger a callback/event
this._trigger( "change" );
},

// a public method to change the color to a random value
// can be called directly via .colorize( "random" )
random: function( event ) {
var colors = {
red: Math.floor( Math.random() * 256 ),
green: Math.floor( Math.random() * 256 ),
blue: Math.floor( Math.random() * 256 )
};

// trigger an event, check if it's canceled
if ( this._trigger( "random", event, colors ) !== false ) {
this.option( colors );
}
},

// events bound via _bind are removed automatically
// revert other modifications here
_destroy: function() {
// remove generated elements
this.changer.remove();

this.element
.removeClass( "custom-colorize" )
.enableSelection()
.css( "background-color", "transparent" );
},

// _setOptions is called with a hash of all options that are changing
// always refresh when changing options
_setOptions: function() {
// in 1.9 would use _superApply
$.Widget.prototype._setOptions.apply( this, arguments );
this._refresh();
},

// _setOption is called for each individual option that is changing
_setOption: function( key, value ) {
// prevent invalid color values
if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
return;
}
// in 1.9 would use _super
$.Widget.prototype._setOption.call( this, key, value );
}
});

// initialize with default options
$( "#my-widget1" ).colorize();

// initialize with two customized options
$( "#my-widget2" ).colorize({
red: 60,
blue: 60
});

// initialize with custom green value
// and a random callback to allow only colors with enough green
$( "#my-widget3" ).colorize( {
green: 128,
random: function( event, ui ) {
return ui.green > 128;
}
});

// click to toggle enabled/disabled
$( "#disable" ).toggle(function() {
// use the custom selector created for each widget to find all instances
$( ":custom-colorize" ).colorize( "disable" );
}, function() {
$( ":custom-colorize" ).colorize( "enable" );
});

// click to set options after initalization
$( "#black" ).click( function() {
$( ":custom-colorize" ).colorize( "option", {
red: 0,
green: 0,
blue: 0
});
});
});

コンパイラは19個の警告を返します。

Number of warnings: 19

JSC_INEXISTENT_PROPERTY: Property widget never defined on $ at line 4 character 0
$.widget( "custom.colorize", {
^
JSC_INEXISTENT_PROPERTY: Property addClass never defined on this.element at line 18 character 0
this.element
^
JSC_INEXISTENT_PROPERTY: Property disableSelection never defined on ? at line 18 character 0
this.element
^
JSC_INEXISTENT_PROPERTY: Property appendTo never defined on ? at line 24 character 15
this.changer = $( "<button>", {
               ^
JSC_INEXISTENT_PROPERTY: Property css never defined on this.element at line 46 character 0
this.element.css( "background-color", "rgb(" +
^
JSC_INEXISTENT_PROPERTY: Property _trigger never defined on this at line 53 character 0
this._trigger( "change" );
^
JSC_INEXISTENT_PROPERTY: Property _trigger never defined on this at line 66 character 5
if ( this._trigger( "random", event, colors ) !== false ) {
     ^
JSC_INEXISTENT_PROPERTY: Property option never defined on this at line 67 character 0
this.option( colors );
^
JSC_INEXISTENT_PROPERTY: Property css never defined on ? at line 77 character 0
this.element
^
JSC_INEXISTENT_PROPERTY: Property enableSelection never defined on ? at line 77 character 0
this.element
^
JSC_INEXISTENT_PROPERTY: Property removeClass never defined on this.element at line 77 character 0
this.element
^
JSC_INEXISTENT_PROPERTY: Property Widget never defined on $ at line 87 character 0
$.Widget.prototype._setOptions.apply( this, arguments );
^
JSC_INEXISTENT_PROPERTY: Property Widget never defined on $ at line 98 character 0
$.Widget.prototype._setOption.call( this, key, value );
^
JSC_INEXISTENT_PROPERTY: Property colorize never defined on ? at line 103 character 0
$( "#my-widget1" ).colorize();
^
JSC_INEXISTENT_PROPERTY: Property colorize never defined on ? at line 106 character 0
$( "#my-widget2" ).colorize({
^
JSC_INEXISTENT_PROPERTY: Property colorize never defined on ? at line 113 character 0
$( "#my-widget3" ).colorize( {
^
JSC_INEXISTENT_PROPERTY: Property colorize never defined on ? at line 123 character 0
$( ":custom-colorize" ).colorize( "disable" );
^
JSC_INEXISTENT_PROPERTY: Property colorize never defined on ? at line 125 character 0
$( ":custom-colorize" ).colorize( "enable" );
^
JSC_INEXISTENT_PROPERTY: Property colorize never defined on ? at line 130 character 0
$( ":custom-colorize" ).colorize( "option", {
^

高度なコンパイルモードでGoogleClosureCompilerを使用してjQueryUIウィジェット（ jQuery UIウィジェットファクトリに基づく）をコンパイルするにはどうすればよいですか？コンパイラによってスローされた警告を解決するにはどうすればよいですか？

4

1 に答える 1

1

jQueryコアexternsファイルに加えて、 jQueryUIexternsファイルも必要になります。これは、jQueryUIによってコンパイラーに提供されるシンボルとタイプ情報を定義するために必要です。

残念ながら、現在、jQueryUIの既知のexternファイルはありません。オプションは、使用するのに十分な数を作成するか、SIMPLE_OPTIMIZATIONSを使用することです。

于 2012-08-08T13:13:26.667 に答える