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实现frame之间互通的方法
Jun 26 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery实现本地存储
Dec 22 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 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
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
php精度计算的问题解析
2019/06/21 PHP
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
js验证账户名是否重复
2020/05/26 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
python妹子图简单爬虫实例
2015/07/07 Python
python获取url的返回信息方法
2018/12/17 Python
python对象与json相互转换的方法
2019/05/07 Python
python3字符串操作总结
2019/07/24 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
使用Python封装excel操作指南
2021/01/29 Python
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
J2EE模式面试题
2016/10/11 面试题
2014年财务经理工作总结
2014/12/08 职场文书
初中生毕业评语
2014/12/29 职场文书
先进典型发言材料
2014/12/30 职场文书
公司租车协议书
2015/01/29 职场文书
小学工作总结2015
2015/05/04 职场文书
个人收入证明格式
2015/06/24 职场文书
爱护环境建议书
2015/09/14 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书