我们编写jquery 插件时,通过会有以下重要概念需要考虑,我通常这么叫:
1、Jquery 方法 。比如$.ajax( ) $.trim( ) 它们特点就是直接绑在jquery 自身上。
2、Jquery对象方法。 比如$("#btn").click( ), 它们是绑定在一个JQUERY对象上面。
3、Jquery的一些扩充的属性。比如防止和其它插件重名,我会给自己的插件建个“命名空间”。
比如 $ .auto.do( something ) 。这里的auto相当于赋于$上的一个属性。
4、插件的默认参数,事件等对象。 比如: $.ajax( { url:......, type:.......}) ; 对 这个参数,我们要定义一个对象。
d.ts文件 ts文件 的关系?
这个非常类似于 C语言里, h文件 和 c文件的关系,先声明,后编写。
d.ts 文件编写后,你写的 ts 代码才会有智能提示,所以我们写一个插件,必须先规划好它有哪些个方法,参数、属性,将它们写入到d.ts文件 。
建议每个人都先看一下jquery.d.ts文件再往下看,里面最重要的代码如下,这里要用心体会一下,为什么名称里加上JQueryStatic 和JQuery的区别。
/**
* Static members of jQuery (those on $ and jQuery themselves)
*/
interface JQueryStatic { } /**
* The jQuery instance members
*/
interface JQuery { } declare module "jquery" {
export = $;
}
declare var jQuery: JQueryStatic; //注意这个变量是
jQuery ,和上面的 JQuery 是两个东西。declare var $: JQueryStatic;
jquery.cookie插件的d.ts文件说明
最简单的小插件,以它的d.ts文件为例,看看这个文件到底应该如何编写?
项目地址:
这个插件只涉及了上面的 1、3、4这三个概念的写法, 我说说我的理解。
声明文件 | 测试 |
// Type definitions for jQuery Cookie Plugin 1.4.1 说明部分/// 引用jquery的声明//第4个概念:参数的写法,其实就是普通接口。 注意 ? 这个技巧。interface JQueryCookieOptions { expires?: any; path?: string; domain?: string; secure?: boolean;}//第3个概念:jquery的扩充属性及属性下附着的方法的写法interface JQueryCookieStatic { //以下属性及方法是挂在 $.cookie上的 raw?: boolean; json?: boolean; defaults?: JQueryCookieOptions; //这个属性ts的重载写法 (): {[key:string]:string}; (name: string): any; (name: string, value: string): void; (name: string, converter: (value: string) => any): any; (name: string, value: string, options: JQueryCookieOptions):void; (name: string, value: any): void; (name: string, value: any, options: JQueryCookieOptions): void;}//第1个概念:jquery方法的编写。 interface JQueryStatic { //以下属性是挂在 $ 上的。为$扩展一个cookie属性, //它拥有JQueryCookieStatic 的下面的属性及功能 cookie?: JQueryCookieStatic; //重载 removeCookie(name: string): boolean; removeCookie(name: string, options: JQueryCookieOptions): boolean;} | /// /// class TestObject { text: string; value: number; constructor (text: string, value: number) { this.text = text; this.value = value; }}class CookieOptions implements JQueryCookieOptions { expires: number; path: string; domain: string; secure: boolean;}//对 JQueryCookieStatic 的测试$.cookie("the_cookie", "the_value");console.log($.cookie("the_cookie"));var testObject = new TestObject("Hello World", 5);//对 JQueryCookieOptions 的测试var cookieOptions = new CookieOptions();cookieOptions.path = "/";cookieOptions.domain = "jquery.com";$.cookie.json = true;$.cookie("test", testObject, cookieOptions);var result = $.cookie("test");console.log(result.text);$.cookie.defaults = cookieOptions;//我增加的一句 JQueryStatic 的测试$.removeCookie("test"); |
现在来看,第1个概念和第3个概念其实是一个东西。都是将属性或方法挂到某个变量的下面。
第4个概念其实就是Typescript里的普通接口而已。
剩下第2个概念:Jquery对象的方法, 看到现在,写这个很容易了吧! 示例如下:
interface JQuery {
Plugin(options?: Object): JQuery;
}