使用 Javascript 创建可重用的 HTML 控件答案

【问题标题】：Create a Reusable HTML Control w/ Javascript使用 Javascript 创建可重用的 HTML 控件
【发布时间】：2014-10-22 16:30:15
【问题描述】：

所以，我一直在搜索一些现有的关于 HTML 和 Javascript 中可重用项目的问题，但我不确定是否有任何东西可以让我开始寻找。我不是非常精通 js，但与其一遍又一遍地重写相同的代码并且必须对其进行维护，我更愿意构建一个可重用的框架，我可以应用在几个地方。

基本布局是这样的：有一个带有“添加”按钮的输入字段，每次添加名称时，它都会在输入下方显示一个复选框。当您取消选中它时，该名称将从列表中删除。

我对样式和构建 HTML 很好，我迷失的是在 js 中开发一个可以在多个地方应用的对象。我的想法是这样的：

function createInputControl(targetElementId) {
    var newInputControl = new ItemInputControl();
    newInputControl.onItemAdded = customItemAddedCallback;
    newInputControl.onItemRemoved = customItemRemovedCallback;
    newInputControl.createInElement(targetElementId);
}

这就是我正在寻找的开始。一个我可以创建的对象，它在通过用户交互添加或删除项目时指定了回调，并且我可以在页面上的现有元素中绘制它。

编辑：我在这里寻找的是一个 javascript 对象（上面名为 ItemInputControl）的骨架，其中包含我可以在整个站点中重复使用的这些函数/属性。

【问题讨论】：

奇怪的用户界面...通常你只有未选中的复选框，而不是下面你有按钮说[删除选定]和[全选/取消全选]:)
您的问题提供了对 JS 中 OOP 的一些基本了解。你试过什么吗？至少分享一些基本的 HTML 和（迄今为止最好的）JS？（否则看起来像请为我做（免费））
抱歉，我不是在找人免费做我的工作。我正在寻找的是构建ItemInputControl() 对象的正确方向，以及如何在其中指定回调。我很好地写出必要的 HTML。我已经使用 HTML 和 JS 构建了一次控件，但它特定于站点上的该位置。我想要功能，这样我就可以说“好的，采用这个基本概念，并将其应用到另一个页面和另一个页面”
不完全是 OOP，而是：jsfiddle.net/oq67yton/1
Dojo/Dijit 库倾向于很好地使用这个原则；即，您可以声明new Button({onClick: this.processSubmit}, buttonElement); 来制作一个替换按钮元素内容的按钮小部件。最后全部转换为 HTML。

标签： javascript jquery html

【解决方案1】：

好的，所以如果我理解正确 - 您正在寻求有关如何制作可在整个应用程序中使用的全局可访问变量的帮助，例如 jQuery。你有两个主要的选择来做你想做的事

首先 - 您可以使用 Object Literal，它公开一个全局变量，并且您的所有方法都包含在：

(function (window) {
    var inputControl = {
        onItemAdded: function () {
            // do stuff
        },
        onItemRemoved: function () {
            // do stuff
        },
        createInElement: function (targetElementId) {
            // do stuff
        }
    };
    window.ItemInputControl = inputControl;
})(window);

这样使用：

ItemInputControl.createInElement("elementId");

您的第二个选择是使用原型：

(function (window) {
    var inputControl = function () {
        // Constructor logic
        return this;
    };
    inputControl.prototype.onItemAdded = function () {
        // do stuff
        return this;
    };
    inputControl.prototype.onItemRemoved = function () {
        // do stuff
        return this;
    };
    inputControl.prototype.createInElement = function (elementId) {
        // do stuff
        return this;
    };
    window.ItemInputControl = inputControl;
})(window);

这样使用：

var newInputControl = new ItemInputControl();
newInputControl.createInElement("elementId");

对于单个应用程序中的大多数情况 - 我更喜欢在我的框架中使用对象文字。如果我正在构建一个广泛分布的 JavaScript 框架，我可能会使用原型模式。您可以在此处阅读有关原型模式的更多信息：http://www.htmlgoodies.com/beyond/javascript/some-javascript-object-prototyping-patterns.html

【讨论】：

好的，这非常有帮助。链接也很棒。再次，作为新手，我不完全确定我会采取哪种方法，但我很高兴你能够破译我的问题。我现在正在处理这个问题，并会让你知道我在哪里得到它。谢谢。
谢谢，如果您还有其他问题，请告诉我。如果我的回答对您有帮助，请点赞并采纳。谢谢！
还不能投票，太新了！如果这一切对我来说都很好，我会接受它。这是一个开始，而我所寻找的只是一个开始。谢谢。
好的，所以这个答案肯定很有帮助，你提供的链接更是如此。我能够构建我希望的ItemInputControl()，并且我可以为添加或删除项目时指定适当的回调。我应该说，在有人单击“添加项目”并将事件处理程序添加到这些新项目后创建新项目时，我遇到了很多困难，以便他们在“删除”上点击正确的回调。也就是说，直到我遇到这个问题：stackoverflow.com/questions/6985288/… 帮助了 TON

【解决方案2】：

嗯，我不确定这是否真的有帮助，但也许它会包含一些对你的想法。

所需的两个 HTML 元素存储为格式字符串，并且在 DOM 中动态添加/删除所有内容。

var listid = 0;

    $(document).ready(function() {

        var controlHtml = + // {0} = mainid
            '<div>' +
                '<input id="text-{0}" type="text" />' +
                '<div id="add-{0}" class="addButton">Add</div>' +
            '</div>' +
            '<div id="list-{0}"></div>';

        var listHtml = +  // {0} = mainid, {1} = listid, {2} = suplied name
            '<div id="list-{0}-{1}"><input id="checkbox-{0}-{1}" type="checkbox class="checkboxClass" checked />{2}<div>';

        $('#content').append(controlHtml.f('0'));

        $('.addButton').click(function(e) { addClick(e); });

    });

    function addClick(e) {
        var id = e.currentTarget.id.split('-')[1];
        var name = $('text-' + id).val();
        $('.list-' + id).append(listHtml.f(id, listid, name));
        listid++;
        $('.checkboxClass').click(function() { checkboxClick(e); });
    }

    function checkboxClick(e) {
        $('#' + e.currentTarget.id).remove();
    }

    String.prototype.f = function () { var args = arguments; return this.replace(/\{(\d+)\}/g, function (m, n) { return args[n]; }); };

当然还有非常小的 HTML 允许添加控件的钩子：

<body>
    <div id="content"></div>
</body>

【讨论】：