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.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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 远程关机实现代码
2009/11/10 PHP
php 中文和编码判断代码
2010/05/16 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
php图片缩放实现方法
2014/02/20 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
JS中Iframe之间传值的方法
2013/03/11 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
django文档学习之applications使用详解
2018/01/29 Python
python中format()函数的简单使用教程
2018/03/14 Python
python如何调用字典的key
2020/05/25 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
工厂厂长的职责
2013/12/12 职场文书
法定代表人授权委托书
2014/09/19 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
Python爬取某拍短视频
2021/06/11 Python
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL