浅谈HTML内联绑定JavaScript function

背景

在日常学习工作中，大家似乎都对HTML的各种内联用法嗤之以鼻，但就绑定js的方法来说似乎并不能一棒子打死

js里绑定

先来看在js里面绑定方法

input type="button" id="id" value="Check Number" 

$("#id").bind("click",function(){
  $("p").slideToggle();
});

大多数情况下都要约定一个id或者name甚至是class，这里js就和HTML耦合在一起了，事实上也很有可能会有改命名的场景，例如一开始写好的代码用的命名冲突了。这时候既要改HTML又要改js，可以说这就是活生生的硬代码，非常不优雅。

HTML内联绑定方法

代码示例

input type="button" value="Check Number" onclick="IsEven()"

input type="button" value="Check Number" onclick="IsEven()"

function IsEven() 
{
   ///
}

这里HTML便签去掉了签名为了绑定方法而起的名字而使用了onclick来声明绑定的方法。看起来好像HTML耦合了js？实际上这里只是声明了这个元素绑定了什么方法而已，而且还把之前为了使用而约定的东西个去掉了，而且js的function也可以复用了，另外的标签也可以绑定相同的function。而且当function重命名的时候，现在大多数的IDE都可以使用refactor重构功能把HTML引用到的地方一起给重构了。笔者使用的IDEA就有这个安全重构的功能。

function IsEven() 
{
   $('#load').html($('#template').html());
   $('#template').remove();
   $('#load').html($('#template').html());

}

还有HTML作为模板代码的时候，在引用的时候可以不用再像上面收到绑定一次，而直接就具备绑定的功能。

总结

经过以上的示例，可以看到并不是所有的HTML内联写法都是不好的，当然直接在HTML里面写样式肯定是不行的。