Angular2中如何使用jquery
来源:互联网 发布:世达15件网络寻线器 编辑:程序博客网 时间:2024/06/07 05:51
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;
我还特意译成中文,这里的含量很少,最关键的就是 declare 它就是把一个变量 $ 定义成类型 JQueryStatic (还是个接口)。
这样,TS编译器在遇到 $ 时会去找该类型,并且你的代码里面不能出现 $.time1() 之类的,因为你的接口,只有一个 $.trim()。
等等,jQuery几十个接口,我都要这么写吗?
NO!!!当然不是,除非你想写一个又漂亮、又好看、又是中文、又是完美智能提示的声明文件的话。
否则,你那就拿 any 类型吧,TA就是万能货。你不需要写一个很复杂的声明文件,只需要:
declare var $: any;
简单粗暴有效!
结论
哎~其实是因群里每天都可以看到一句【怎么使用jQuery】;虽然最简单的结果只需要一句话 declare var $: any;,但我还是啰里吧嗦将了一大堆,可不把前因后果将清楚,我烦~。
另,此解只是抛砖引玉,在很多类库中都是通用的办法。但我建议还是找一些Angular2类库来使用,因为如何更有效的管理JavaScript运行,是一门学问。
那什么是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;
我还特意译成中文,这里的含量很少,最关键的就是 declare 它就是把一个变量 $ 定义成类型 JQueryStatic (还是个接口)。
这样,TS编译器在遇到 $ 时会去找该类型,并且你的代码里面不能出现 $.time1() 之类的,因为你的接口,只有一个 $.trim()。
等等,jQuery几十个接口,我都要这么写吗?
NO!!!当然不是,除非你想写一个又漂亮、又好看、又是中文、又是完美智能提示的声明文件的话。
否则,你那就拿 any 类型吧,TA就是万能货。你不需要写一个很复杂的声明文件,只需要:
declare var $: any;
简单粗暴有效!
结论
哎~其实是因群里每天都可以看到一句【怎么使用jQuery】;虽然最简单的结果只需要一句话 declare var $: any;,但我还是啰里吧嗦将了一大堆,可不把前因后果将清楚,我烦~。
另,此解只是抛砖引玉,在很多类库中都是通用的办法。但我建议还是找一些Angular2类库来使用,因为如何更有效的管理JavaScript运行,是一门学问。
希望此篇对你的帮助,快乐编程!
转载github Roy9218PP
个人建议Angular2中不要使用jquery,会出现浏览器加载缓冲期,第一次打开页面jQuery效果不出现,再次刷新才会出现,在windows10上面会出现火狐浏览器不兼容,这种问题很奇怪,两个相同的版本的火狐在window10和window7出现的效果不同,window10则会出现不兼容的现象.
Angular2+交流QQ群:560334140,欢迎大家加入相互学习相互交流!
我个人微信公众号:欢迎大家关注下:
名称:U世界的V梦想
二维码:
2 0
- Angular2中如何使用jquery
- Angular2中如何使用jquery
- Angular2如何使用第三方类库(如:jQuery)
- 在Angular2.0 或 Angular4.0 中使用Jquery
- Angular2中使用bootstrap
- angular2中 使用mqtt
- angular2.0如何使用管道?
- angular2中如何在组件中不使用template 或者其url
- JSP中如何使用JQuery?
- JSP中如何使用JQuery?
- angular2中服务的创建和使用
- Angular2中使用ngx-translate进行国际化
- angular2中使用第三方js库
- 在Angular2中使用Observable对象
- angular2使用中问题解决集(不断更新)
- Angular2.0如何把CSS样式加载进组件中?
- 如何在angular2中引用FontAwesome字体中的图标?
- angular2的angular-cli如何使用代理api
- JAVA值传递和引用传递
- MyBatis/Ibatis中#和$的区别
- 判断上传文件 (是否为空、格式是否满足)
- 栈的弹出序列是否正确
- vue引入插件Cannot assign to read only property 'exports' of object '#<Object>'
- Angular2中如何使用jquery
- nginx 配置静态资源
- 提高算法高效性简单的例子
- 解决: busybox-1.16.1的 Makefile:431: *** mixed implicit and normal rules. Stop. 问题
- kubernetes-docker for centos7 集群部署
- struts配置中<result type="json"></reult>是什么意思 .
- AChartEngine之动态折线图
- linux 命令
- Python--到cmd中输入'pip' 不是内部或外部命令,也不是可运行的程序或批处理文件。