在html的js中获取外部js中的多个变量和数据

Code is never die !

通常如果数据过多,我们会将数据单独拉出来存储到一个单独的js文件中,然后通过外部js引入进来使用数据。

目前比较简单而且用的比较多的是ES6语法规范的exports&import方法。
使用方法是:

// 外部定义dataList.js
exports.dataList = {
     
  	uname = 'Rain',
    uage = '18',
    year = '2021-04-22 09:30',
    hometown = 'China',
}
使用数据的index.html文件
<script>
	import {
      dataList } from './data.js';
	console.log(dataList);
</script>

当然在项目中使用完全没有任何问题,但是当你测试或者单独两个文件这样使用的话就会出现问题,因为这种方法是ES6语法规范下的方法,在普通的JS中是使用的JavaScript语法,所以肯定会出现“不适”的问题出现,就是下面这个啦!
在这里插入图片描述
“无法在模块外部使用import语句”,意思就是说导入文件是ES6模块化语法,而浏览器并不支持ES6语法。就是这个问题导致的错误。

看到网上很多人给出的解决方法是:在script 标签中加入type="module"属性
然而,不管是看评论还是自己亲身测试发现,然而并没有什么用处,依然会报错!!!

其实刚刚开头也说了在项目中使用较多,为什么在项目中可以正常使用呢?其实这里所说的意思是,默认你的项目配置了webpack包,然后在webpack配置文件中初始化配置一下:module.exports = { mode: 'development' // mode 用来指定构建模式 } 然后是启动webpack项目打包,将原本的js文件改为dist目录下的main.js文件使用,这里就可以正常使用exports&import方法!

这是在项目中使用,当然不会有什么问题,但有人说了我自己测试一些数据,或者自己学习练习,小demo中使用,难道还得打包…那岂不是大材小用,这里讲一下原生js、html的方法:在html的js中获取外部js中的多个变量值。
首先上代码:
HTML文件部分

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<!-- 引入定义数据的js文件 -->
		<script src="./data.js"></script>
		<script>
			// 直接使用js文件方法获取数据
			var dataList = dataList();
			console.log(dataList);
		</script>
	</body>
</html>

所引用的data.js文件

function dataList() {
     
	var uname = 'Rain';
	var uage = '18';
	var year = '2021-04-22 09:30';
	var hometown = 'China';
	// 这里可以return两种类型数据:对象  数组 (按需求)
	return {
      uname, uage, year, hometown };
	// return [uname, uage, year, hometown];
}

展示下控制台分别打印的数据情况以及测试情况(大家见图即理解)
①返回数组
在html的js中获取外部js中的多个变量和数据_第1张图片
②返回对象

在html的js中获取外部js中的多个变量和数据_第2张图片
如上图大家所见,可以对数据进行遍历等等等操作,方便大家测试,当然在正式项目中也可以使用呀,个人感觉不是特别麻烦,主要是不会报错啦!!!

Ending: 坚持写下去,前端的魅力无法言说,努力做自己认为对的事!

你可能感兴趣的:(前端常见问题,js,javascript,html,es6,webpack)