【问题标题】:How do I use JQuery inside an object constructor in my own javascript namespace?如何在我自己的 javascript 命名空间的对象构造函数中使用 JQuery?
【发布时间】:2014-05-30 20:38:18
【问题描述】:

我什至在任何地方都找不到这个问题的答案,所以也许我完全找错了树...

我正在创建一个 javascript 命名空间,我在其中放置了一个构造函数:

var SEP=SEP||{};

SEP.person=function(name)
{
    this.name=name
    this.sayName=sayName

    function sayName()
    {
        return this.name;
        $(document).ready
        (
            function()
            {
                $('body').css('background', 'red');
            }
        );
    }
}

然后我从 HTML 调用函数...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<meta name="generator" content="BBEdit 10.5" />
</head>
<body>
<script src="libraries/jquery/javascript/jquery-1.11.0-min.js"></script>
<script src="libraries/sep/javascript/sep.js"></script>
<p>Hello</p>
<script>
    var bob=new SEP.person("bob");
    word=bob.sayName();
    document.write(word);
</script>
</body>
</html>

第一个问题是,为什么这不起作用? 问题二是我怎样才能让它工作? 问题三是,如果我想制作一个更复杂的构造函数,并且全面使用 JQuery,我是否需要一遍又一遍地做文档准备工作,还是有更好的方法?

非常感谢。

【问题讨论】:

  • 我不是说为什么 person 对象应该改变背景颜色,但是你可以重新考虑你的层次结构,将 jQuery 视为依赖项,所以你应该提供你的命名空间/对象来引用该依赖项
  • 这段代码只是我脑海中测试该方法有效性的第一行代码。这不是我正在做的项目的真实部分......所以,有人说出他们的名字,背景变成红色,这一切都很好! :) 如何在我的命名空间或对象中提供对 JQuery 的引用?

标签: javascript jquery function namespaces


【解决方案1】:

实际上,您的构造函数工作正常。但是你不应该在你的代码中使用document.write。相反,您可以使用 .append() .html().text() 方法将值附加到 html 标记。你的sayName() 方法也应该有一个小的变化,Css 应该在return 之前应用。否则它不会命中那些代码行。

var SEP = SEP || {};

SEP.person = function (name) {
    this.name = name
    this.sayName = sayName

    function sayName() {
        $('body').css('background', 'red');
        return this.name;
    }
}

var bob = new SEP.person("bob");
word = bob.sayName();
$("span").text(word);

Demo

【讨论】:

  • 哈哈哈...天哪!我不敢相信我错过了。而且,是的,document.write 只是为了快速测试响应——在现实生活中我实际上不会这样做。好的,所以这行得通,但是对于我想使用的所有其余的 JQuery,我该怎么办?当然,每次我想使用 JQuery 时,我都不必编写 $(document).ready 函数吗?我错过了更好的方法吗?顺便说一句,感谢您快速而出色的回复。
猜你喜欢
  • 2014-05-31
  • 1970-01-01
  • 1970-01-01
  • 2015-07-28
  • 1970-01-01
  • 1970-01-01
  • 2016-03-16
  • 2013-03-12
  • 2019-06-15
相关资源
最近更新 更多