无侵入脚本编程[读书笔记]

无侵入脚本编程（unobtrusive scripting）它意味着向基于CSS的、兼容标准的WEB站点的Javascript脚本的全新应用理念。
无侵入脚本包括以下特征：

• 它应该是可用的。即能给网站带来明确的功能可用性好处。
• 它应该是可访问的。即如果Javascript失效了，网页应该依然是可以阅读和可理解的，即使不可避免地损失一些可用性。
• 它应该是容易实现的。典型的情况：WEB开发者只需要在页面中引入脚本本身和一个Javascript钩子（hook），然后脚本就可以运行。
• 它应该是分离的。它只存在于.js文件中，做到功能模块的封装，而不是散落在HTML的各个角落。

分离的观点是从CSS变革中借鉴而来，如果要分离HTML和CSS，那么将Javascript从这两者中分离出来也是符合逻辑的。

一个WEB页面有以下三层组成：HTML结构层、CSS表现层和Javascript行为层。
HTML结构层乃万物之肌肤，其他东西都要附着在这上面生存。HTML标签形成页面结构，并赋予页面内容以意义。CSS表现层目的是定义如何展现我们的HTML。Javascript行为层把交互加入到HTML/CSS页面中。把客户端代码分为三层还引出另一个话题，即分离关注点。最基本的要求是确保做到：HTML是结构化的，不要太复杂，而且在没有CSS和Javascript的情况下要有意义；CSS表现层和Javascript行为层分别放置于.css文件和.js文件中；此外，分离使你可以改变整个CSS表现层，给你的网站一个全新的设计，而且既不用重写HTML结构，也不用重写Javascript行为层。

三个分离

所谓三个分离就是：表现与结构的分离（CSS与HTML）；行为与结构的分离（Javascript与HTML）；行为与表现的分离（Javascript与CSS）。清晰认识这三者间的关系，将一直影响到我们编写现代Javascript的方方面面。

表现与结构的分离（CSS与HTML）我觉得应该在WEB标准栏目讨论比较适当，这里就不记录了。

行为与结构的分离（Javascript与HTML）

比较容易理解：不把任何Javascript代码写到HTML页面里。事实上，HTML页面里Javascript代码绝大部分都是由内联的事件处理程序组成的。在这里，重点说下Javascript:伪协议
有时候我们经常看到类似的javascript:伪协议链接。

<a href="javascript:dosomething()">do something</a>

这段复杂且晦涩的代码暗地里定义了一个onclick事件处理程序。正确的事件处理设计应该是分离的，如：

 <a href="somepage.html" id="do">goto</a>

//在单独的.js文件中

document.getElementById('do').onclick = dosomthing;

对于href属性来说，要不就让它包含一个URL地址以便那些禁用脚本的用户可以继续访问，要不就由Javascript来生成整个链接。

行为与表现的分离（Javascript与CSS）

这比前两者的分离要复杂得多，在现代Javascript编程中，这种分离仁者见仁、智者见智。基本的问题在于：哪些效果应该用CSS定义？而哪些应该用Javascript？尽管答案好像很明显：表现用CSS，行为用Javascript。但事实上存在CSS和Javascript重合的灰色地带，不能清楚地把某个效果归为表现还是行为。

＝＝＝＝＝待续＝＝＝