您现在的位置是：首页 > cms教程 > shopxo教程shopxo教程

shopxo前端开发规范

阿荡2025-07-24shopxo教程已有人查阅

导读table采用4个空格标签层级对齐所有取名使用英文、请勿使用拼音class/id及属性自定义命名使用小写、多个单词使用横杠区分( - )、见名取意

基础
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>