以CSS类为中心开发前端功能

作者:  最后修改:2015年08月06日  浏览数:196

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

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类为中心的开发方式,特别是封装的功能组件,都要优先以这种方式予以实现。