不唐突的JavaScript(3)

http://www.itjxue.com  2015-08-06 23:19  来源:未知  点击次数: 

4.理解浏览器和用户(在既有的使用模式上创建你所需要的东西)

不唐突的JavaScript 中很重要的一部分就是理解浏览器是如何工作的(尤其是浏览器是如何崩溃的)以及用户期望的是什么。不考虑浏览器你也可以很容易地使用JavaScript创建一个完全不同的界面。拖拽界面,折叠区域,滚动条和滑动块都可以使用JavaScript创建,但是这个问题并不是个简单的技术问题,你需要思考下面的问题:

这个新界面可以独立于输入设备么?如果不能,那么可以依赖哪些东西?
我创建的这个新界面是否遵循了浏览器或者其它富界面的准则(你可以通过鼠标在多级菜单中直接切换吗?还是需要使用tab键?)
我需要提供什么功能但是这个功能是依赖于JavaScript的?
最后一个问题其实不是问题,因为如果需要你就可以使用DOM来凭空创建HTML。关于这点的一个例子就是“打印”链接,由于浏览器没有提供一个非JavaScript的打印文档功能,所以你需要使用DOM来创建这类链接。同样地,一个实现了展开和收缩内容模块的、可以点击的标题栏也属于这种情况。标题栏不能被键盘激活,但是链接可以。所以为了创建一个可以点击的标题栏你需要使用JavaScript将链接加入进去,然后所有使用键盘的用户就可以收缩和展开内容模块了。

解决这类问题的极好的资源就是设计模式库。至于要知道浏览器中的哪些东西是独立于输入设备的,那就要靠经验的积累了。首先你要理解的就是事件处理机制。

5.理解事件(事件处理会引起改变)

事件处理是走向不唐突的JavaScript的第二步。重点不是让所有的东西都变得可以拖拽、可以点击或者为它们添加内联处理,而是理解事件处理是一个可以完全分离出来的东西。我们已经将HTML,CSS和JavaScript分离开来,但是在事件处理的分离方面却没有走得很远。

事件处理器会监听发生在文档中元素上的变化,如果有事件发生,处理器就会找到一个很奇妙的对象(一般会是一个名为e的参数),这个对象会告诉元素发生了什么以及可以用它做什么。

对于大多数事件处理来说,真正有趣的是它不止发生在你想要访问的元素上,还会在DOM中较高层级的所有元素上发生(但是并不是所有的事件都是这样,focus和blur事件是例外)。举例来说,利用这个特性你可以为一个导航列表只添加一个事件处理器,并且使用事件处理器的方法来获取真正触发事件的元素。这种技术叫做事件委托,它有几点好处:

你只需要检查一个元素是否存在,而不需要检查每个元素
你可以动态地添加或者删除子节点而并不需要删除相应的事件处理器
你可以在不同的元素上对相同的事件做出响应
需要记住的另一件事是,在事件向父元素传播的时候你可以停止它而且你可以覆写掉HTML元素(比如链接)的缺省行为。不过,有时候这并不是个好主意,因为浏览器赋予HTML元素那些行为是有原因的。举个例子,链接可能会指向页面内的某个目标,不去修改它们能确保用户可以将页面当前的脚本状态也加入书签。

(责任编辑:IT教学网)

更多

推荐Javascript/Ajax文章