Angular2如何使用jQuery
Angular2是以TypeScript语言作为默认编码语言,所以你看到的全部都是.ts结尾的文件。 什么是TypeScript首先,它是一个编译型语言;既然是编译型,那么你像重构、导航、智能提醒这种工具属性就可以发挥出来,所以你会发现使用VS CODE来写Angular简直就是绝配。 同时,TypeScript还带来一些ES6/7才有特性,比如let、const、async等,你无须关心ES几。 最霸气,TypeScript还是一个强类型、泛型、多态等一些面向对象编程的东西。 那,为何我们不选它呢? 当然,说了这么多,这跟主题看似无关,但如果你了解这些,才能看到问题的本质。 怎么做?首先,第一关键点编译型,既然是编译型,那么你在代码中出现的任何变量、类、函数都是必须要存在,否则TA就会在编译时报错。 但,问题来了,现在的JavaScript世界中已经有那么多现成的第三方库,难道说都不能用了?非也! TypeScript一开始就照顾这些了,所以就会有一个叫.d.ts的声明文件。MS当然不会让你去编写这一个文件,所以就有一个叫http://definitelytyped.org/ 网站,TA汇集了很多现成类库的第三方.d.ts的声明文件提供我们下载。 方法一当然是使用最正规军了,用命令安装jQuery的声明文件。 npm install -D @types/jquery 以及使用 import * as $ from 'jquery'; $('body').addClass(''); 完美的智能提示,如果你在VS CODE下的话。 方法二对于一些并未提供 .d.ts 声明文件的类库,我们怎么办?那当然只能自己写了。 什么?自己写?很困难吧!很复杂吧! 没那么一回事,声明文件其实是对一些类库接口的描述,以下是我截取一段jQuery声明文件的部分代码 interface JQueryStatic { /** * 去掉字符串首尾空格 * * @param str 字符串 * @see {@link https://api.jquery.com/jQuery.trim/} */ trim(str: string): string; } declare var $: JQueryStatic; 我还特意译成中文,这里的含量很少,最关键的就是 这样,TS编译器在遇到 等等,jQuery几十个接口,我都要这么写吗? NO!!!当然不是,除非你想写一个又漂亮、又好看、又是中文、又是完美智能提示的声明文件的话。 否则,你那就拿 declare var $: any; 简单粗暴有效! 结论哎~其实是因群里每天都可以看到一句【怎么使用jQuery】;虽然最简单的结果只需要一句话 另,此解只是抛砖引玉,在很多类库中都是通用的办法。但我建议还是找一些Angular2类库来使用,因为如何更有效的管理JavaScript运行,是一门学问。 希望此篇对你的帮助,快乐编程! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |