单例模块和导入全局 jQuery 对象

发布于 2024-12-09 14:36:40 字数 1251 浏览 0 评论 0原文

为了改进我的编码方式，我一直在阅读有关单例模块的内容。我认为我已经完全掌握了这一点，但是我看到了一个将 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 方法。

**它可以工作了 - 你好，我在全局 var domRef 前面添加了 var，这似乎解决了问题 - 谁能解释一下为什么？而且我似乎可以使用 domRef 而不声明 var 但是上面的变量需要是“1”我们生活和学习哈哈

原文

In an attempt to improve the way I code I have been reading about the Singleton Module. Which I think I have fully grasped however I have seen an example that imports jquery as a global, however I was unable to reference a DOM element like below:

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>

Please remember this code is just me playing around to gain an understanding, but wondering why I can not retrieve the value of a DOM element from within the closure. Have I missed the point or have I made some school point error? Please note the element exists in the DOM and jQuery is loaded before this module. Also this is not an attempt at creating a jQuery plugin.

Any help would be greatly appreciated.

Please note I am just using firebug to execuete the init method after the dom has loaded.

**GOT IT WORKING - Hi I added var in front of the global var domRef and this seemed to fix the problem - could anyone explain why ?
Also it seemed I can use domRef with out declaring var however the variable above needed to be "1" we live and learn lol

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

帅气尐潴 2024-12-16 14:36:40

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") 。

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

Note that in order to have a valid "domRef", you need to execute this code after the dom is loaded, so that $("#pie") exists at execution time.

回复收藏 0 原文

神经暖 2024-12-16 14:36:40

这有效： http://jsfiddle.net/J9PKB/ 你到底能做什么？

编辑

您没有在任何地方使用init方法...，您希望它会自动调用吗？因为它不会。你必须自己调用它。

在包含 JS 文件后，将其添加到您的 head 标签上：

<script type="text/javascript">
  $(document).ready(function() {  bnTalent.init(); } );
</script>

如果有帮助，请告诉我！

This works: http://jsfiddle.net/J9PKB/ what exactly are you not able to do?

Edit

You're not using the init method anywhere..., are you hoping it'll get call automatically? Because it won't. You have to call it yourself.

Add this on your head tag, after including your JS files:

<script type="text/javascript">
  $(document).ready(function() {  bnTalent.init(); } );
</script>

Let me know if this helps!

回复收藏 0 原文

~没有更多了~

关于作者

厌味

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

单例模块和导入全局 jQuery 对象

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

单例模块和导入全局 jQuery 对象

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。