不唐突的JavaScript的七条准则[翻译]（3）
作者：Dreamer 来源：蓝色理想 发布时间：2008-12-09 13:33:00
4.理解浏览器和用户（在既有的使用模式上创建你所需要的东西）
不唐突的JavaScript 中很重要的一部分就是理解浏览器是如何工作的（尤其是浏览器是如何崩溃的）以及用户期望的是什么。不考虑浏览器你也可以很容易地使用JavaScript创建一个完全不同的界面。拖拽界面，折叠区域，滚动条和滑动块都可以使用JavaScript创建，但是这个问题并不是个简单的技术问题，你需要思考下面的问题：
这个新界面可以独立于输入设备么？如果不能，那么可以依赖哪些东西？
我创建的这个新界面是否遵循了浏览器或者其它富界面的准则（你可以通过鼠标在多级菜单中直接切换吗？还是需要使用tab键？）
我需要提供什么功能但是这个功能是依赖于JavaScript的?
最后一个问题其实不是问题，因为如果需要你就可以使用DOM来凭空创建HTML。关于这点的一个例子就是“打印”链接，由于浏览器没有提供一个非JavaScript的打印文档功能，所以你需要使用DOM来创建这类链接。同样地，一个实现了展开和收缩内容模块的、可以点击的标题栏也属于这种情况。标题栏不能被键盘激活，但是链接可以。所以为了创建一个可以点击的标题栏你需要使用JavaScript将链接加入进去，然后所有使用键盘的用户就可以收缩和展开内容模块了。
解决这类问题的极好的资源就是设计模式库。至于要知道浏览器中的哪些东西是独立于输入设备的，那就要靠经验的积累了。首先你要理解的就是事件处理机制。
5.理解事件（事件处理会引起改变）
事件处理是走向不唐突的JavaScript的第二步。重点不是让所有的东西都变得可以拖拽、可以点击或者为它们添加内联处理，而是理解事件处理是一个可以完全分离出来的东西。我们已经将HTML,CSS和JavaScript分离开来，但是在事件处理的分离方面却没有走得很远。
事件处理器会监听发生在文档中元素上的变化，如果有事件发生，处理器就会找到一个很奇妙的对象（一般会是一个名为e的参数），这个对象会告诉元素发生了什么以及可以用它做什么。
对于大多数事件处理来说，真正有趣的是它不止发生在你想要访问的元素上，还会在DOM中较高层级的所有元素上发生（但是并不是所有的事件都是这样，focus和blur事件是例外）。举例来说，利用这个特性你可以为一个导航列表只添加一个事件处理器，并且使用事件处理器的方法来获取真正触发事件的元素。这种技术叫做事件委托，它有几点好处：
你只需要检查一个元素是否存在，而不需要检查每个元素
你可以动态地添加或者删除子节点而并不需要删除相应的事件处理器
你可以在不同的元素上对相同的事件做出响应
需要记住的另一件事是，在事件向父元素传播的时候你可以停止它而且你可以覆写掉HTML元素（比如链接）的缺省行为。不过，有时候这并不是个好主意，因为浏览器赋予HTML元素那些行为是有原因的。举个例子，链接可能会指向页面内的某个目标，不去修改它们能确保用户可以将页面当前的脚本状态也加入书签。
0
投稿猜你喜欢
- 当我们在使用validate等方法进行验证时，如果是错误，则会返回首页1、直接在请求头中在请求头header中，accept使用appcli
- PHP观察者模式（Observer Pattern）观察者模式是一种行为设计模式，它定义了一种订阅机制，让一个或多个对象（观察者）自动被通知
- 脚本如下： drop table table1; CREATE TABLE `andrew`.`table1` ( `name` VARCH
- 1，IE使用attachEvent/detachEvent方法来添加和删除事件 * ；w3c使用addEventListener/remov
前言NSQ是Go语言编写的，开源的分布式消息队列中间件，其设计的目的是用来大规模地处理每天数以十亿计级别的消息。NSQ 具有分布式和去中心化- 一、TensorFlow模型保存和提取方法1. TensorFlow通过tf.train.Saver类实现神经网络模型的保存和提取。tf.t
- 作者：norika 整理日期：2004年6月17日 基本介绍： showModalDialog() (IE 4
- varint今天本来在研究 OpenTelemetry 的基准性能测试 github.com/zdyj3170101…
- 下面的asp函数实现了对站点的所有缓存Application的清理，释放！Sub RemoveAllCache() D
- mysql 模糊查询 concat()concat() 函数，是用来连接字符串。精确查询： select * from user where
- 在编程过程中，多了解语言周边的一些知识，以及一些技巧，可以让你加速成为一个优秀的程序员。对于Python程序员，你需要注意一下本文所提到的这
- 加密接口怎么测试？(1)写个函数或者方法，把要加密的参数使用这个函数过滤一遍，等于就是说把数据丢进去，加密了之后，再通过这个加密好的数据传输
- 知识掌握 cv2.threshold()函数：设置固定级别的阈值应用于多通道矩阵，将灰度图像变换二值图像，或去除指定级别的噪声，或过滤掉过小
- 1.定义变量时可以直接赋值 DECLARE @Id int = 5 2.Insert 语句可以一次插入多行数据 INSERT INTO St
- 一、项目展示项目是一个简单实用的二维码生成器。使用者可以在生成器中输入文字生成二维码，也可以在识别器中识别二维码的内容二、项目核心代码二维码
- 哈希数据类型的创建与数据的添加 - hmset利用 “redis-py” 模块实现 &ldq
- 如果没有读过上面内容的读者，有兴趣的可以一阅。在上面的使用JdbcTemplate一文中，主要通过spring提供的JdbcTemplate
- 一、如何将列表数据写入文件 ⾸先，我们来看看下⾯这段代码，并思考：这段代码有没有问题，如果有问题的话，要怎么改？li = [
- pandas的qcut可以把一组数字按大小区间进行分区,比如data = pd.Series([0,8,1,5,3,7,2,6,10,4,9
- 数据库的启动过程（3个台阶）1.nomountshutdown --> nomountstartup nomountselect st
