文档章节

Web前端开发文件命名规范

manry_min
 manry_min
发布于 2017/08/06 21:39
字数 513
阅读 136
收藏 0

1.文件命名规则

1.1文件名称的命名规则

统一用小写的英文字母,数字和下划线的组合,不得包含汉字空格和特殊字符

原则: 1)方便理解,见名之意

​           2)方面查找

1.2索引文件的命名规则(首页面)

  • index.htm
  • index.html(常见的静态网页)
  • index.asp(VB)
  • index.aspx()
  • index.jsp(Java)
  • index.php(PHP)

1.3各个子页面的命名规则

  1. 统一用翻译的英文命名(推荐)
  2. 统一用拼音命名(拼音的简化也可)
  3. 如果文件名过长,企业要提前约定一份缩写的规范,如pro—product

    • [x] 注意:不要中英文混用

例如:

  • 首页—index
  • 产品列表—prolist产品详细页面—prodetail
  • 新闻列表—newslist新闻详细页面—newsdetail
  • 发展历史—history
  • 关于我们—aboutus
  • 联系我们—linkus,contactus
  • 信息反馈—feedback留言—leavewords

1.4图片命名规范

图片的名称分为头尾两部分,用下划线隔开,头部表示此图片的大类性质,例如广告,标志,菜单,按钮等

  • banner:放置在页面顶部的广告,装饰图案等长方形的图片
  • logo:标志性的图片
  • button:在页面上位置不固定,并且带有链接的小图片
  • menu:在页面中某一位置连续出现,性质相同的链接栏目的图片
  • pic:装饰用的图片

例子:

  • banner_sohu.gif, banner_sina.gif
  • menu_aboutus.gif,menu_job.gif
  • title_news.gif
  • logo_police.gif
  • pic_people.gif

1.5脚本文件和动态文本文件命名规则

脚本文件:一般使用脚本功能的英文小写缩写命名

  • 实际模块:例如广告条的javascript文件名为ad.js,弹出窗口的javascript文件名为pop.js
  • 公用模块:js文件命名:英文命名,后缀js。如common.js,basic.js
  • 外部资源:Jquery.min.js,Jquery.validate.js,Jquery.date.js

动态文件:以性质描述,可以有多个单词,用‘_’隔开,性质一般是该页面的概要(见名知意)。

范例:register_form.aspx,register_post.aspx,topic_lock.aspx。不同模块之间,可以使用不同的前缀来区分

本文转载自:

manry_min
粉丝 0
博文 7
码字总数 1652
作品 0
深圳
程序员
私信 提问
Web前端团队开发规范文档

为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感...

乐派电影
2014/04/11
172
0
【Web规范】前端开发规范细则(更新中...)

参考列表: 教你怎样对word文档进行排版(表要笑话我,排版是基础中的基础,不然乱七八糟的文档让别人乍看哦) W3C标准 关于团队合作的css命名规范 Web前端开发规范文档 Web前端开发规范手册...

呢喃的猫咪
2014/02/18
0
0
【原创】如何管理你的 Javascript 代码

今天不聊技术的问题,咱们来聊聊在前端开发中如何管理好自己的 Javascript 代码。首先,咱们先来说说一般都有哪些管理方式?我相信 、 对于前端开发者而言都不陌生,不错它们都是前端代码模块...

Mr.Zheng
2015/03/13
0
3
要想成为前端大神,那些你不得不知晓的web前端命名规范。

对于经验资深的前端er,在给web布局时,相信都会很注重标签和命名的规范。尤其是随着html5的普及发展,更是把web前端语义化推向一个新的台阶上。比如html5给我们新增的语义标签:header、nav...

web前端学习圈
2018/10/24
0
0
你不知道的h5

基于 Three.js 的超快的 3D 开发框架:Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 应用 3D 开发框架。它为普通的 Three.js 任务提供封装、使搭建环境、创建对象、添加物件...

掘金官方
2017/12/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
28分钟前
3
0
Spring系列教程六:AOP详细讲解

AOP 概述 什么是 AOP AOP:全称是 Aspect Oriented Programming 即:面向切面编程。 AOP技术是对OOP技术的一种延伸,AOP是面向纵向,OOP是面向横向。简单的说它就是把我们程序重复的代码抽取...

我叫小糖主
41分钟前
12
0
Qt编写数据可视化大屏界面电子看板9-曲线效果

一、前言 为了编写数据可视化大屏界面电子看板系统,为了能够兼容Qt4和嵌入式linux系统,尤其是那种主频很低的,但是老板又需要在这种硬件上(比如树莓派、香橙派、全志H3、imx6)展示这么华...

飞扬青云
今天
3
0
责任链模式

//这篇博客的博主真的不错,解析的都很清晰明了, https://blog.csdn.net/jason0539/article/details/45091639

南桥北木
今天
3
0
Flutter -------- dio网络请求

dio是Flutter中文网开源的一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等... 1.添加依赖# dependencies: dio: 2.1.x #...

切切歆语
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部