如何通过8个技巧有效优化JavaScript代码？

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

1. 简化伪原创开头内容： 当修改一个组件而不需要改动其他组件时，就做到了组件的松耦合。 1. 将JS从CSS中抽离： 不要使用CSS表达式，如：`box{width:expression(document.body.offsetWidth + 'px');}` 2. 将CSS从JS中抽离：不要在JS中直接使用CSS样式。

一、松耦合

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

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

二、全局变量

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