前端规范

  1. 命名规则
  • 头 : header
  • 内容 : content/container
  • 尾部 : footer
  • 导航 : nav
  • 侧栏 : sidebar
  • 栏目 : column
  • 外围盒子控制整体布局 : wrapper
  • 左 右 中 : left / center / right
  • 登录条 : loginbar
  • 标志 : logo
  • 广告 : banner
  • 页面主题 : main
  • 热点 : hot
  • 新闻 : news
  • 下载 : download
  • 子导航 : subnav
  • 菜单 : menu
  • 子菜单 : submenu
  • 搜索 : search
  • 友情链接 : friendlink
  • 页脚 : footer
  • 版权 : copyright
  • 滚动 : scroll
  • 内容 : content
  • 标签页 : tab
  • 文章列表 : list
  • 提示信息 : msg
  • 小技巧 : tips
  • 栏目标题 : title
  • 加入 : joinus
  • 指南 : guild
  • 服务 : service
  • 注册 : regsiter
  • 状态 : status
  • 投票 : vote
  • 合作伙伴 : partner
  1. 注释的写法
1
2
3
/*Footer Start*/
内容区
/*Footer End*/
  1. id的命名

    3.1 页面结果

    • 容器 : container
    • 页头 : header
    • 内容 : content / container
    • 页面主体 : main
    • 页尾 : footer
    • 导航 : nav
    • 侧栏 : sidebar
    • 栏目 : column
    • 页面外围控制整体布局宽度 : wrapper
    • 左右中 : left / right / center

    3.2 导航

    • 导航 : nav
    • 主导航 : mainbav
    • 子导航 : subnav
    • 顶导航 : topnav
    • 边导航 : sidebar
    • 左导航 : leftsidebar
    • 右导航 : rightsidebar
    • 菜单 : menu
    • 子菜单 : submenu
    • 标题 : title
    • 摘要 : summary

    3.3 功能

    • 标志 : logo
    • 广告 : banner
    • 登陆 : login
    • 登录条 : loginbar
    • 注册 : regsiter
    • 搜索 : search
    • 功能区 : shop
    • 标题 : title
    • 加入 : joinus
    • 状态 : status
    • 按钮 : btn
    • 滚动 : scroll
    • 标签页 : tab
    • 文章列表 : list
    • 提示信息 : msg
    • 当前的 : current
    • 小技巧 : tips
    • 图标 : icon
    • 注释 : note
    • 指南 : guild
    • 服务 : service
    • 热点 : hot
    • 新闻 : news
    • 下载 : download
    • 投票 : vote
    • 合作伙伴 : partner
    • 友情链接 : link
    • 版权 : copyright
  2. css样式

    4.1 重置默认样式

    4.2 添加自定义全局样式

    4.3 抽取文件定义单页面全局样式

    4.3 样式定义规则 : 重定义 > 伪类 > 自定义 (便于阅读)

  3. javascript 书写规范

    5.1 书写过程 :每行代码结束结构统一(有无分号->有的话,每行代码都应该有-> eslint 设置规则,遵守即可)。防止代码冗余 | 与不小心造成与远程代码造成冲突

    5.2 库的引入 :根据项目需求,尽量的少引入。引入的时候,尽量使用按需引入,节省资源

    5.3 变量命名规则 :驼峰式命名法

    5.4 类命名 : 首字母大写, 驼峰式命名

    5.5 函数命名: 首字母小写驼峰式命名

    5.6 命名语义化, 尽可能利用英文单词或其缩写

    5.7 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() &; innerText

    5.8 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;

    5.9 代码结构明了, 加适量注释. 提高函数重用率

    5.10 注重 样式 结构 行为 相分离

  4. 图片规范

    6.1 所有页面元素类图片均放入img文件夹

    6.2 图片格式仅限于gif || png || jpg

    6.3 命名全部用小写英文字母 || 数字 || _ 的组合,其中不得包含汉字 || 空格 || 特殊字符;尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif

    6.4 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间

    6.5 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明)

    6.6 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下

  5. 注释规范

    7.1 html注释: 注释格式< !–这儿是注释–>, ‘–’只能在注释的始末位置,不可置入注释文字区域

    7.2 css注释: 注释格式 /*这儿是注释*/

    7.3 JavaScript注释, 单行注释使用’//这儿是单行注释’ ,多行注释使用 /* 这儿有多行注释 */

  6. 结束语

如果能够帮助到你,是小编最大的荣幸

当然 有 不好的地方 请大家帮忙指出 学习永无止境

小编一直认为 人外有人 天外有天 一起学习 共同进步

让我们共同加油吧!!!