javascript – Singleton模块和导入全局jQuery对象

2023年5月6日 193次阅读

为了改进我编码的方式,我一直在阅读有关Singleton模块的内容.我认为我完全掌握了但是我已经看到了一个将
jquery导入为全局的示例,但是我无法引用如下的DOM元素：

var bnTalent = (function ($) {
    var bnt = {},
        privateVariable = 1;
    domRef = $("#pie").val();

    function privateMethod() {
        // ...
    }

    bnt.moduleProperty = 1;
    bnt.init = function () {
        alert("bingo" + domRef);
        //domRef.hide();
    };

    return bnt;
}(jQuery));

HTML：

    <!DOCTYPE html>
<html>
<head>
<title>bnTalent</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/bnTalent.js"></script>

<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
</head>

<body>

<input type="text" id="pie" value="mypies" />
</body>

</html>

请记住这段代码只是为了获得理解,我想知道为什么我无法从闭包中检索DOM元素的值.我是否错过了这一点,还是我犯了一些学校点错误？请注意元素存在于DOM中,并且在此模块之前加载了jQuery.这也不是尝试创建jQuery插件.

任何帮助将不胜感激.

请注意我只是在dom加载后使用firebug来执行init方法.

** GOT IT WORKING – 您好我在全局变量domRef前添加了var,这似乎解决了问题 – 任何人都可以解释原因吗？
此外,我似乎可以使用domRef声明var然而上面的变量需要为“1”我们生活和学习大声笑

最佳答案

function bnTalentFactory($){
    if(bnTalentFactory.bnt)
        return bnTalentFactory.bnt;
    if(arguments.length == 0 || arguments[0] != jQuery)
        var $= jQuery;
    var bnt = {},
        privateVariable = 1,
        domRef;

    function privateMethod() {
        // ...
    }

    bnt.jqueryIsDefined = function(){
        return $=== jQuery;
    }
    bnt.moduleProperty = 1;
    bnt.init = function () {
        domRef = $("#pie").val();
        alert("bingo" + domRef);
        //domRef.hide();
    };
    bnTalentFactory.bnt = bnt;
    return bnt;
}

var bnTalent = bnTalentFactory();
var anotherBnTalent = bnTalentFactory();
alert(bnTalent === anotherBnTalent);// true => the same instance
alert(bnTalent.jqueryIsDefined());// true => jquery is defined inside this object, withouth even passing it to the factory

请注意,为了拥有有效的“domRef”,您需要在加载dom后执行此代码,以便在执行时存在$(“#pie”).

点赞