js,jquery代码优化

我写了一个弹出层的功能

 1 //  index animate
 2 function autoanimate(){
 3     var nav = document.getElementsByClassName('nav')[0];
 4     var main = document.getElementsByClassName('main')[0];
 5     var main_list_createform = document.getElementsByClassName('main_list_createform')[0];
 6     var alertForm = document.getElementsByClassName('alertForm')[0];
 7     var alert_right_btn_close = document.getElementsByClassName('alert_right_btn_close')[0];
 8 
 9     main_list_createform.onclick = function(){
10         nav.style.transition = 'all 0.6s ease';
11         nav.style.opacity = '0';
12 
13         main.style.transition = 'all 0.6s ease';
14         main.style.transform = 'translate(0px, 100px)';
15         main.style.opacity = '0';
16 
17         alertForm.style.transition = 'all 0.6s ease';
18         alertForm.style.transform = 'scale(1, 1)';
19         alertForm.style.opacity = '1';
20         alertForm.style.zIndex = '999';
21     };
22 
23     alert_right_btn_close.onclick = function(){
24         nav.style.transition = 'all 0.6s ease';
25         nav.style.opacity = '1';
26 
27         main.style.transition = 'all 0.6s ease';
28         main.style.transform = 'translate(0px, 0px)';
29         main.style.opacity = '1';
30 
31         alertForm.style.transition = 'all 0.6s ease';
32         alertForm.style.transform = 'scale(0, 0)';
33         alertForm.style.opacity = '0';
34     };
35 }
36 autoanimate();

上面一个几个不好的地方，

　　[1] 声明多个变量时，单独声明的

　　[2] 给元素添加css样式的时候，添加的事行内样式

 

下面是我优化的代码

 1 /*  首页弹出层动画
 2  *  功能：[1]点击触发按钮时，将弹出层显示出来，并放大
 3  *        [2]点击触发按钮时，将导航菜单隐藏，取消时显示
 4  *        [3]点击触发按钮时，将主内容区下移80，并且透明度为0，取消显示
 5  */ 
 6 window.onload = function() {    //  加载后执行
 7     var alertForm = document.getElementsByClassName('alertForm')[0],    //  弹出层容器
 8         createForm = document.getElementsByClassName('main_list_createform')[0];    //  创建新表单容器
 9         closeAlertForm = alertForm.getElementsByClassName('alert_right_btn_close')[0],    //  取消弹出层按钮
10         nav = document.getElementsByClassName('nav')[0],    //  导航菜单
11         main = document.getElementsByClassName('main')[0];  //  主内容区
12 
13     //  点击触发时，将透明度调到1，大小增大两倍
14     createForm.onclick = function() {
15         alertForm.className = 'alertForm alertFormShow';
16         nav.className = 'nav navHide';
17         main.className = 'main mainHide';
18 
19     }
20 
21     //  点击取消时，将透明度调到0，大小调到0
22     closeAlertForm.onclick = function() {
23         alertForm.className = 'alertForm alertFormHide';
24         nav.className = 'nav';
25         main.className = 'main';
26     }
27 }

优化的方法：

　　[1] 在声明多个变量时，可以通过一个var来声明，多个变量之间可以用逗号隔开

　　[2] 在使用js给元素添加样式的时候，一般不要添加行内样式，因为这样会违背分离的原则，不好维护

　　[3] 注释一定要写清楚，这样自己更能理解代码的意思，而且以后其他人员来接管维护的时候，会更加容易一些

 

朋友建议：

　　[1] 绑定事件用obj.onclick = function(){},不太好，只能绑定一个事件，最好是用dom2级的事件，但是dom2级绑定事件是有兼容性的，

　　　  在ie下绑定事件，用attachEvent()

          在火狐，谷歌绑定事件，用addEventListener()

 

所以需要写一个兼容的函数来绑定事件

 1 /*  绑定事件函数
 2  *  obj:绑定事件的元素
 3  *  event:绑定的事件名称
 4  *  fn:绑定的函数名称
 5  */ 
 6 
 7 function addEvent(obj, event, fn) {
 8 
 9 　　if(obj.attachEvent) {    //    兼容IE
10 　　　　obj.attachEvent('on'+event, fn);
11 　　} else {    //    兼容google,firfox
12 　　　　obj.addEventListener(event, fn, false);
13 　　}
14 
15 }

下面绑定事件就直接使用addEvent()函数来绑定事件

代码如下

 1 /*  首页弹出层动画
 2  *  功能：[1]点击触发按钮时，将弹出层显示出来，并放大
 3  *        [2]点击触发按钮时，将导航菜单隐藏，取消时显示
 4  *        [3]点击触发按钮时，将主内容区下移80，并且透明度为0，取消显示
 5  */ 
 6 
 7 window.onload = function() {    //  加载后执行
 8     var alertForm = document.getElementsByClassName('alertForm')[0],    //  弹出层容器
 9         createForm = document.getElementsByClassName('main_list_createform')[0];    //  创建新表单容器
10         closeAlertForm = alertForm.getElementsByClassName('alert_right_btn_close')[0],    //  取消弹出层按钮
11         nav = document.getElementsByClassName('nav')[0],    //  导航菜单
12         main = document.getElementsByClassName('main')[0];  //  主内容区
13 
14     //  点击触发时，将透明度调到1，大小增大两倍
15     function showForm() {
16         alertForm.className = 'alertForm alertFormShow';
17         nav.className = 'nav navHide';
18         main.className = 'main mainHide';
19 
20     }
21 
22     //  点击取消时，将透明度调到0，大小调到0
23     function hideForm() {
24         alertForm.className = 'alertForm alertFormHide';
25         nav.className = 'nav';
26         main.className = 'main';
27     }
28 
29     //  绑定事件
30     addEvent(createForm, 'click', showForm);
31     addEvent(closeAlertForm, 'click', hideForm);
32 }

 

　　[2] 在给元素添加class的时候，使用className添加calss的时候，容易覆盖同名的class, 所以建议使用原class+newCalss的方式来添加新的class

1 //原添加class方式 
2     nav.className = 'nav navHide';
3 
4 //现在的方法
5     nav.className = nav.className + 'navHide';

这种方式也可以添加

 

然后我使用jquery重写了一下这个功能，因为jquery内置了很多不错的功能函数，所以代码显得比较小，且工作量也大大减少了

下面是jquery的代码

 1 /*  首页弹出层动画
 2  *  功能：[1]点击触发按钮时，将弹出层显示出来，并放大
 3  *        [2]点击触发按钮时，将导航菜单隐藏，取消时显示
 4  *        [3]点击触发按钮时，将主内容区下移80，并且透明度为0，取消显示
 5  */ 
 6 $(function() {
 7     //  点击触发时，将透明度调到1，大小增大两倍
 8     $('.main_list_createform').on('click', function() {
 9         $('.alertForm').removeClass('alertFormHide').addClass('alertFormShow');
10         $('.nav').addClass('navHide');
11         $('.main').addClass('mainHide');
12     });
13 
14     //  点击取消时，将透明度调到0，大小调到0
15     $('.alert_right_btn_close').on('click', function() {
16         $('.alertForm').removeClass('alertFormShow').addClass('alertFormHide');
17         $('.nav').removeClass('navHide');
18         $('.main').removeClass('mainHide');
19     });
20 });

代码是减少了很多，工作量也减少了，但是各位前端的伙伴们，要记得，多去学学原生会使你对代码的理解更深刻，让你写的代码更加有条理，效率更高

转载于:https://www.cnblogs.com/kPedestrian/p/4650613.html