如何從 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）等...取決於運行外部文件的范圍和/或必須傳遞數據的頻率。

請記住，內聯代碼必須在來自外部文件的代碼之前運行，即在包含其他腳本之前將其內聯。