代码规范之前端编写码规范

上一期阿牛ger与大家分享了Niushop开源商城系统model层类名代码规范命名，这期，我们看看Niushop单商户b2c V4前端编码命名规范：

 文件目录命名

采用小写+下划线方式，命名要精简，最好用一个单词

例：addon

JS文件命名

采用小写+下划线方式

例：common.js

CSS文件命名

采用小写+下划线方式

例：common.css

HTML文件命名

采用小写+下划线方式

例：index.html

HTML规范

1、缩进使用soft tab（4个空格）；

2、嵌套的节点应该缩进；

3、在属性上，使用双引号，不要使用单引号；

4、属性名全小写，用中划线做分隔符，例：data-name；

5、不要忽略可选的关闭标签，例：</li>和</body>

引用CSS，JS

根据HTML5规范, 通常在引入CSS和JS时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值，可以省略。

css要写在{block name="resources"}{/block}中

例：

{block name="resources"}

<link rel="stylesheet" href="login.css" />

{/block}

js要写在{block name="script"}{/block}中

例：

{block name="script"}

<script>

...

</script>

{/block}

注意：

1. 减少标签嵌套

在编写HTML代码时，需要尽量避免多余的父节点；

尽量遵循HTML标准和语义，任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

2. 代码分离

HTML、CSS、JS要最大化分离，一个功能对应一个JS、CSS文件，复杂功能除外，如果某个功能img、js比较多，那就单独建立一个文件夹。

每个功能页面中不能有太多内联样式。

阿牛ger说：在开发过程中，代码越简洁越好，讲解简单的代码和文件夹命名，方便查找，出现漏洞能第一时间找出相应代码解决！