前端基础建设之export、import使用

背景知识

在ES6前，前端就使用RequireJS或者seaJS实现模块化， requireJS是基于AMD规范的模块化库，而像seaJS是基于CMD规范的模块化库，两者都是为了为了推广前端模块化的工具。
现在ES6自带了模块化，也是JS第一次支持module，在很久以后，我们可以直接作用import和export在浏览器中导入和导出各个模块了，一个js文件代表一个js模块。
现代浏览器对模块(module)支持程度不同，目前都是使用babelJS，或者Traceur把ES6代码转化为兼容ES5版本的js代码。
ES6的模块化的基本规则或特点：
　1：每一个模块只加载一次，每一个JS只执行一次，如果下次再去加载同目录下同文件，直接从内存中读取。一个模块就是一个单例，或者说就是一个对象；
　2：每一个模块内声明的变量都是局部变量，不会污染全局作用域；
　3：模块内部的变量或者函数可以通过export导出；
　4：一个模块可以导入别的模块
以上摘自（https://www.cnblogs.com/diligenceday/p/5503777.html）

实际应用

比如随便写一个js，导出之后其他地方可以直接使用。

import axios from 'axios'

var objtest = {
  name: 'ysh',
  test : function (){
    console.log('输出objtest.test')
  }
}
objtest.http = axios


function test () {
  console.log('输出测试test方法')
}

export {
  objtest,
  test
}

这个比较简单就是定义一个对象和一个方法，然后导出，其他地方可以使用。
引用的页面

<template>
  <div>
    testjs
    <button @click="test2" >点我</button>
  </div>
</template>

<script>
import * as testF from '@/test/test.js'
export default {
  name: "VideoPlayer",
  components: {},

  mounted() {

  },

  methods: {
    test2(){
      console.log('testF.objtest.name 获取值', testF.objtest.name)
      console.log('testF.objtest.test()执行结果', testF.objtest.test())
      console.log('testF.test()执行结果', testF.test())
      testF.objtest.http.get('/air/cgi/business/ps-motor-vehicle-inspection-station/statisticalList').then(res => {
        console.log('接口返回值', res)
      })
    }
  }
};
</script>

image.png

作用

1.类似后端工具类，写好之后其他地方公用
2.写组件、插件
3.改写第三方js，引入项目中使用

最后编辑于：2020.10.31 09:21:09