前端开发规范
创建于 2023-06-02 / 最近更新于 2023-06-02 /
1668
字体:
[默认]
[大]
[更大]
基础
- table采用4个空格
- 标签层级对齐
- 所有取名使用英文、请勿使用拼音
html
- class/id及属性自定义命名使用小写、多个单词使用横杠区分( - )、见名取意
- form name命名使用小写、多个单词使用下划线区分( _ )、单标签闭合前面使用空格分开
- 属性之间使用空格分开、属性值使用双引号包裹
- 不同业务写好注释合理换行、避免变成一大坨
- 列子如下:
<div class="am-text-center goods-info" data-goods-id="10" data-goods-title="商品名称">
<p class="goods-title">商品名称</p>
<p class="goods-price">¥100</p>
</div>
<form>
<input type="text" name="name" value="" />
<input type="text" name="goods_title" value="" />
</form>
css
- 样式写在对应css文件中,标签选择器及多级选择器使用空格分开
- 选择器结尾使用空格花括号换行中
- 样式冒号与样式值使用空格分开
- 列子如下:
.hello .sub {
color: #f00;
font-size: 20px;
}
js
- js写在对应js文件中,标签选择器及多级选择器使用空格分开
- 选择器结尾直接换行再花括号
- 方法命名单词首字母大写、参数默认值和多个参数使用空格分开
- 变量名称小写、多个单词下划线区分( _ )、变量与等于左右使用一个空格分开
- 列子如下:
// 选择器
$('.hello .sub').on('click', function()
{
console.log(1)
});
/**
* 方法名称
* @author Devil
* @version 1.0.0
* @date 2020-09-02
* @desc 方法的详细描述或使用方式
* @param {[string]} name [名称]
* @param {[int]} age [年龄]
* @param {[string]} hello_world [测试字符串]
*/
function HelloWorld(name, age = 0, hello_world = '默认值')
{
// 商品价格
var goods_price = 100;
// 商品名称
var goods_title = '商品名称';
// 商品编码
var code = 200;
console.log(name, age, hello_world);
// 循环测试
var data = [100, 200, 300];
for(var i in data)
{
console.log(1)
}
}
注释
- 注释写在上方、//注释使用空格分开、闭合注释内容头尾使用空格分开
- 列子如下:
// 注释信息
var name = 'devil';
/* 注释信息 */
.hello .sub {
}
<!-- 注释信息 -->
<div>
<p>hello world</p>
<!-- 测试模板引擎写法、注释信息 -->
{{if $age > 18}}
<p>成年人</p>
{{else /}}
</p>未成年人</p>
{{/if}}
</div>
4 人点赞过