我在HTML中的现有JavaScript看起来像：
<form ...> <p>Find what? <input ...></p> <div class="ButtonArray"> <a href="AddRecord.ASP&Action=ADD">ADD</a> <a href="#" onClick="return MyFormSubmit();">FIND</a> </div> </form>
这将显示[添加]和[查找]的按钮.对于Find,有必要提交表单,我使用MyFormSubmit()验证数据,为页面添加视觉效果,然后POST数据.
我可以为Find按钮添加一个CLASS或ID,在JQuery中我可以编写如下内容：
$(function() {
$(".MySearchButtonClass").click(function() {
// validate and process form here
});
});
在我与JQuery理解的“新手”阶段,我不明白为什么我会这样做
我的旧方法识别对象附近的方法.在用户按下按钮之前,JS可能存在未加载的风险(是否存在？JS的LOAD位于页面顶部).
在加载文档之前,JQuery Document Ready方法不会被激活(我假设JS已经存在并准备好运行了吗？),但它将代码移动到我的HTML文件的一个单独部分 – 所以当我在HTML源代码中看到了MyButtonArray DIV,对我而言哪些对象有方法,哪些对象没有方法.
能否帮助我了解我的选择以及我应该注意的好处/问题？
编辑：我觉得DOM操作 – 比如点击任何带有类“LightBoxThumb”的缩略图时可以出现的LightBox – 会使用Unobtrusive Javascript.
但是,我正在努力说服自己,具有特定操作的按钮应该以这种方式应用其方法. (我当然不会在按钮上放任何代码而不是单个函数调用“其他地方”的东西,但在我看来,这是我最好的线索,关于该按钮的作用,以及不显眼的Javascript图层可能会更难确定.)
Edit2 – 接受的答案
我采取了Russ Cams的回答.它以一种对我有所帮助的方式描述了Unobtrusive Javascript,以便更多地了解&什么时候应该使用.
目前(当我有更多经验时可能会改变！)我会坚持使用OnClick事件对一个对象进行单一的,不变的动作,因为我觉得我更容易调试 – 并诊断出现问题.对于允许单击标题列进行排序(以及该类型的情况)的表上的ZebraStripes,我可以看到Unobtrusive Javascript方法的好处
Russ的最终评论特别有用,在此重复：
“@Kristen – You’re right,like a lot
of programming topics,there is more
than one approach and people will
vehemently stand by their beliefs! If
we’re talking about a single method
for a single button,I totally
understand where you’re coming from…If we’re talking about lots of
JavaScript,with same function calls
for more than one element,different
function calls for different methods,
etc. I think that it would be more
difficult for oneself to mix inline
and unobtrusive approaches,and it
would be better to adopt one or the
other approach”
解决方法
- Separation of functionality (the “behavior layer”) from a Web page’s
structure/content and presentation- Best practices to avoid the problems of traditional JavaScript
programming (such as browser
inconsistencies and lack of
scalability)- Progressive enhancement to support user agents that may not support
advanced JavaScript functionality
使用document.ready中的代码,它将在DOM加载之前和加载页面内容之前执行
With $(document).ready(),you can get your events to load or fire or whatever you want them to do before the window loads.
你可能想看看jQuery in Action,我强烈推荐它.您可以在book’s homepage上对Chapter 1和Chapter 5进行抽样.我认为这样做可以进一步了解为什么分离可以很好地运作.
最后,看一下this question,它有详细说明如何在DOM节点上找到事件监听器的答案.
编辑：
一些想法可能会说服你为什么不引人注目的JavaScript可能是一个好主意.
想象一下,你有一个函数绑定为一个事件处理程序,用于在每个元素上引发的同一事件 –
>找出哪个会更容易吗？elements调用该函数来处理声明为内联时的事件在每个元素或声明中在一个地方,在外面标记？>如果你想添加到该怎么办？在何时调用该函数的元素他们每个人都提出了这个事件？是否更容易/更好地添加事件处理程序内联到每个元素或者在一个地方更改代码？
