软件工程 团队作业三

一编码规范

html编码规范:

代码风格

1、缩进与换行
使用 4 个空格做为一个缩进层级

2、命名
元素 id 必须保证页面唯一;

3、class 必须单词全字母小写,单词间用 - 分隔;

实例

<!-- good -->

<div class="sidebar"></div>

 

<!-- bad -->

<div class="left"></div>

 

4、同一页面,应避免使用相同的 name 与 id。

解释:

IE 浏览器会混淆元素的 id 和 name 属性, document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心。

一个比较好的实践是,为 id 和 name 使用不同的命名法。

5、用id、class 命名,在避免冲突并描述清楚的前提下尽可能短。

6、标签使用必须符合标签嵌套规则。

解释:

比如 div 不得置于 p 中,tbody 必须置于 table 中。

7、标签

标签名必须使用小写字母;
对于无需自闭合的标签,不允许自闭合;
允许省略的闭合标签,不允许省略闭合标签;
标签使用必须符合标签嵌套规则;
8、属性

属性名必须使用小写字母;
属性值必须用双引号包围;

通用部分

  1. 编码

开启浏览器的DNS预获取。

页面必须使用精简形式,明确指定字符编码;
HTML 文件使用UTF-8 编码;
页面必须包含 title 标签声明标题;

其它

2、引用静态资源的 URL 协议部分与页面相同,建议省略协议前缀

3、图片
禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src;

4、表单

有文本标题的控件必须使用 label 标签将其与其标题相关联;

5、         按钮

使用 button 元素时必须指明 type 属性值

6、禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src

 

CSS编码规范

一、CSS书写顺序

1.位置属性(position, top, right, z-index, display, float)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align)

4.背景(background, border)

5.其他(animation, transition)

 

、CSS书写规范
1.使用CSS缩写属性
CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。 

v

2.去掉小数点前的“0” 

3.简写命名

很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!

4.16进制颜色代码缩写

有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。

5连字符CSS选择器命名规范

1).长名称或词组可以使用中横线来为选择器命名。

2).不建议使用“_”下划线来命名CSS选择器,为什么呢?

输入的时候少按一个shift键; 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的) 能良好区分JavaScript变量命名(JS变量命名是用“_”) 

6.不要随意使用id

id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。

部分同html

  • 空格的使用
    选择器与 { 之前(必须)要有空格;
    属性名的 : 后(必须)要有空格;
    属性名的 : 前(禁止)加空格。
  • 换行
    多选择器规则之间(必须)换行
  • 其它
    当一个rule包含多个selector时,每个选择器声明必须独占一行

js编码规范

(1).字符串过长截断

每行代码应小于80个字符。若代码较长应尽量换行,换行应选择在操作符和标点符号之后,最好是在分号“;”或逗号“,”之后。下一行代码相对上一行缩进4个空格。这样可以有效防止复制粘贴引起的代码缺失等错误并增强可读性。

按一定长度截断字符串,并使用+运算符进行连接。分隔字符串尽量按语义进行,如不要在一个完整的名词中间断开。特别的,对于HTML片段的拼接,通过缩进,保持和HTML相同的结构:

也可使用数组来进行拼接,相对+运算更容易调整缩进:

(2).三元运算符过长

三元运算符由3部分组成,因此其换行应当根据每个部分的长度不同,形成3种不同的情况:

不得出现以下情况:

(3).过长的逻辑条件组合

当因为较复杂的逻辑条件组合导致80个字符无法满足需求时,应当将每个条件独立一行,逻辑运算符放置在行首进行分隔,或将部分逻辑按逻辑组合进行分隔。最终将右括号)与左大括号{放在独立一行,保证与if内语句块能容易视觉辨识。如:

(4).过长的JSON和数组

如果对象属性较多导致每个属性一行占用空间过大,可以按语义或逻辑进行分组的组织,如:

通过5个一组的分组,将每一行控制在合理的范围内,并且按逻辑进行了切分。 对于项目较多的数组,也可以采用相同的方法,如:

  • 嵌入规则
    Javascript程序放在.js的文件中,需要调用的时候在页面中以<script src="filename.js">的形式包含进来。Javascript代码若不是该页面专用的,则避免在页面中直接编写Javascript代码。
  • 换行
    在以下位置必须使用换行:
    每个独立语句结束后;
    if、else、catch、finally、while等关键字前;
    运算符处换行时,运算符必须在新行的行首;
    对于因为单行长度超过限制时产生的换行,参考行长度中的策略进行分隔

java编码规范

部分同html 

二 数据库:

三 ER图:

四 用户功能流程图:

五 管理员功能流程图:

六 组内分工

  • 王成齐:
    • 数据表格 编写流程图
  • 王志超:
    • 代码规范及编码原则
  • 王叔文:
    • ‘编写ER图

七 组员得分

  • 王成齐:10
  • 王叔文:10
  • 王志超:10
posted @ 2017-06-01 14:30  1635095381  阅读(192)  评论(1编辑  收藏  举报