Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

ionic2中引入自定义js文件或者引入第三方js文件

Posted on 2017年6月29日2017年6月29日 by king2088

最近在ionic2开发中,遇到了一些问题,主要的问题是,由于angular的使用,使得ionic2中要增加组件则必须进行文件夹以及ts、html的增加,但是有些常量则是永远固定不变的,这些常量在很多页面能使用到,因此萌生了一种想法就是将所有常量制作成config文件或者一个json文件,然后在进行调用。不过制作成json的想法破灭了,因为在使用过程中,发现json必须通过http请求来获取相关数据,而异步请求获得的数据并非全局变量,在http外部也无法进行调用。
因此就想到使用ionic中提供的一个超级不错的定义全局变量的方法declare,在ionic中直接使用declare是可以定义全局变量的,下面我们就来尝试下declare的强大功能吧!

1、在assets目录下新建一个test.js文件,大致内容如下(当然你可以在这个文件中定义大量的常量或者方法):
const test=[{name:"张三",sex:"男"},{name:"李四",sex:"女"}];
2、在index.html中直接引入上面我们创建的js文件

下面我们可以在浏览器中查看常量是否已经生效了,打开开发者工具,输入test,就会看到输出了我们定义的test常量的值,如图所示:

ionic declare
ionic declare

3、在需要使用test常量的ts文件中通过declare来定义一个全局变量,请牢记这里定义的常量名称必须与js中常量的名称一样,否则会提示错误。
import { Component, Output, Input, ElementRef, EventEmitter, OnInit } from '@angular/core';
declare var test;
@Component({
selector: 'test',
templateUrl: 'test.html'
})
export class Test implements OnInit{
public myTest:any
constructor(){
this.myTest = test;
console.log(this.myTest); //这里将打印出[{name:"张三",sex:"男"},{name:"李四",sex:"女"}]
//如果是使用js文件中test()方法,那么可以通过new关键字来进行重新定义(不过下面两种方法我都没有尝试过),比如
this.myTest = new test();
this.myTest = test();
}
ngOnInit(){}
}

这样就可以将一些不必要的常量,并且又经常使用到的常量封装为一个js,然后直接使用这个js即可,不仅带来了便利,而且还可以进行复用。
4、引入第三方js文件
引入第三方文件其实与我们自定义的js差不多一样,没有多大区别,而且使用也是非常的方便。欢迎大家大量试用,然后出现问题了,请留言,你也可以谷歌查看一些关于declare引入第三方库的文档与文章!

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 3月
一 二 三 四 五 六 日
 12345
6789101112
13141516171819
20212223242526
2728293031  
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme