公共JS在页面底部加载时的作用域与调用问题

公共JS底部加载与模板结构

将JavaScript脚本文件放置在页面底部加载，能够有效提升页面的加载速度。

然而，PHP控制器的常规写法通常如下所示：

 
$this->load->view($HEADER);
$this->load->view($MENU);
$this->load->view($VIEW_SHOW, $data);
$this->load->view($FOOTER);

$FOOTER是一个共用模板，主要用于加载JS及CSS文件。

window.onload的作用域限制

$VIEW_SHOW作为主模板，可能需要编写特定的JS代码。若这些代码依赖公共文件的资源，将其直接写在$FOOTER之后会显得不便，且jQuery的$(document).ready机制可能无法生效。此时，使用window.onload是一个可行的替代方案，具体实现如下：

 
window.onload = function() {
(function($) {
function test() {alert(123);}
//或写些基于jQuery的绑定什么的
})(jQuery)
}; 

然而，如果尝试从window.onload外部调用其中的函数，例如在窗口的子iframe中通过parent.test()进行调用，将无法得到预期结果。

通过全局变量解决跨窗口调用

针对这一情况，可以采取变通措施，即将函数定义为全局变量。

 
var test; // 全局作用域的声明
window.onload = function() {
(function($) {
test = function() {alert(123);};
//或写些基于jQuery的绑定什么的
})(jQuery)
}; 

仅在需要时，将私有函数改为全局变量，这是一种更为安全的做法。