我的前端之路 ---- 高效编码

前端开发主要用到的就是html、css和javascript。针对不同类型，我们有不同的编写方式。

HTML

首先我们要保证我们的HTML代码是符合标准的，这个标准是指W3C的最新标准。

• 使用W3C规定的标准的HTML代码能保证浏览器正确的渲染我们的页面。虽然各个浏览器和客户端都会有一些自带的纠错能力，能使得页面正常显示。但是我们很难保证所有的浏览器和客户端都能兼容不符合标准的代码。为了避免不必要的麻烦。我们还是使用标准的代码更好一点。

• 编写标准的HTML代码还能使网页更容易被搜索引擎所识别，提高网站的搜索排名。我们都希望在百度的时候，我们的网站能排在首页第一的位置上，这样才能保证我们网站的用户访问量。良好的页面结构能够使得各搜索引擎准确的理解网站的内容。更容易读懂页面的内容，提高在搜索引擎中的排名。

• 更好的易用性。我们的用户是所有人，这其中包括一些残障人士，这类人群是通过一些辅助设备来完成对信息的获取。编写符合规范和标准的代码可以使得这些辅助设备更加容易地识别网站内容。

• 维护性好。作为开发者，我们不但要为用户考虑，同时也要为同行、为自己考虑。W3C标准是开发人员所共同认同并且需要遵循的标准。相信我们都不愿意去维护一个代码结构混乱的网页。

  这里有一些常用的方式：简化代码、抛弃不标准的标签和属性、样式结构相分离、多使用最新标准新增标签和属性、HTML语义化等。

CSS

html代码是主要表达页面语义的。css则是使得页面外观更加美观，并且变得生动有趣起来。

• css代码有三种定义的方式：可以定义在元素的 style 属性里面；可以定义在页面的 head 标签中，使用<style>...</style>包裹起来；还可以定义在单独的css文件中。推荐第三种定义方式。可见，css代码具有很大的灵活性。如果我们不遵循一定的规范的话，就会使得css 混乱不堪和难以维护。

• 同样的样式，在不同的浏览器中展示的效果是不一样的。我们在编写css 代码的时候需要使用 css reset。这部分的代码是用来重置元素的默认样式的。使页面在不同的浏览器中显示相同的效果。

• 合理利用CSS权重。这里关于CSS权重有一个规则是：ID > 类 | 伪类 | 属性选择 > 标签类型 | 伪对象 > 通配符。在css中尽量不要使用 id 选择器，合理使用这个规则可是使我们编写更少行的代码，这样变相地提高了 css 的可维护性。

• 页面尺寸的统一性。主要有 em rem % px vh vw 这些可选方案。针对不同的使用场景合理的选择使用。

还有一些方式，比如减少代码量、使用高效的css选择器、排序等优化方式 能使我们的代码可维护性更强。

javascript

前端开发的核心其实就是javascript开发。不管是什么语言，我们首先需要具备的基本素质就是养成良好的变成习惯。

关于javascript 它是一种非常好的变成语言。下面介绍一些关于如何高效利用javascript进行开发的一些好习惯。

• 我们都知道javascript是一门弱类型的语言。限制比较松散，所以我们可以更高灵活、高效地编写javascript代码。所以我们需要更加严格地遵守规则规范。首先我们尽量避免定义全局的一些变量或者函数。因为代码运行在相同的作用域里面 彼此间或多或少都会有一定的影响。这里介绍两种方式。一种就是把你写的方法用（）包裹起来，形成封闭的作用域；另一种是在定义之前使用 var 关键字。ES6中的let 和const 关键字 很好的规避了有关全局变量“污染”的问题。

• 使用严格编码格式。很简单 在代码中添加use strict即可。

• 事件的处理最好能和我们的业务逻辑分开来写。

• 配置相关的逻辑或者数据要单独写在一起。

• 页面逻辑复杂的情况下，尽量使用模板来做。

• MVC 模式。这个不用多说什么，现在主流框架都是基于或者就是MVC的开发模式。我们在开发过程中尽量使用这个模式。

• javascript模块化。模块化开发，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。
  模块化开发的4点好处：
  　　1 避免变量污染，命名冲突
  　　2 提高代码复用率
  　　3 提高维护性
  　　4 依赖关系的管理

• 提升代码运行速度。我们都知道，任何问题都不会有且只有一种解决方式。我们要做的就是找出这些解决方式中的最优解。

• 尽量使用数据驱动，减少dom操作。可以大大提升页面性能。

结语

今天脑子有点晕乎乎的，暂时就写这么多吧。如果你对前端感兴趣，多多研究一下javascript语言，这是一门非常有意思的语言。