1、一般方式

在做前端功能时，我们一般是以元素ID和元素事件为中心来进行功能开发。

比如我们要实现搜索时输入关键字后回车即提交表单，在jQuery下一般的写法是：

<form>

 <input name="query" type="text" />

 <input type="sumbit" id="submitButton" value="提交" />

</form>

<script>

$(document).keyup(function(e) {

if (e.which == 13) {

$("#submitButton").click();

}

});

</script>

2、进一步封装

这样js代码就和id绑定死了，如果有多个页面中都有类似的回车提交功能，则可以再封装一下:

首先将写一个方法放到一个公用的js文件中：

function enterclick(id){

$(document).keyup(function(e) {

if (e.which == 13) {

$("#"+id).click();

}

});

}

然后在html中调用:

<form>

 <input name="query" type="text" />

 <input type="sumbit" id="submitButton" value="提交" />

</form>

<script>

enterclick("submitButton");

</script>

3、以css类为中心

但像bootstrap这样的前端框架采用的是以css类为中心的方式进行开发，即css样式除了决定元素的外观外，还可以决定元素的功能。以上功能用bootstrap的方式来写可以是这样：

首先在公用的css文件中加一个类：

.enterclick{

}

然后在功能的js文件中加如下代码

$(function(){

$(document).keyup(function(e) {

if (e.which == 13) {

$(".enterclick:first").click();

}

});

});

最后在需要实现回车提交的按钮上加样式

<form>

 <input name="query" type="text" />

 <input type="sumbit" class="enterclick" id="submitButton" value="提交" />

</form>

可以看到，这种方式使用起来简单一些，只要加一个样式即具有了回车提交的功能。同时一个元素可以加多个class样式，因而加了enterclick类不会影响按钮外观和其他功能。

4、复杂例子

下面举一个复杂例子。

7997.jpg

如上图所示的典型的搜索结果页为例，为了提高易用性，在页面的三个区域都有搜索输入框，输入后都要求能回车提交所在表单，如果输入框中没有值，则不允许提交，一般写法类似如下：

<!--表单1-->

<form id="f1" action="/search/result">

 <input id="f1_query" onfoucs="onQueryFocus(this);" onblur="onQueryBlur(this);"  name="query" type="text" />

 <input id="f1_button" type="button" onclick="serach(this);" id="submitButton" value="提交" />

</form>

......

<!--表单2-->

<form id="f2" action="/search/result">

 <input id="f2_query" onfoucs="onQueryFocus(this);" onblur="onQueryBlur(this);"  name="query" type="text" />

 <input id="f2_button" type="button" onclick="serach(this);" id="submitButton" value="提交" />

</form>

......

<!--表单3-->

<form id="f3" action="/search/result">

 <input id="f3_query" onfoucs="onQueryFocus(this);" onblur="onQueryBlur(this);"  name="query" type="text" />

 <input id="f3_button" type="button" onclick="serach(this);" id="submitButton" value="提交" />

</form>

.......

<script>

var currentQuery = null;

$(document).keyup(function(e) {

if (e.which == 13 && currentQuery) {

search(currentQuery);

}

});

function onQueryFocus(ele){

currentQuery = ele;

}

function onQueryBlur(id){

currentQuery = null;

}

function search(ele){

var prefix = ele.id.substring(0,ele.id.indexOf("_"));

if($("#"+prefix+"_query").val()){

$("#"+prefix ).submit()

}

}

</script>

以上基本上就是基于ID和事件的写法中代码量最少的了，看起来不太优雅，和ID值紧密相关，都没法封装到公用JS中去。

5、以css类为中心重写复杂例子

那么以css类为中心的写法有什么不同？请看：

<!--表单1-->

<form class="search" action="/search/result">

 <input class="search-query" name="query" type="text" />

 <input class="search-submit" type="button" value="提交" />

</form>

......

<!--表单2-->

<form class="search" action="/search/result">

 <input class="search-query" name="query" type="text" />

 <input class="search-submit" type="button" value="提交" />

</form>

......

<!--表单3-->

<form class="search" action="/search/result">

 <input class="search-query" name="query" type="text" />

 <input class="search-submit" type="button" value="提交" />

</form>

.......

<style>

.enterclick()

.search{}

.search-query{}

.search-submit{}

</style>

<script>

$(function() {

$(".search").each(function() {

var ele = this;

$(ele).find(".search-query").focus(function() {

$(ele).find(".search-submit").addClass("enterclick");

});

$(ele).find(".search-query").blur(function() {

$(ele).find(".search-submit").removeClass("enterclick");

});

$(ele).find(".search-submit").click(function() {

$(ele).submit();

});

});

$(document).keyup(function(e) {

if (e.which == 13) {

$(".enterclick:first").click();

}

});

});

</script>

可以看出HTML代码简单了很多，三个表单的基本代码完全一样，不用写on属性了，不用费劲安排id了。最重要的是，可以将这些css类和js方法提到公共文件中，从而在不同页面间通用。以后我们在前端功能的开发中应该尽量采用这种以css类为中心的开发方式，特别是封装的功能组件，都要优先以这种方式予以实现。