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 23 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jQuery实现查看图片功能
Dec 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中的日期处理方法集锦
2007/01/02 PHP
一篇不错的PHP基础学习笔记
2007/03/18 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
解读ES6中class关键字
2017/11/20 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
Python内置函数及功能简介汇总
2020/10/13 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
英国团购网站:Groupon英国
2017/11/28 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
中医临床专业自我鉴定范文
2014/01/15 职场文书
个人党性剖析材料
2014/02/03 职场文书
婚礼主持结束词
2014/03/13 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python