html - 怎样在页面中调用其他js文件的JavaScript对象?
我想大声告诉你
我想大声告诉你 2017-06-14 10:52:32
0
5
864

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

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

我想大声告诉你
我想大声告诉你

全部回复(5)
某草草

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

<script type="text/javascript">
    window.onload = function() {
        //这个地方 AgentStatus 就不会是 undefined 了
    }
</script>
左手右手慢动作

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

仅有的幸福

这个问题本质就是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规范的模块化

我想大声告诉你

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

曾经蜡笔没有小新

require.js

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板