这里就是把逻辑处理代码和事件处理代码放到一起,这样会让调试不好调试,维护难度变高,而且要是突然修改要新增加一个事件做同样类似的逻辑处理,那就要复制一份逻辑处理代码到另一个事件函数中。较好的方法是将应用逻辑和事件处理程序分离开。例如:
function validateValue(value){ value=5*parseInt(value); if(value>10){ document.getElementById(“error-msg”).style.display=”block”; } } function handleKeyPress(event){ event=EventUtil.getEvent(event); if(event.keyCode===13){ var target=EventUtil.getTarget(event); validateValue(target.value); } }
这样事件处理和逻辑处理就分离开了,这样做有几个好处,可以让你更容易更改触发特定过程的事件,其次可以在不附加到事件的情况下测试代码,使其更易创建单元测试或是自动化应用流程。
事件和应用逻辑之间的松散耦合的几条原则:
勿将event对象传给其他方法;只传来着event对象中所需要的数据;
任何可以在应用层面的动作都应该可以在不执行任何时间处理程序的情况下能正常运行。
任何时间处理程序都应该处理事件,然后将处理转交给应用逻辑。
避免全局变量
这样会让脚本执行一致和可维护,最多创建一个全局变量。类似jQuery一样,所以方法属性都在$对象当中,避免对全局变量造成过多的污染。
尽量使用常量
数据和使用它的逻辑进行分离要注意一下几点:
重复值
用户界面字符串
url
任意可能会更改的值
其他优化
多变量声明时用一条语句逗号隔开声明
对dom的操作的优化
对dom进行html代码插入尽量在最后一次添加到dom对象中。
innerHTML的效率要比appendChild的效率高,以为innerHTML会创建一个HTML解析器,然后使用内部的DOM调用来创建DOM结构,而非基于JavaScript的DOM调用,由于内部方法是编译好的而非解释执行,所以执行快的多。
使用事件委托减少绑定的事件数量。
尽量少用到返回HTMLCollection语句。