Angular2使用jQuery的方法教程


Posted in jQuery onMay 28, 2017

前言

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运行,是一门学问。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家三水点靠木的支持。

jQuery 相关文章推荐
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
Jquery中attr与prop的区别详解
May 27 #jQuery
jQuery插件imgAreaSelect基础讲解
May 26 #jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 #jQuery
jQuery导航条固定定位效果实例代码
May 26 #jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 #jQuery
jQuery滚动插件scrollable.js用法分析
May 25 #jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 #jQuery
You might like
一个php作的文本留言本的例子(五)
2006/10/09 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
PHP四大安全策略
2014/03/12 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
表单内同名元素的控制
2006/11/22 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
浅谈Python3中print函数的换行
2020/08/05 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
委托证明的格式
2014/01/10 职场文书
主题党日活动总结
2014/07/08 职场文书
考试作弊检讨书
2015/01/27 职场文书
工地材料员岗位职责
2015/04/11 职场文书
初中班主任工作随笔
2015/08/15 职场文书
2015团员个人年度总结
2015/11/24 职场文书