如何简化JS代码并避免重复加载？JSP+OCX控件场景问题咨询

First, let's unpack why you might be seeing issues when moving your common functions to common.js:

• Load order problems: If your <script> tag for common.js is placed after the <body> tag with onload/onunload attributes, the functions won't exist when the browser tries to call them.
• Scope issues: If your functions in common.js aren't attached to the global window object, they might be trapped in a local scope that the body events can't access.
• OCX initialization timing: OCX controls can load asynchronously, so your functions might run before the control is ready to interact with.

Here are the cleanest, most maintainable fixes to eliminate redundancy and ensure reliability:

1. Enforce Global Scope & Correct Load Order #

First, make sure your common functions are globally accessible and loaded before the body tries to call them.

In common.js, explicitly attach functions to the window object:

// common.js
window.ocxPageLoad = function() {
  // Your existing onload logic for OCX (e.g., initializing controls, setting callbacks)
  const ocxControl = document.getElementById('your-ocx-element-id');
  if (ocxControl) {
    ocxControl.init(); // Example OCX method
  }
};

window.ocxPageUnload = function() {
  // Your existing onunload logic (e.g., cleaning up OCX resources)
  const ocxControl = document.getElementById('your-ocx-element-id');
  if (ocxControl) {
    ocxControl.cleanup(); // Example OCX cleanup method
  }
};

Then, in every JSP page:

• Place the common.js script tag in the <head> section (so it loads before the body renders)
• Keep the body events simple:

<body onload="ocxPageLoad()" onunload="ocxPageUnload()">
  <!-- Your page content -->
</body>

2. Eliminate Body Event Attributes Entirely (Even Cleaner!) #

Instead of adding onload/onunload to every JSP body, bind the events directly in common.js. This removes all redundant code from your JSPs.

Update common.js to use modern event listeners:

// common.js
function ocxPageLoad() {
  // Your OCX initialization logic here
  const ocxControl = document.getElementById('your-ocx-element-id');
  if (!ocxControl) return;

  // Handle cases where OCX loads asynchronously
  function checkOCXReady() {
    if (typeof ocxControl.init === 'function') {
      ocxControl.init();
      return;
    }
    setTimeout(checkOCXReady, 100); // Retry every 100ms until ready
  }
  checkOCXReady();
}

function ocxPageUnload() {
  // Your OCX cleanup logic here
  const ocxControl = document.getElementById('your-ocx-element-id');
  if (ocxControl && typeof ocxControl.cleanup === 'function') {
    ocxControl.cleanup();
  }
}

// Bind events once the script loads
document.addEventListener('DOMContentLoaded', ocxPageLoad);
window.addEventListener('unload', ocxPageUnload);

Now, your JSP pages only need to include the script in the <head>—no body event attributes required:

<head>
  <script src="path/to/common.js"></script>
</head>
<body>
  <!-- Your page content -->
</body>

Why Your Redundant Workaround Worked #

When you copied the functions into each JSP and loaded common.js, the page-local functions were available immediately as the browser parsed the HTML. The common.js functions might have loaded later, but the page-local ones were already there to handle the body events. This is why it worked, but it's unnecessary once you fix scope and load order.

Key Notes for OCX Controls #

• OCX controls often have tricky initialization timing—using the checkOCXReady retry pattern ensures your code waits until the control is fully loaded before interacting with it.
• If different pages have slight variations in OCX logic, you can extend the common functions: add optional parameters or create a small "config" object in each JSP that common.js reads (e.g., window.ocxConfig = { controlId: 'my-ocx' };).

内容的提问来源于stack exchange，提问作者flower