Question

我需要在元素中创建一个链接，然后将其与函数绑定。在消息面板的示例关闭按钮中。

哪种解决方案最好，为什么？我的意思是性能/标准。或者也许还有其他更好的东西：

1。匿名函数+ onclick函数在匿名中调用

function add-close-button( ){
  $( '.msg' ).append( '<a href="#" class="close">Close me</a>' );
  $( '.msg .close' ).click( function(){ close-msg( ); } );
}
function close-msg( ){ /* code here */ }

2。定义函数+ html onclick

function add-close-button( ){
  $( '.msg' ).append( '<a href="#" class="close" onclick="close-msg">Close me</a>' );
}
function close-msg( ){ /* code here */ }

3。关闭函数未定义，只是匿名onclick函数

function add-close-button( ){
  $( '.msg' ).append( '<a href="#" class="close">Close me</a>' );
  $( '.msg .close' ).click( function(){ /* code here */ } );
}

Answer 1

对于＃1 - 添加更多命名函数会使全局命名空间变得混乱。这不是一件大事，但它会导致更多的扫描＆＃34;全局调用时的全局命名空间。使用虚拟对象命名所有内容的另一个动机（例如var namespace = {};）

对于＃2 - 使用＆＃34; onclick＆＃34; HTML中的处理程序将您的实际代码实现与您的演示文稿混合在一起，这被认为是一个旧的帽子＆＃34;并且在你的JS文件中更难以看到该事件被绑定，可读代码是好的。

对于＃3，如果你只是想要那个特定的处理程序而没有重用，那么它很快就会从HTML中解脱出来。如果你需要进行后续绑定，你必须跳过更多的箍，因为匿名函数被直接分配给处理程序，并且不会存在于代码中的任何其他地方。

如果你想要一个更复杂和动态的用法，你可以使用jQuery.on来做委托事件绑定（再次使用匿名函数）。

使用委派的事件查看我的快速演示here。

HTML：

<div id="myContent">
    <a href="#" class="close">Close me</a>
    <br/>
    <a href="#" class="showClose">Trigger the Close button appearing</a> 
</div>

脚本：

$( "#myContent" ).on("click", ".close", function() {
  alert("clicked");
});

$( "#myContent" ).on("click", ".showClose", function() {
  $(".close").toggle();   
});

CSS：

.close {
   display:none;   
}

onclick - 匿名函数vs定义vs html onclick

1 个答案: