如何从 html 中的内联 js 脚本获取变量并将其放入外部 .js 文件中？

Question

我想将通过内联脚本获得的变量放入：index.ejs 文件中。 这是我得到的代码是：

$(function(){ 

 var finalpoints = points;
 var finalcosts = costammount;
 finaldata = [finalpoints,finalcosts];
});

我在外部文件中的代码是：

(function( detail, $, undefined, index) {
    'use strict';
    var fd= finaldata;
})(fd, jQuery);

什么也没发生..它确实出错了：

ReferenceError: fd is not defined
at /app/index.js:95:4
    at Layer.handle [as handle_request] (/rbd/pnpm-volume/9dc75d7a-5227-48ce-8d3d-268791bd5521/node_modules/.registry.npmjs.org/express/4.17.1/node_modules/express/lib/router/layer.js:95:5)
    at next (/rbd/pnpm-volume/9dc75d7a-5227-48ce-8d3d-268791bd5521/node_modules/.registry.npmjs.org/express/4.17.1/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/rbd/pnpm-volume/9dc75d7a-5227-48ce-8d3d-268791bd5521/node_modules/.registry.npmjs.org/express/4.17.1/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/rbd/pnpm-volume/9dc75d7a-5227-48ce-8d3d-268791bd5521/node_modules/.registry.npmjs.org/express/4.17.1/node_modules/express/lib/router/layer.js:95:5)
    at /rbd/pnpm-volume/9dc75d7a-5227-48ce-8d3d-268791bd5521/node_modules/.registry.npmjs.org/express/4.17.1/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/rbd/pnpm-volume/9dc75d7a-5227-48ce-8d3d-268791bd5521/node_modules/.registry.npmjs.org/express/4.17.1/node_modules/express/lib/router/index.js:335:12)
    at next (/rbd/pnpm-volume/9dc75d7a-5227-48ce-8d3d-268791bd5521/node_modules/.registry.npmjs.org/express/4.17.1/node_modules/express/lib/router/index.js:275:10)
    at serveStatic (/rbd/pnpm-volume/9dc75d7a-5227-48ce-8d3d-268791bd5521/node_modules/.registry.npmjs.org/serve-static/1.14.1/node_modules/serve-static/index.js:75:16)
    at Layer.handle [as handle_request] (/rbd/pnpm-volume/9dc75d7a-5227-48ce-8d3d-268791bd5521/node_modules/.registry.npmjs.org/express/4.17.1/node_modules/express/lib/router/layer.js:95:5)

Answer 1

您可以尝试在全局范围内使用全局变量，即在关闭之前声明它。 这不是一个“干净”的解决方案，而是最容易尝试查看其余代码是否正常工作的解决方案。

var globalData = {
  finalpoints: 0,
  finalcosts: 0
};

$(function(){ 
 globalData.finalpoints = points;
 globalData.finalcosts = costammount;
});

进而：

(function( detail, $, undefined, index) {
    'use strict';
    var fd= globalData;
})(fd, jQuery);

您还可以声明一些全局函数，并从外部文件中调用它，而不是直接访问变量，以获取您需要的值。 这样您就可以返回一个带有数据的对象，并在需要时向其中添加/删除更多数据。

function getFinalData() {
  return [globalData.finalpoints, globalData.finalcosts];
}

或者干脆不包装内联数据并且不使用全局变量：

function getFinalData() {
  var finalpoints = points;
  var finalcosts = costammount;
  return [finalpoints, finalcosts];
}

进而：

(function( detail, $, undefined, index) {
    'use strict';
    var fd= getFinalData();
})(fd, jQuery);

之后，您可以尝试一些消息传递解决方案，例如自定义事件（ https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events ），或一些全局数据存储库，甚至https:/ /developer.mozilla.org/en-US/docs/Web/API/Window/localStorage （或 sessionStorage）等...取决于运行外部文件的范围和/或必须传递数据的频率。

请记住，内联代码必须在来自外部文件的代码之前运行，即在包含其他脚本之前将其内联。