前端智橙规范

前端规范

通用

项目[新闻、电商、惠民服务员等]的sass文件中
1. common.scss[必须] 组件
2. default.scss[必须] 通用基本样式或者配置
3. index.scss[必须] 项目scss集成

组件[tabs,iscroll,layer等]
1. 通用的common
2. 项目级的common

项目

命名约定

样式名用中划线连接命名 xx-xxx
ID用下划线连接命名 xx_xxx
新建项目示例：新闻项目命名news，电商项目命名mall
1. js文件夹：示例app/news app/mall
2. sass文件夹：示例scss/news app/news

页面配置

uiConfig:{
    pageContainerId:'p_news_list', // 页面容器id
    contentId:'news_list_content', // 页面内容器id
    pageUrl:'newsList' // 一定要和当前页面路由保持一致
}
className:{
    list:'news-list-list' // 页面用到的样式，用于事件处理
}
pageConfig:{
    code: 'p_news_list', // 唯一标示 和页面容器id保持一致
    effect: 'none', // 无效果 none，双向效果bothway，向前效果forward
    module: projectConfig.pageModule.news // 具体看config的pageModule配置
    isRefresh:false, // 是否刷新当前页面，默认不刷新
    refreshPage:['p_news_list'] // 刷新指定页面，默认没有
}

事件操作

ID

1. id命名
   唯一：项目名+页面名称+具体用途名称（示例 news_list_tabs）
2. 操作

$('#news_list_tabs').on('click',function(){
    // 业务处理
})

样式

1. 样式命名
   唯一：项目名+页面名称+具体用途名称（示例 news_list_item）
   不唯一：news-item
2. 操作

$('.news_list_item').on('click',function(){
    // 业务处理
})
$('#page-newsList .news-item').on('click',function(){
    // 业务处理
})
$('#page-newsList').on('click','.news-item',function(){
    // 业务处理
})

组件的初始化

如果是样式，一定要和当前页面的容器id关联起来，达到唯一
1. id命名
唯一：项目名+页面名称+具体用途名称（示例 news_list_scroll-container）
2. 操作

new IScroll('#news_list_scroll-container',{});
new IScroll('#page-newsList .scroll-container',{});