html - 怎样在页面中调用其他js文件的JavaScript对象?
本文介绍了html - 怎样在页面中调用其他js文件的JavaScript对象?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
一个页面已经引入该js,但是不能调用它里面的方法..(在同一个文件夹下)
代码如下html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="./AgentGetway.js"></script>
</head>
<body>
<script type="text/javascript">
console.log(AgentStatus['host']);//这个地方说AgentStatus is not defined
</script>
</body>
</html>js的内容如下:
var AgentStatus={
host :'127.0.0.1'
};或者:
var AgentStatus=(function(){
return {
host:'127.0.0.1'
}
})()都不能获取,求大神点拨.........
解决方案
这个问题本质就是JS的模块化。之前有很多解决方案，如AMD，CMD，requireJS, CommonJS……这些网上有很多，你可以自己搜。
现在和你讲已经纳入ES6规范的解决方案:
首先你需要一个构建工具 webpack 或者 gulp，相比之下现在前者比较流行，但学习成本稍高，或者那种已经弄好的脚手架如vue-cli
npm i babel这个工具是用来将ES6代码解析成大部分浏览器支持的JS代码。babel这一步具体咋实现网上也有教程。当然如果你用类似vue-cli这样的脚手架，它会帮你把一切配置好，包括本地服务之类的,可以略过这一步。使用ES6的规范来写语言，解决你的问题
// AgentGetway.js
export const AgentStatus = {
host :'127.0.0.1'
}
// index.html 你的html文件中的script
<script>
import {AgentStatus} from './AgentGetway.js'
console.log(AgentStatus) // host: '127.0.0.1'
</script> tips:
你复现问题的情景，在真实的项目开发中应该很少遇到，因为这是一个早在几前就解决掉的一个问题，而且是大型项目必定会遇到的问题
这个问题的核心就是JS模块化，关于这一点涉及的知识点多且广，有兴趣还是了解下好，当然也可以略过直接看ES6规范的模块化
这篇关于html - 怎样在页面中调用其他js文件的JavaScript对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
