我正在开发一个完全基于 ajax 的 Web 应用程序。有两个主要部分。左侧面板有链接;单击任何链接时,右侧面板的内容会通过 ajax 动态加载。ajax 调用返回包含 html 和 javascript 的 json 编码响应。这是示例 page1.php 文件。
$output=array();
ob_start();
include("page1html.php");
$output['html']=ob_get_clean();
ob_start();
include("page1script.php"); //page1script.php return the page specific script
$output['script']=ob_get_clean();
echo json_encode($output);
这是示例 page1script.php
<script>
ajaxscript = { //namespace
init: function () {
},
foo: function () {
}
};
</script>
其他页面的样式相同,但使用不同的 html 和不同的脚本。(这就是我没有创建全局 js 文件的原因,因为它会变成一个大文件。我只想加载特定于页面的 js)。
//this is onclick of link
updatecontents("page1.php"); ...
updatecontents("page2.php"); and so on
这是我的js
var xhr;
var ajaxscript = null;
function updatecontents(addrs) {
if(xhr) xhr.abort();
$('#mainpanel').html('<div class="loader"></div>');
$('#ajscript').html('');
ajaxscript = {}; //remove the previous functions in the namespace; This is where I cleanup the old functions
xhr=$.ajax({
url: addrs,
dataType : 'json',
success: function(response) {
if(response.html)
$('#mainpanel').html(response.html);
if(response.script)
$('#ajscript').html(response.script);
if(typeof(ajaxscript.init)=='function') ajaxscript.init();
},
error: function () {}
});
}
这是 II 可以达到的最好的结果......但我刚刚注意到 firefox firebug scripts 选项卡中的列表不断增长:在 js//eval/seq/ 下,每次单击链接时都会增长。这让我觉得每次单击链接时脚本都会加载到内存中,并且它们会保留在浏览器缓存中。如果我走在正确的道路上,我想获得一些专家意见……或者我需要什么优化。