尝试“封装”可重用的 JavaScript 代码答案

【问题标题】：Attempting to 'encapsulate' reusable javascript code尝试“封装”可重用的 JavaScript 代码
【发布时间】：2013-12-20 16:34:53
【问题描述】：

整个问题是一种“我尝试过的”，试图封装我的 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 不受影响？

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

【问题讨论】：

你有myDiv参数并调用div.hide()
很好看。这是一个错字（在这个问题中，不是我的实际代码），我现在将对其进行排序。谢谢。
您的代码中是否需要constructor 或者可以是简单的namespace？

标签： javascript jquery html function oop

【解决方案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;

})()

【讨论】：

我喜欢这个。不过，我唯一的评论是，您将 init 的定义带到了 MyControl 函数之外。这个想法是把所有这些都包起来，就好像它是一堂课一样。这个 init 可以在 MyControl 中声明吗？请原谅我对 js 中的可能性的无知，我来自 C# 背景，因此自然而然地转向类和对象的概念。
@DeeMac 看看我的编辑。我认为这是你能做的最接近的事情...... JS 的根源是一种原型语言，所以你能做的最好的方法是使用原型来构建控制器......
非常感谢。正是我所追求的。
这仍然不起作用。我的代码还有其他问题。您回答了我的问题，并且在您的小提琴中，您的函数能够操作 DOM 元素，而我的代码不能。
我整理好了。 .children() 方法不起作用，因为我引入了一个更新面板，它将 div 呈现为直接子元素，这意味着我必须将 children() 交换为 find()。现在工作正常。

【解决方案2】：

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

我建议阅读 RequireJS "Why Modules" 和 "Why Asynchronous Module Definitions" 文章，了解制作模块化 JavaScript 的不同挑战和解决方案。

【讨论】：