Back

obtrusive js v.s. unobtrusive js

发布时间: 2014-01-10 02:40:00

obtrusive js:

<div onclick='alert("hihihi"); a = 1+1; c = 2*2; ' > some text here </div>
1. 难于查看(特别是多行代码)    ( hard to view the code)
2. 难于单元测试   ( hard to write unit test)
3. JS 跟HTML 混在了一起。 ( mixed js with html... )

unobtrusive js: (含蓄JS)

<div class='alert_hi'>some text here</div>
<div class='alert_hi'> anotherr text ehrre.... </div>

<script>
$('.alert_hi').onclick = function (){ alert('hihihi') }
</script>

1. 解耦: JS 代码与HTML代码  (decoupled js and html)
2. 方便单元测试。 (比如上面,直接对FOO进行测试 )  (easy to test)
3. 提高代码复用程度。  (easy to reuse)
4. 高手都这么用。 ( js gurus way) 

Back