plugin - string to slug javascript
Conversión de un complemento jQuery a TypeScript (2)
Puede crear y hacer referencia a su propio archivo de definiciones greenify.d.ts y agregar la función de esta manera:
interface Jquery {
greenify: (options: Coloring.IGreenifyOptions) => void
}
Entonces puedes simplemente llamarlo así:
$(''a'').greenify(new GreenifyOptions(...));
o
$(''a'').greenify({color:'''', backgroundColor:''''});
Explicación:
En tiempo de compilación, el texto mecanografiado realmente combinará todas las definiciones de interfaz.
Nota al costado:
si eres inflexible sobre tenerlo exactamente como $(''a'').Coloring.Greenify(..) entonces tendrás que cambiar mucho más:
- Colorear ya no podría ser el nombre de su módulo ya que tendría que usarlo en la definición de interfaz anterior
- Probablemente deberías crear una clase que tenga .Greenify como método estático
- Posiblemente más ...
Con todo, probablemente sea más fácil seguir con mi solución inicial, ya que es un poco menos detallada, pero eso depende de usted.
Espero que ayude
Actualizar:
Para tener en cuenta las opciones predeterminadas, puede modificar la definición de la interfaz para tener anulaciones:
interface Jquery {
greenify: () => void;
greenify: (options: Coloring.IGreenifyOptions) => void;
}
interface IGreenifyOptions
{
color?: string;
backgroundColor?: string;
}
Ok, primero aquí está mi plugin jQuery muy básico
(function ($){
$.fn.greenify = function (options) {
var settings = $.extend({
// These are the defaults
color: ''#556b2f'',
backgroundColor: ''white''
}, options);
}(jQuery));
$(''a'').greenify({
color: ''orange''
}).showLinkLocation();
Básicamente, todo lo que hace es cambiar el color del texto y el color de fondo con el elemento provisto. Ahora lo que intento hacer es convertir este simple complemento en TypeScript
He intentado algunas cosas y lo más cercano que tengo es esto.
Mecanografiado
/// <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 que lo llama
$(function ()
{
var options: Coloring.GreenifyOptions = new Coloring.GreenifyOptions(''#0F0'', ''#000'');
var $elems = $(''a'');
$elems.each(function()
{
var result = new Coloring.Greenify($(this), options)
});
});
Sin embargo, no quiero proporcionar el elemento como el new Coloring.Greenify($(this), options) , básicamente quiero hacer algo como esto
$(''a'').Coloring.Greenify(options);
o
$(''a'').Coloring.Greenify(Coloring.GreenifyOptions()
{
color: ''#F0F'',
backgroundColor: ''#FFF''
});
Pero parece que no puedo imaginar cómo decirle a TypeScript que el elemento al que está conectado es el elemento Jquery . ¿Alguien podría arrojar algo de luz sobre esto para ayudarme?
PD: el anterior que tengo funciona bien, solo quiero cambiar el código de llamada.
Actualizar
Esto es lo que tengo en este momento y funciona
Interfaz de TypeScript JQuery {Greenify (); Greenify (opciones: Coloring.GreenifyOptions); }
(function ($)
{
$.fn.Greenify = function (options)
{
return new Coloring.Greenify(this, options);
}
})(jQuery);
jQuery var $ elems = $ (''a''). Greenify (opciones);
Sin embargo, significa que tengo que proporcionar opciones y si hago el constructor sin opciones, las opciones no están definidas. La respuesta que marqué como correcta es correcta para la pregunta que hice. Sin embargo, solo tenga en cuenta que la respuesta proporcionada requiere que proporcione opciones en su constructor de mecanografía, voy a ver cómo tener las opciones predeterminadas y luego las anulo en el constructor, pero esta es una pregunta diferente :)
Actualización 2
Solo para que todos sepan que he encontrado una forma de proporcionar opciones a tu complemento o no.
Lo que puedes hacer es esto
Clase de 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);
}
}
Interfaz de TypeScript
interface JQuery
{
Greenofy();
Greenify(obj?: any);
Greenify(options?: Coloring.GreenifyOptions);
}
(function ($)
{
$.fn.Greenify = function (options)
{
return new Coloring.Greenify(this, options);
}
})(jQuery);
Código jQuery para llamar al complemento con una opción opcional
$(function ()
{
var $elems = $(''a'').Greenify(<Coloring.GreenifyOptions>{
color: ''#00F''
});
});
Por lo tanto, la salida no hará que el color de fondo de los anclajes ''# 00F'' sea el predeterminado y la opción que he proporcionado hará que el color del texto de anclaje sea ''# 00F''.
Espero que esto ayude a cualquier otra persona que tenga el mismo problema que yo :)
Crear complementos jQuery junto con TypeScript puede ser un poco complicado. Personalmente, prefiero mantener la sintaxis de encadenamiento del complemento jQuery, sobre todo por la coherencia y la capacidad de mantenimiento.
Entonces, después de la declaración del módulo, básicamente puede ajustar su implementación extendiendo el prototipo jQuery como:
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);
Obteniendo el plugin como:
$(function() {
var $a = $(''a'').Coloring();
var $div = $(''div'').Coloring({
color: ''#F0F'',
backgroundColor: ''#FFF''
});
var $div = $(''strong'').Coloring({
color: ''#gold'',
backgroundColor: ''pink''
});
});