Question

我的项目中有两个javascript文件。一个（index.js）声明Material对象，另一个（nav.js）向Material添加方法。

我正在使用SystemJS将这两者导入我的HTML页面。

当页面加载时，我从第二个文件收到错误，指出Material未定义。

如果我在第二个文件之前加载第一个文件，那么：

<script src="./jspm_packages/system.js"></script>
<script src="./config.js"></script>
<script>
    System.import("./scripts/index.js");
    System.import("./scripts/nav.js");
</script>

不应该定义Material对象吗？

<小时/> 这是我的两个文件：

index.js：

var $ = require('jquery');

// Define Material
var Material = {
  components: {},
  reload: function () {
    console.log('reloading...');
  },
  dev: true
};

和nav.js：

var $ = require('jquery');

Material.initHeader = function () {
  console.log('initializing header...');
};

这是我得到的错误

未捕获的ReferenceError：未定义材质在nav.js：3

任何帮助？

Answer 1

模块是独立的。它们在加载时不会修改全局命名空间。如果你想要来自另一个模块的东西，你必须导入它：

.radio-inline {
  display: inline-block;
  margin-right: 20px;
  vertical-align: top;/**Added*/
}

input[type=radio] {
  position: absolute;
  left: -9999px;
}

input[type=radio]:checked + label>img, input[type=radio]:checked + label>span {
  box-shadow: 0 0 3px 3px #000;
}

input[type=radio] + label>img {
  width: 68px;
  height: 68px;
  transition: 250ms all;
}

input[type=radio] + label>span {
  position: absoltue;
  background: red;
  top: -20px;
  left: 0;
  padding-right: 34px;
  padding-left: 34px;
  padding-top: 34px;
  padding-bottom: 34px;
  display: block;/**Added*/
}

systemjs来自另一个文件的变量

1 个答案: