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基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 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
5.PHP的其他功能
2006/10/09 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
Vue表单实例代码
2016/09/05 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
详解原生JS回到顶部
2019/03/25 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
总结python爬虫抓站的实用技巧
2016/08/09 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
J2EE模式面试题
2016/10/11 面试题
致200米运动员广播稿
2014/02/06 职场文书
公安学专业求职信
2014/07/27 职场文书
合作协议书范文
2014/08/20 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
文明单位申报材料
2014/12/23 职场文书
音乐课外活动总结
2015/05/09 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL