博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何用typescript 来写一个jquery 插件的 d.ts
阅读量:5768 次
发布时间:2019-06-18

本文共 2979 字,大约阅读时间需要 9 分钟。

hot3.png

我们编写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;
}

转载于:https://my.oschina.net/u/1540190/blog/537149

你可能感兴趣的文章
TiDB 源码阅读系列文章(七)基于规则的优化
查看>>
jQuery|元素遍历
查看>>
FreeNAS8 ISCSI target & initiator for linux/windows
查看>>
Rainbond 5.0.4版本发布-做最好用的云应用操作系统
查看>>
Java判断是否为垃圾_Java GC如何判断对象是否为垃圾
查看>>
多项式前k项和java_多项式朴素贝叶斯softmax改变
查看>>
java数组只能交换0下标和n_编程练习-只用0交换排序数组
查看>>
OracleLinux安装说明
查看>>
Cocos2d-x3.2 Ease加速度
查看>>
标准与扩展ACL 、 命名ACL 、 总结和答疑
查看>>
使用@media实现IE hack的方法
查看>>
oracle体系结构
查看>>
Microsoft Exchange Server 2010与Office 365混合部署升级到Exchange Server 2016混合部署汇总...
查看>>
Proxy服务器配置_Squid
查看>>
【SDN】Openflow协议中对LLDP算法的理解--如何判断非OF区域的存在
查看>>
纯DIV+CSS简单实现Tab选项卡左右切换效果
查看>>
redis 常用命令
查看>>
EdbMails Convert EDB to PST
查看>>
android 资源种类及使用
查看>>
Centos7同时运行多个Tomcat
查看>>