使用 typescript 写 jQuery 插件

Fork Me On Github

思路

  1. 可以接受的参数
  2. 默认的参数
  3. 挂载在 JQuery

步骤

  1. 参数接口

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

ts
           
interface CarouselOptions {
     range?: number, // 每次移动的距离,默认一个item宽度
     itemTag?: string, // 子代的标签
     boxTag?: string, // 盒子的标签
     spaceTime?: number, // 停顿的时间
     animationTime?: string|number, // 动画执行时间
     animationMode?: string, // 动画效果
     previousTag?: string, // 可点击向前的元素
     nextTag?: string, // 可点击向后的元素
     thumbMode?: string // 缩略图模式
}
1234567891011
  1. 默认参数
ts
          
class CarouselDefaultOptions implements CarouselOptions {
     itemTag: string = 'li';
     boxTag: string = '.carousel-box';
     spaceTime: number = 3000;
     animationTime: string|number = 1000;
     animationMode: string = "swing";
     previousTag: string = '.carousel-previous';
     nextTag: string = '.carousel-next';
}
12345678910

插件具体功能实现

ts
                     
/// 
class Carousel {
    constructor(
        public element: JQuery,
        options?: CarouselOptions
    ) {
        this.options = $.extend({}, new CarouselDefaultOptions(), options); // 合并参数
        this._init(); // 初始化,包括长度不足循环补足
        this._addEvent(); // 绑定事件
    }

    // 下一张
    public next(range: number = this.options.range) {
        this.goLeft(this._left - range);
    }

    // 上一张
    public previous(range: number = this.options.range) {
        this.goLeft(this._left + range);
    }
}
123456789101112131415161718192021
  1. 挂载在 JQuery
ts
     
;(function($: any) {
    $.fn.carousel = function(options ?: CarouselOptions) {
        return new Carousel(this, options); 
    };
})(jQuery);
12345

--- 用typescript 写 js 一目了然

点击查看全文
0 511 0