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

最近在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文件

<script src="./asstes/test.js"></script>

下面我们可以在浏览器中查看常量是否已经生效了,打开开发者工具,输入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引入第三方库的文档与文章!

发表评论

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