Question

所以，我一直在搜索一些处理HTML和Javascript中可重复使用项目的现有问题，而且我不确定是否有任何可以让我开始的事情我是＆＃39 ;我正在寻找。我不是非常精通js，而是一遍又一遍地重写相同的代码而不得不对它进行维护，我更喜欢构建一个可重用的框架，我可以在几个地方申请。

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

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

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

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

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

Answer 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");

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

Answer 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>

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

2 个答案: