Loading

立即执行函数问题

 

 

<html>
<body>
    <a>我是好人</a>
    <script>　
        var module1 = (function (mod) {
            mod.a = $("a").html();
            mod.show = function () {
                alert(mod.a);
            }
            return mod;
        })(window.module1 || {});
        $(function () {
            module1.show();
        })
    </script>
</body>
</html>
 
要想正确获取a中的html，必须将立即执行函数放到html后面
但是，一般页面开发，习惯性的把js代码放在页头

<html>
<head>
<script>　
var module1 = (function (mod) {
mod.a = $("a").html();
mod.show = function () {
alert(mod.a);
}
return mod;
})(window.module1 || {});
$(function () {
module1.show();
})
</script>
</head>
<body>
<a>我是好人</a>
</body>
</html>

就会导致页面dom元素还未加载的时候就执行了定义的函数，访问不到a中元素

想到的解决办法

<html>
<head>
<script>　
var module1 = (function (mod) {
mod.init = function () {
mod.a = $("a").html();
}
mod.show = function () {
alert(mod.a);
}
return mod;
})(window.module1 || {});
$(function () {
module1.show();
})
</script>
</head>
<body>
<a>我是好人</a>
</body>
</html>

 

您有什么好的建议吗
推荐大家读下这篇关于javascript模块化管理的文章
posted @ 2015-04-10 17:39  shihao316558512  阅读(230)  评论(0)  编辑  收藏  举报