问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎样在页面中调用其他js文件的JavaScript对象?

头像
l0ady
    16235

    一个页面已经引入该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'
    }
})()

    都不能获取,求大神点拨.........

    javascripthtml
    阅读 13.9k
    5 个回答
    得票最新
    头像
    taurus_wood
      482104961
      ✓ 已被采纳

      这个问题本质就是JS的模块化。之前有很多解决方案，如AMD，CMD，requireJS, CommonJS……这些网上有很多，你可以自己搜。
      现在和你讲已经纳入ES6规范的解决方案:

      1. 首先你需要一个构建工具 webpack 或者 gulp，相比之下现在前者比较流行，但学习成本稍高，或者那种已经弄好的脚手架如vue-cli

      2. npm i babel这个工具是用来将ES6代码解析成大部分浏览器支持的JS代码。babel这一步具体咋实现网上也有教程。当然如果你用类似vue-cli这样的脚手架，它会帮你把一切配置好，包括本地服务之类的,可以略过这一步。

      3. 使用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:

      1. 你复现问题的情景，在真实的项目开发中应该很少遇到，因为这是一个早在几前就解决掉的一个问题，而且是大型项目必定会遇到的问题

      2. 这个问题的核心就是JS模块化，关于这一点涉及的知识点多且广，有兴趣还是了解下好，当然也可以略过直接看ES6规范的模块化

      头像
      WestFarmer
        2k1513

        用chrome浏览器控制台--network，看一下你的js文件有没有加载，如果有加载，看下console下面有没有错误。

        sorry, 没注意看清楚到你的问题，请参考yuhenabc的答案。

        头像
        yuhenabc
          774

          提问者只是想获得引用 js 里的全局变量而已，这么简单的需求，不一定非要模块化，延缓一下获取的时机不就行了：

          <script type="text/javascript">
    window.onload = function() {
        //这个地方 AgentStatus 就不会是 undefined 了
    }
</script>
          头像
          天来爱喝冰美式
            1096

            module.export = 你想要导出的函数；
            在另外一个页面来import导出的这个函数。

            头像
            Wallace
              6321624

              require.js

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题