-1

到目前为止，在我的 javascript 中，我有以下代码： !/Users/me/Desktop/Scr​​een Shot 2017-07-19 at 2.15.40 PM.png

@import "MochaJSDelegate.js";
@import 'common.js';

var word = "some kind of file";
function getWord(){
    return word;
}

我希望能够在这里使用我的 html 中的“word”变量：

在此处输入图像描述

<!doctype html>
<html>
  <head>
    <title></title>
      <link rel="stylesheet" href="style3.css">
      <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script>
      <script src = "../Sketch/login.js"> </script>
  </head>


  <body>



    <div>

        <div class = "title">
          Botworx Sketch Plugin
        </div>


        <div class = "input-login">
          <button onclick="displayFormContents(this.form);">Login</button>
        </div>

        <div class = "input-uploadImages">
          <button onclick="displayFormContents(this.form);">Upload Images Only</button>
        </div>
        <div class = "input-uploadGalleryData">
          <button id = "upload-gallery">Upload Gallery Data</button>
        </div>
        <div class = "input-uploadAll" >
          <button id="uploadEverything">Upload Everything</button>
        </div>
        <input type="file" id="file-chooser" />



            <div id="results"></div>

            <div id="fb-root"></div>

        <button id="upload-button">Upload to S3</button>




    </div>

<script>
  alert(getWord());
</script>

突出显示的行是我对 javascript 文件的引用。当我使用标签并尝试在 html 中使用我的函数：“getWord()”时，什么也没有发生。我已经测试过了，发现 html 不喜欢“import”和“@import”这两个词。不过，我的 javascript 文件中需要这些关键字。

我的问题是如何在使用 @import 时访问我的 javascript 文件？

4

1 回答 1

1

在不知道您的需求性质的情况下，您似乎可以使用这样的库来处理@import：https ://www.npmjs.com/package/grunt-import-js

在此示例中，import-js 用于从 app/Resources/js/ 读取所有 javascript 文件并扫描它们以获取 @import 指令。然后@import 文件的内容将替换@import 指令。

如果我们忽略@import，您可以将其添加到 HTML 文件顶部的<body>标签下方（编辑：或标签底部<body>，或者可能在<head>. 如果 JavaScript 用于显示或操作任何内容，请将其放在正文中在页面上）：

 <script type="text/javascript">
   var word = "some kind of file";
   function getWord(input){
     console.log(input);
   }
 </script>

然后，您可以在 HTML 中访问它：

 <div class = "input-login">
   <button onclick="getWord(word);">Login</button>
 </div>

就个人而言，我希望有人可以在这个问题上附加一个仅涉及 ES6 语法和可能 ESM 模块的答案，作为将 JavaScript 变量放入 HTML 文件或可能放入window对象的一种方式，以便任何客户端 JavaScript 都可以使用它。

于 2017-07-19T22:45:46.327 回答