前端实际开发中的命名规范(个人建议)

如果说计算机科学只存在两个难题:缓存失效和命名。那我觉得前端的命名占有一席之地。

让人难以理解的命名方式

  1. 单词拼写错误
  2. 中英文混用
  3. 以数字1-9或者以a-z命名
  4. 中文拼音命名
  5. 强制缩写

命名方法

  1. 每个单词之间用" - “或者”_"连接
  2. 小驼峰:除第一个单词之外,其他单词首字母大写
  3. 大驼峰:所有单词首字母大写

HTML+CSS命名规范

1.大致布局

  1. 外套 wrap ------------------用于最外层
  2. 头部 header ----------------用于头部
  3. 主要内容 main ------------用于主体内容(中部)
  4. 左侧 main-left -------------左侧布局
  5. 右侧 main-right -----------右侧布局
  6. 导航条 nav -----------------网页菜单导航条
  7. 内容 content ---------------用于网页中部主体
  8. 底部 footer -----------------用于底部
  9. 广告条banner--------------广告条,一般在顶部
  10. copyRight(版权)

2.命名
推荐用英文:不会就下载一个叫网易有道词典(个人觉得很好用)
命名规范就用单词拼接,一定要见名则意:
如:头部logo:headerwrap_logo

JavaScript命名规范

  1. 函数和变量:小驼峰命名法(handleLogin)
  2. 类(es6)、构造函数:大驼峰命名法(PerSon)
  3. 常量:大写+下划线(PRICE_MAX)
  4. 私有变量:下划线开头+小驼峰(_this)
  5. 获取值:get开头+小驼峰(getUser)
  6. 设置值:set开头+小驼峰(setUser)

目录,文件命名规范

  1. 首页-------------------------------index,index.html
  2. 搜索页面-------------------------search,search.html
  3. 产品列表-------------------------productList,productList.html
  4. 产品详细页面-------------------productDetail,productDetail.html
  5. 新闻列表-------------------------newslist,newslist.html
  6. 新闻详细页面-------------------newsdetail,newsdetail.html
  7. 评论列表-------------------------commentList,commentList.html
  8. 关于我们-------------------------about,about.html
    等等不一一说明(百度有很多这方面的内容,我觉得以上这些就行了)
发布了43 篇原创文章 · 获赞 3 · 访问量 1146

猜你喜欢

转载自blog.csdn.net/qq_45007419/article/details/103455134