由一段代码谈前端js优化和编码规范

这段代码是撸主刚毕业那会写的,主要是实现一个左侧的导航条的折叠功能。当时实现的比较简陋,每次在导航条增加新的项目的时候,都要手动去修改js代码中写死的索引。。。确实是比较恼火的,后来就修改了一下,,能够自动的查找索引了,但是写的代码很不规范,前几天看到这段代码的时候,简直要吐血。。。所以就简单优化了一下

1.情景描述:

html代码大致就是如下所示:

>>>>>>>>>>>>>>>>

我要做的工作就是使用js或者说jq让我点击每个a标签的时候,能够折叠当前a标签到下一个a标签之间的li标签元素。

2.代码解析

之前写代码如下:

$(= $(this);//获取a标签之后的所有元素$li_elem = $me.nextAll();//定义一个数组把两个a标签之间的对象加入到新数组中wolfArray = []for (var i=0;i<$li_elem.length;i++) {var arrayTagName = $li_elem.get(i).tagName;if (arrayTagName == ‘LI’) {wolfArray.push($li_elem);}else {break;}}//判断标签是否含有style属性,这个时候会有一个bug就是判断会作用在所有的li元素上var display = $li_elem.attr(‘style’);if (display == ‘display: none’) {$li_elem.removeAttrs(‘style’);}else {$li_elem.slice(0, wolfArray.length).slideToggle();}});

由上面的代码,可以看出我的意图是想获取当前元素之后的所有同级元素然后通过循环来获取夹在两个a标签之间的li元素,然后通过判断是否含有style属性来控制事件触发之后是否折叠。

这段代码主要问题:

之后我就对这些代码就行了一些优化,优化后的代码如下:

$($li_elem = $(this).nextAll();var wolfArray = [],liEleLength=0;//在这里不用每次循环都去计算$li_elem的长度var liEleLength = $li_elem.length;for (var i=0;i<liEleLength;i++) {var arrayTagName = $li_elem.get(i).tagName;if (arrayTagName == ‘LI’) {wolfArray.push($li_elem[i]);}else {break;}}//这里使用了获取的wolfArry对象来判断,而不会作用在全部的li元素上var display = $(wolfArray).attr(‘style’);if (display == ‘display: none’) {$(wolfArray).removeAttrs(‘style’);}else {$(wolfArray).slice(0, wolfArray.length).slideToggle();}});

而只有在充满了艰辛的人生旅途中,

由一段代码谈前端js优化和编码规范

相关文章:

你感兴趣的文章:

标签云: