1

鉴于此示例 jQuery UI 小部件，可在http://jqueryui.com/demos/widget/上找到：

$(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
        });
    });
});

使用Google Closure Compiler在高级模式下编译代码，如下所示：

编辑：它应该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", {
^

如何在高级编译模式下使用 Google Closure Compiler 编译jQuery UI 小部件（基于jQuery UI 小部件工厂）？如何解决编译器抛出的警告？

4

1 回答 1

1

除了jQuery 核心 externs 文件之外，您还需要一个 jQuery UI externs 文件。这是定义 jQuery UI 提供给编译器的符号和类型信息所必需的。

不幸的是，目前没有已知的 jQuery UI 外部文件。您的选择是创建足够的一个供您使用或使用 SIMPLE_OPTIMIZATIONS。

于 2012-08-08T13:13:26.667 回答