Angular2使用jQuery的方法教程
前言
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运行,是一门学问。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家脚本之家的支持。
- 关于分区表的在线重定义(r5笔记第98天)
- 10个实用的但偏执的Java编程技术
- 看似诡异的tablespace online问题(r5笔记第95天)
- python2.7进行爬虫POI代码(划分小网格算法)
- 从 Encoder 到 Decoder 实现 Seq2Seq 模型
- python2.7进行爬虫百度POI代码(划分小网格算法)
- 如何通过TTL调试光猫
- 基于树莓派和Tensowflow的物体识别-brain
- SNA中:中心度及中心势诠释(不完整代码)
- 教程 | 基于计算机视觉使用Python和OpenCV计算道路交通
- 干货 | MVP模式在携程酒店的应用和扩展
- memlock过低导致的数据库性能问题(r6笔记第10天)
- OpenCV和SVM分类器在自动驾驶中的车辆检测
- 自动驾驶的模型预测控制
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- mybatis文件映射之利用collection定义关联集合(五)
- 【奇技淫巧】 -- 原地旋转数组
- mybatis文件映射之利用延迟加载解决collection分布查询(六)
- 【C++】攻克哈希表(unordered_map)
- 位图原理及实现 - 海量数据处理标配
- mybatis文件映射之利分布查询时传递多列值 (七)
- 位运算 - 初见
- Mybatis学习笔记(一)
- mybatis文件映射之鉴别器discriminator标签
- LeetCode刷题总结 -- 链表篇
- LeetCode刷题总结 -- 数组篇
- 剑指offer(07-09)题解
- 学以致用C++设计模式 之 “适配器模式”
- FTP文件管理项目(本地云)项目日报(九)
- 【Linux】血泪教训 -- 动态链接库配置方法