【技巧】ionic3添加第三方js

网上应该有资料吧?对于封装成angular2+的模块,直接import就行了,反之的第三方js,其实也很简单,一般不用考虑js的模块规范(如CommonJS,AMD,CMD),起码有如下两种方式(以jquery为例——题外话,angular虽然也能操作dom,但不推荐,推崇使用数据绑定,所以一般没必要引入jquery):

方式一——普通:

  1. 像普通网页一样在index.html里面添加:
  <script src="第三方js地址"></script>
  1. 使用时,在ts文件头部添加:
declare let $: any;

方式二——import:

  1. 执行命令行安装node模块:
npm install jquery
  1. 使用时,在ts文件头部添加:
import * as $ from 模块名或Js的相对路径;

或直接导出方法

import { myFunction } from 模块名或Js相对路径

一般到这里就可以了,只是这个时候调用起来还是有点不方便,调用时要么已经熟知该js库怎么用,要么要看源码了解它的属性或方法,就算你打错了方法名都不会有提示。那有没有更方便使用呢?有,那就是typings,它有点像我先前写的一篇文章中cordova原始调用和基于ionic-native的模块调用的概念,typings会把原始js映射为类的概念生成d文件,这样,不需要等到运行,在编码过程中通过typescript就能有提示,同时会直接检验使用的正确性。

使用typings其实挺简单,一句npm install @types/<package>命令即可,如:

npm install @types/jquery

或许一些文章会写到要全局安装typings的cli,然后用typings的命令typings install等等的,其实已经都过期了,因为从TypeScript 2.0开始,已经改为@types模块,由npm来管理了,这使得使用起来更加方便。

然后常规使用即可。这里简单给出验证示例:

html页面加一个按钮:

 <button ion-button id="test" (click)="onTest()">test</button>

ts里面加一个方法:

  onTest(){
    console.log($('#test'));
  }

最后点击按钮时的输出结果见下图:

浏览器调试输出结果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LanceToBigData

linux(十一)之初始化文件

前面写了很多linux的知识,其实很多都是命令的,所以要去多多的练习才能学的更好,加油为了好工作。 要么现在懒惰,未来讨饭。要么现在努力,未来惬意。 一、初始化...

2247
来自专栏大闲人柴毛毛

Java并发编程的艺术(四)——线程的状态

线程的状态 初始态:NEW 创建一个Thread对象,但还未调用start()启动线程时,线程处于初始态。 运行态:RUNNABLE 在Java中,运行态包括...

43311
来自专栏Java帮帮-微信公众号-技术文章全总结

Linux常用命令

Linux常用命令 常用指令 ls   显示文件或目录 -l 列出文件详细信息l(list) -a ...

5006
来自专栏专注研发

linux常用命令

     -a          列出当前目录下所有文件及目录,包括隐藏的a(all)

1811
来自专栏Ryan Miao

CentOS7下mysql5.6修改默认编码

参考原文教程:Centos7下修改mysql5.6编码方式 解决网站中文显示问号 解决办法: 修改MySQL数据库字符编码为UTF-8,UTF-8包含全世界所...

3806
来自专栏Rgc

redis权限认证及登录

3881
来自专栏linux运维学习

linux学习第二十四篇:管道符和作业控制,shell变量,环境变量配置文件

vmstat 1 自动显示系统的状态 sleep 100 可以使系统沉睡100秒 管道符和作业控制 管道符的作用:把管道符前面执行的结果输出内容交给管道符后面...

1967
来自专栏极客编程

node.js + mongodb 原

想写博客很长时间了,因为一直身患懒癌,所以一直拖到了现在。markdown的语法也是刚刚学,试验一下效果 好了不说了,直接上干货了。 -------------...

1464
来自专栏企鹅号快讯

使用Symfony的Console组件构建命令行程序

我们新开设一门视频课程《构建命令行程序》。主要讲解如何使用symfony的console组件,构建命令行应用。在我们的印象中,php程序大部分是通过浏览器执行(...

2428
来自专栏编程直播室

LInux上清空或删除文件的5中方法1. 清空文件通过重定向到Null2. 清空文件使用“true”命名重定向3. Empty File Using cat/cp/dd utilities with

5015

扫码关注云+社区

领取腾讯云代金券