1、一般方式

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

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

2、进一步封装

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

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

function enterclick(id){

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

if (e.which == 13) {

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

}

});

}

然后在html中调用:

3、以css类为中心

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

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

.enterclick{

}

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

$(function(){

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

if (e.which == 13) {

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

}

});

});

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

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

4、复杂例子

下面举一个复杂例子。

7997.jpg

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

......

......

.......

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

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

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

......

......

.......

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