Question

这整个问题是一种'我试过的'试图封装我的js，但它并没有像我希望的那样工作。

在我的页面上，我有一个div。

<div id='myDiv'></div>

我也有一些脚本：

<script type="text/javascript">

  $(function () {
    $('#myDiv').hide();
  });

</script>

这个脚本的大小和复杂性会增加，所以我希望它离开页面并进入外部js文件。那很好，但我也希望它可以重复使用。 javascript将做的是将div（和它的子节点）转换为控件（例如滑块）。

因此，在研究了几乎可以模仿javascript中oop原则的方法之后，我在外部文件中得到了以下内容：

var MyControl = function () {
    this.init= function (myDiv) { 
        myDiv.hide();
    };
};

然后我这样称呼它：

$(function () {
    var myControl = new MyControl();
    myControl.init($('#myDiv'));
});

问题是尽管调用了hide（），但div并未隐藏。如果我调试这个，我看到我有div，它被传递得很好，并且命中了我期望它的每一行代码（甚至可以在警报中显示div的类型）。

为什么页面上的div不受影响？

这种方法是否是推荐用于解决我在本文开头讨论过的问题的方法？

Answer 1

如果您想要使用相同的div，您可以尝试以这种方式创建组件：

function MyControl (div) {
   this.div = div;
}

MyControl.prototype.init = function () {
   return this.div.hide();
}

以这种方式使用它：

var myControl = new MyControl($('#myDiv'));
myControl.init();

在这里工作小提琴：http://jsfiddle.net/Z7vRq/

但如果您希望仅在init函数中使用它，请尝试以下方式：

function MyControl () { }

MyControl.prototype.init = function (div) {
   return div.hide();
}

var myControl = new MyControl();
myControl.init($('#myDiv'));

在这里工作小提琴：http://jsfiddle.net/Z7vRq/1/

关于评论：

您可以尝试将所有构造代码包装到该结构中：

var MyControl = (function () {
    function MyControl (div) {
        this.div = div;
    }

    MyControl.prototype.init = function () {
        return this.div.hide();
    }

    return MyControl;

})()

Answer 2

这种方法是否是推荐用于解决我讨论的问题的方法在这篇文章的开头？

我建议阅读RequireJS＆＃34; Why Modules＆＃34;和＆＃34; Why Asynchronous Module Definitions＆＃34;关于制作模块化JavaScript的不同挑战和解决方案的入门文章。

试图“封装”可重用的JavaScript代码

2 个答案: