大前端-代码优化

如何将代码优化到优雅?

    什么是代码优化?就像一个舞蹈演员,在台上表演时,把每一个动作都做得十分优雅,给人一种美的感觉.作为一个程序员大大,我们每天的任务就是去写代码,改代码,调试代码.如何才能将代码写的优雅,则是一个需要关注的问题.

这就是今天我想与大家分享的一些东西,如何将代码优化到优雅,众所周知,w3c标准就是三层分离.我们优化代码时候,也需要按照这个原则来进行.

HTML部分

对于html部分代码的优化,我们首先要知道它在web标准中归属于哪一层.不用说,HTML属于结构层面.对于结构层面的东西,主要是由标签组成.那么如何将结构层面代码进行优化呢?

① 正确的使用标签, 什么地方用什么标签(明明就可以用一个p标签解决的问题,你非要使用span标签设样式来实现相同的效果).

② 正确的使用标签的嵌套(什么标签,该放在什么标签里边,我们要很清楚,如果标签嵌套错误,很显然,你就会发现你要的效果出不来,虽然你设置了样式, 然而就是不来)

③尽量少使用没有语义化的标签(没有语义化的标签,对seo不友好)

④HTML结构要清晰(以前我们为了是html结构清晰,我们会用一些头部类,尾部类等来达到这个效果.现在h5中新增的一些结构标签,就可以解决这些问题 ).

CSS部分

CSS在web标准中属于表现层,对于CSS部分代码的优化,我们需要注意以下几点:

①CSS代码简写(这里说的简写主要解决的问题是，网站代码冗余，去除不必要的空格等等。如果可以用一句表达的语言，就1不要多出几行代码，符合W3C标准).

②同属性提出(如果2个样式带有同样的属性，可以把同属性单独提出处理。例如A样式和B样式的字体颜色、大小、边框都一样，那么就可以考虑提出。)

③使用less或者sass等CSS预处理器(忘了it届哪位大佬曾经说过,在写代码时候起名字是it届有史以来的一大难题,less和sass可以直接进行结构嵌套,就减少了起名字带来的麻烦)

JS部分

JS作为web标准中的行为层,对于其的优化.我们需要注意以下几点:

  ① 对于多次使用的变量,进行缓存处理( 减少dom查询次数)

② 多次使用功能代码片段进行封装

    以上纯属个人观点,如果出现错误,请自行修改