如何通过8个技巧提升JS代码优化效果？

本文共计4184个文字，预计阅读时间需要17分钟。

1. 轻量级合并+当修改一个组件而不需要修改其他组件时，就做到了轻量级合并+1. 将JS从CSS中抽离：不要使用CSS表达式+/ /不好的做法.box{width: expression(document.body.offsetWidth + 'px') + 2}+2. 将CSS从JS中抽离

一、松耦合

当修改一个组件而不需要更改其他组件时，就做到了松耦合

1、将JS从CSS中抽离：不要使用CSS表达式

//不好的做法 .box{width: expression(document.body.offsetWidth + 'px')}

2、将CSS从JS中抽离：通过JS修改CSS样式时，使用className或classList，不要逐条修改style样式

//不好的做法一 ele.style.color = 'red'; ele.style.left= '10px'; //不好的做法二 ele.style.cssText ='color:red;left:10px;'; .reveal{color:red;left:10px;} //好的做法一 ele.className += 'reveal'; //好的做法二 ele.classList.add('reveal');

3、将JS从HTML中抽离：从JS文件放入外置文件中

4、将HTML从JS中抽离：不要在innerHTML中拼接DOM结构，而是使用字符串模板，如handlerbars

二、全局变量

创建全局变量被认为是糟糕的实践，尤其在团队开发的大背景下更是问题多多。