好的,首先这是我非常基本的 jQuery 插件
(function ($){
$.fn.greenify = function (options) {
var settings = $.extend({
// These are the defaults
color: '#556b2f',
backgroundColor: 'white'
}, options);
}(jQuery));
$('a').greenify({
color: 'orange'
}).showLinkLocation();
基本上所有这一切都是用提供的元素改变文本颜色和背景颜色。现在我要做的是将这个简单的插件转换为 TypeScript
我已经尝试了一些东西,我得到的最接近的是这个。
typescript
/// <reference path="../../typings/jquery/jquery.d.ts" />
module Coloring
{
interface IGreenifyOptions
{
color: string;
backgroundColor: string;
}
export class GreenifyOptions implements IGreenifyOptions
{
// Fields
color: string;
backgroundColor: string;
constructor(color: string, backgroundColor: string)
{
this.color = color;
this.backgroundColor = backgroundColor;
}
}
export class Greenify
{
// Fields
element: JQuery;
options: GreenifyOptions;
constructor(element: JQuery, options: GreenifyOptions)
{
this.element = element;
this.options = options;
this.OnCreate();
}
OnCreate()
{
this.element.css('color', this.options.color).css('background-color', this.options.backgroundColor);
}
}
}
调用它的 JQuery
$(function ()
{
var options: Coloring.GreenifyOptions = new Coloring.GreenifyOptions('#0F0', '#000');
var $elems = $('a');
$elems.each(function()
{
var result = new Coloring.Greenify($(this), options)
});
});
但是我不想提供像上面的 new Coloring.Greenify($(this), options)
这样的元素,我基本上想做这样的事情
$('a').Coloring.Greenify(options);
或
$('a').Coloring.Greenify(Coloring.GreenifyOptions()
{
color: '#F0F',
backgroundColor: '#FFF'
});
但我似乎不知道如何告诉 TypeScript 它所附加的元素已经是 Jquery
元素。谁能对此有所启发以帮助我。
附言以上我已经工作正常,我只是想更改调用代码。
更新
这就是我目前拥有的并且有效
typescript
interface JQuery
{
Greenify();
Greenify(options: Coloring.GreenifyOptions);
}
(function ($)
{
$.fn.Greenify = function (options)
{
return new Coloring.Greenify(this, options);
}
})(jQuery);
jQuery
var $elems = $('a').Greenify(options);
然而,这意味着我必须提供选项,如果我在没有选项的情况下执行构造函数,我得到的选项是未定义的。我勾选为正确的答案对于我提出的问题是正确的。但是请记住,所提供的答案要求您在 typescript 构造函数中提供选项,我将了解如何拥有默认选项,然后在构造函数中覆盖它们,但这是一个不同的问题:)
更新 2
只是为了让大家知道我已经找到了一种方法来为您的插件提供选项。
你能做的就是这个
typescript 类
export class Greenify
{
// Default Options
static defaultOptions: IGreenifyOptions =
{
color: '#F00',
backgroundColor: '#00F'
};
// Fields
element: JQuery;
options: GreenifyOptions;
constructor(element: JQuery, options: GreenifyOptions)
{
// Merge options
var mergedOptions: GreenifyOptions = $.extend(Greenify.defaultOptions, options);
this.options = mergedOptions;
this.element = element;
this.OnCreate();
}
OnCreate()
{
this.element.css('color', this.options.color).css('background-color', this.options.backgroundColor);
}
}
打字接口(interface)
interface JQuery
{
Greenofy();
Greenify(obj?: any);
Greenify(options?: Coloring.GreenifyOptions);
}
(function ($)
{
$.fn.Greenify = function (options)
{
return new Coloring.Greenify(this, options);
}
})(jQuery);
使用一个 optional 调用插件的 jQuery 代码
$(function ()
{
var $elems = $('a').Greenify(<Coloring.GreenifyOptions>{
color: '#00F'
});
});
因此输出不会使 anchor 文本颜色为“#00F”,这是默认值,我提供的选项将使 anchor 文本颜色为“#00F”。
我希望这能帮助其他和我有同样问题的人:)
最佳答案
与 TypeScript 一起创建 jQuery 插件可能会有点困惑。我个人更喜欢保留 jQuery 插件链接语法,主要是为了一致性和可维护性。
因此,在模块声明之后,您基本上可以围绕扩展 jQuery 原型(prototype)的实现进行包装:
module Coloring {
interface IGreenifyOptions {
color: string;
backgroundColor: string;
}
export class GreenifyOptions implements IGreenifyOptions {
// Fields
color: string;
backgroundColor: string;
constructor(color: string, backgroundColor: string) {
this.color = color;
this.backgroundColor = backgroundColor;
}
}
export class Greenify {
// Fields
element: JQuery;
options: GreenifyOptions;
constructor(element: JQuery, options: GreenifyOptions) {
this.element = element;
this.options = options;
this.OnCreate();
}
OnCreate() {
this.element.css('color', this.options.color).css('background-color', this.options.backgroundColor);
}
}
}
//jquery plugin wrapper.
;
(function(w, $) {
//no jQuery around
if (!$) return false;
$.fn.extend({
Coloring: function(opts) {
//defaults
var defaults: Coloring.GreenifyOptions = new Coloring.GreenifyOptions('#0F0', '#000');
//extend the defaults!
var opts = $.extend({}, defaults, opts)
return this.each(function() {
var o = opts;
var obj = $(this);
new Coloring.Greenify(obj, o);
});
}
});
})(window, jQuery);
获取插件为:
$(function() {
var $a = $('a').Coloring();
var $div = $('div').Coloring({
color: '#F0F',
backgroundColor: '#FFF'
});
var $div = $('strong').Coloring({
color: '#gold',
backgroundColor: 'pink'
});
});
关于javascript - 将 jQuery 插件转换为 TypeScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34811716/