Fork Me On Github
/// 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 默认配置

/// 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 一目了然

点击查看全文
0 263 0