你的位置:首页 > Java教程

[Java教程]使用 typescript 写 jQuery 插件


/// <reference path="jquery/jquery.d.ts" />export class Carousel {  constructor(    public element: JQuery,    options?: CarouselOptions  ) {    this.options = $.extend({}, CarouselDefaultOptions, options)  }  public options: CarouselOptions;  }export interface CarouselOptions {   range?: number,   itemTag?: string,   boxTag?: string,   animationTime?: any,   animationMode?: string}/*** 默认设置*/class CarouselDefaultOptions implements CarouselOptions {   itemTag: string = 'li';   boxTag: string = '.box';   animationTime: any = '1s';   animationMode: string = 'slow';}

carousel.ts

我打算做一个图片轮播的插件,上面是插件的主体, 分为三部分:

第一部分: class Carousel     插件具体功能实现,

第二部分:interface CarouselOptions 配置的接口,在js中无用,这里只是为了以后 TS 使用方便,方便智能提示和书写,

第三部分:class CarouselDefaultOptions 默认配置

 

/// <reference path="jquery/jquery.d.ts" />import { Carousel, CarouselOptions } from './carousel'; ;(function($: any) { $.fn.Carousel = function(options ?: CarouselOptions) {  return new Carousel(this, options);  }; })(jQuery);interface JQuery{  Carousel(options ?: CarouselOptions) : any;}

jquery.carousel.ts

这里主要是实现接入jQuery.

 

--- 用typescript 写 js 一目了然