javascript 匿名函数的执行过程

最新推荐文章于 2023-04-04 15:39:48 发布

webdoes

最新推荐文章于 2023-04-04 15:39:48 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript stylesheet function input include xhtml

本文链接：https://blog.youkuaiyun.com/jallin2001/article/details/6415215

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一个使用ZF框架编写的HTML模板案例，并详细分析了JavaScript文件加载顺序对DOM元素事件绑定的影响，强调了正确的加载顺序对于确保页面交互正常运作的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是一段常见的用ZF框架写的html模板：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="<?php echo $this->basePath . '/'; ?>" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>title=<?php if ($this->cf_id == 1) : echo 'test1'; else : echo 'test2'; endif;?>&width=800&height=600</title> <link href="style/css.css" mce_href="style/css.css" type="text/css" rel="stylesheet" /> <link href="style/comment.css" mce_href="style/comment.css" type="text/css" rel="stylesheet" /> <link href="style/rater-star.css" mce_href="style/rater-star.css" type="text/css" rel="stylesheet" /> <mce:script type="text/javascript" src="/ggzg/js/jquery.js" mce_src="ggzg/js/jquery.js"></mce:script> <mce:script type="text/javascript" src="/ggzg/js/rater-star.js" mce_src="ggzg/js/rater-star.js"></mce:script> </head> <body scroll="no"> <input type="hidden" value="<?php echo $this->uid;?>" id="uid"/> <input type="hidden" value="<?php echo $this->cf_id;?>" id="cf_id"/> <input type="hidden" value="<?php echo $this->time;?>" id="time"/> <input type="hidden" value="<?php echo $this->market;?>" id="market"/> <input type="hidden" value="<?php echo $this->code;?>" id="code"/> <input type="hidden" value="<?php echo $this->account;?>" id="account"/> <?php include_once 'comment.phtml';?> <mce:script type="text/javascript" src="/ggzg/js/util.js" mce_src="ggzg/js/util.js"></mce:script> <mce:script type="text/javascript" src="/ggzg/js/index/history.js" mce_src="ggzg/js/index/history.js"></mce:script> </body> </html>

其中的“<?php include_once 'comment.phtml';?>”这句表示引入另外的一个dom结构，如果“util.js”放在comment.phtml的前面，

那么在comment.phtml模板中的一些元素的绑定事件，就无法执行：

/** * 用户点击留言的时候调用的方法，匿名自动运行的函数 */ (function comment(){ /** * 点击"留言"图标的时候调用的方法 */ $("#comment").bind("click", function(){ $("#commentContent").val(''); $("#commentFail").hide(); $("#commentResult").show("slow"); $("#commentContent").focus(); }); /** * 点击"关闭"图标的时候调用的方法 */ $("#closeComment").click(function(){ $("#commentResult").hide("slow"); }); /** * 点击"提交"图标的时候调用的方法 */ $("#submitComment").click(function(){ var commentContent = $("#commentContent").val(); //用户评论的内容 if (commentContent.length <= 0) { alert('评论内容不能为空！请输入：'); } else if (commentContent.length > 1000) { alert('评论内容不能超过1000个文字！'); } else { var paramArr = ['uid', 'cf_id', 'account', 'code', 'time', 'market']; var paramObj = makeAjaxParam(paramArr); paramObj.comment = commentContent; $.ajax({ method : 'post', url : 'liuyan/liuyan/', data : paramObj, success : function(result) { var obj = eval('(' + result + ')'); var code = obj.code; var msg = obj.msg; var count = obj.count; if (code == 0) { //留言成功！ $("#commentCount").html(count + '/已留言！'); $("#commentResult").hide("slow"); $("#comment").unbind("click"); } else { $("#commentFail").html(msg); $("#commentFail").show(); } } }); } }); })();

可能是在动态加载外界元素的时候，如果这些元素有匿名函数进行绑定，必须要先载入这些元素，对应的js代码应该在dom的载入之后，否则会出现bug，无法执行绑定的事件，但是在绑定之前的js是可以调用的。比如说在comment元素的绑定之前，执行的方法是可以调用的。