Question

我正在写一个断言函数。如果它尚不存在，我如何缓存#assert？

function assert( outcome, description ) {
   if (!$('#assert').length) {
      $('body').append('<ul id="assert"></ul>');
   }
   $('#assert').append('<li class="' + (outcome ? 'hide' : 'alert-danger') + '">' + description + '</li>');
}

Answer 1

$assert = $('<ul id="assert"></ul>');
$('body').append($assert);

请注意，我没有使用$assert关键字声明var，从而为其提供全局范围（如果您想在其他地方使用）。如果您只需要将其限定为断言函数，请使用var。

Answer 2

你的意思是这样的？

 div = $("<div>").attr("id", "assert")

Answer 3

我会这样做......

function assert( outcome, description ) {
    var assrt = $('#assert');
    if (!assrt || !assrt.length) {
        assrt = $('<ul>',{id:"assert"}).appendTo('body');
    }
    assrt.append('<li>', {className:outcome ? 'hide' : 'alert-danger', text:description});
}

或者如果后续调用意图使用assert元素，我可能会使用闭包来维护调用之间的引用...

var assert = (function() {
    var assrt = $('#assert');

    return function( outcome, description )
        if (!assrt || !assrt.length) {
            assrt = $('<ul>',{id:"assert"}).appendTo('body');
        }
        assrt.append('<li>', {className:outcome ? 'hide' : 'alert-danger', text:description});
    };
}());

你可以通过返回几个函数来扩展它......

var assert = (function() {
    var assrt = $('#assert');

    function verify_assert_container() {
        if (!assrt || !assrt.length) {
            assrt = $('<ul>',{id:"assert"}).appendTo('body');
        }
    }

    return {
        add: function( outcome, description )
            verify_assert_container();
            assrt.append('<li>', {className:outcome ? 'hide' : 'alert-danger', text:description});
        },
        empty: function() {
            verify_assert_container();
            assrt.empty();
        },
        sort: function() {
            verify_assert_container();
            // use sorting algorithm to reorder the LI elements
        },
        destroy: function() {
            if (assrt) {
                assrt.remove();
                assrt = null;
            }
        }
    };
}());

并像这样使用它......

assert.add('foo', 'bar');
assert.empty();
assert.destroy();

如何创建和缓存尚不存在的DOM元素？

3 个答案: