web前端开发规范项目流程总结

Posted 2021-06-07 野猪佩奇007

web前端开发规范

web前端开发规范的意义
1、提高团队的协作能力
2、提高代码的复用利用率
3、可以写出质量更高，效率更好的代码
4、为后期维护提供更好的支持

规范

1、命名规则
2、文件存放位置规范
3、css书写规范
4、html代码书写规范
5、javascript书写规范
6、图片规范
7、注释规范
8、兼容性规范
9、开发测试约定及实用工具规范
公司统一要求规范

要求
1、熟练使用前端开发工具
2、代码规范
3、目录结构规范
4、切图与原型效果一致
5、命名页面方法命名统一英文规范
6、代码注释
责任
禁止：
1、禁止与客户私聊微信或其他聊天工具沟通项目问题、一切都放到沟通群里面沟通
2、禁止与客户沟通除项目以外公司方面的事情
3、禁止谈论工资情况
4、禁止传播不满情绪，有问题向直属上级反馈
5、除负责人授权外禁止技术与业务沟通报项目价格与工期
…

项目流程制度
UI效果图确认之后准备开发工作
第一步：
项目负责人与开发人员找产品经理了解项目需求（需彻底熟悉利用2天时间确定相关需求）

第二步：
项目负责人分配后台与前台开发工作并制定工期计划

第三步：
技术对照产品提供的原型与客户索要第三方账户并协助申请用作开发使用（提前申请账号）

第四步：
技术开发完之后填充正规数据后自己内测三遍以上没问题再交由负责人把关，负责人把关没问题交由产品与业务内测

第五步：
内部测试没有发现问题交由客户测试，测试反馈细节或bug问题当天解决

第六步：
功能全部开发完APP上架应用市场

技巧
1、客户提的问题、体验效果超出技术难度范围可以给客户绕个弯讲利弊关系做简单的功能，最终目的是要的是简单实用效率高；
2、要让客户知道我们对您的项目非常重视，想办法沟通最终目的是功能做得完美，开发效率高
3、遇到蛮不讲理客户，胡言乱语客户不用与之吵闹，直接反馈上面来处理；

APP内测发包规范
1、发内测包之前需是经过自己内测三遍后；
2、发内测包到项目内部群用二维码形式带LOGO图标；
3、发内测包需有（LOGO图标、起始页、轮播图、正规内测数据）；
4、每个内测包都要带自动更新功能；
5、发内测包需提供测试账号密码信息；
6、每个新项目都要单独新建一个文件夹用来整理所有关于本项目的文件。

1、html 的命名规则

1、文件名称命名规则
统一用小写英文字母、数字、和下划线组合，不得包含汉字（转义问题）空格和特殊字符。
方便理解 方便查找
2、索引文件命名原则 和 各子页面命名原则
要么用翻译的英文名称，要么用拼音命名 但注意不要用英语拼音混用

2、图片的命名规则

常规命名：
放置在页面顶部的广告、装饰图案等长方形的图片取名：banner
标志性的图片取名为：logo
在页面上位置不固定并且带有连接的小图片一般取名为button
在页面上一个位置连续出现，性质相同的连接栏目的图片一般取名为：menu
装饰用的照片一般取名;pic
不带连接表示标题的图片一般取名：title

3、脚本文件的命名规则

一般使用脚本功能的英文小写缩写命名：
实际模块：
例如：
广告条的JavaScript文件名为ad.js
弹出窗口的JavaScript文件名为pop.js
共用模块：
js文件名;英文命名，后缀js，共用common,js
外部资源：
jQuery.min.js jquery.date.js

4、文件存放位置规范

文件夹说明：
images存放图片文件‘
media存放多媒体文件
script存放JavaScript脚本
css存放css文件

5、css的3种基本类型

css
css指层叠样式表
样式通常存储在样式表中
把样式添加到html中，是为了解决内容表现分离的问题
外部样式表可以极大的提高工作效率
外部样式表通常存储在css文件中
多个样式定义可层叠为一
6、class与ID的使用规范

区别：
ID在页面中有且只能有一个。所以使用ID表示的css样式只能表示一个元素的样式
class在一个页面中可以有多个，也就是说定义一个css样式后，可以有多个元素引用这个class
书写方式：
id的书写样式：#title{font-size:18px;color:#333;}
class的书写方式：.title{font-size:18px;color:#333;}

命名注意：
1、大的框架比如说header/footer/wrapper/left/right之类的由设计框架之人统一命名。
其他样式名称由小写英文&数字&_来命名，避免使用中文拼音，尽量使用简易的单词组合；
总之，命名要语义化，简明化。
7、css的命名规范
意义：
规范的命名有助于提升团队开发效率
规范的命名有助于后期产品的维护
规范的命名有助于后期的二次开发

8、head区域代码规范
必须加入的标签：
搜索时候使用的关键字：

  <meta name="keywords"（关键字必须这么写） content="xxxx,xxxx,xxxx,xxxx"（里面填写搜索关键字）>

css

 <link href=".../css/style.css" rel="stylesheet" type="text/css"></link>

网页显示字符集：

简体中文： 
<meta http-equiv="content" content="text/html;charset=gb2312"/> 
繁体中文： 
<meta http-equiv="content" content="text/html;charset=utf-8"> 
英语： 
<meta http-equiv="content" content="text/html;charset=utf-8"> 

网页标题：

<title> 我是一个标题</title> 
用来防止别人在框架里调用你的页面
<meta http-equiv="window-target" content="_top">
自动跳转 //例如注册后跳转
<meta http-equiv="Refresh" content="5" url=http://www.baidu.com">
所有的JavaScript的调用尽量采取外部调用

9、字体规范

在设定字体样式时对于文字字号样式和行间距应必须使用css样式表。
禁止在页面中出现<font size=?>标记
字体大小：
在网页中应首选使用宋体。英文和数字首选使用verdana和Arial两种字体。
一般使用中文宋体的9pt和11pt或者12px和14.7px这是经过优化的字号，黑体字或者宋体字加粗时，
一般选用11pt和14.7的字号比较合适。
为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用来人工干预分段
注：不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。 请不要在网页中国连续出现多余一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应尽量使用text-indent，pandding,margin，hspace,vspace以及透明的GIF图片来实现。
行间距：
行距建议用百分比来定义，常用的两个行距值时line-height：120%/150%
首行缩进：
排版中经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义p{text-indent:2em;}然后给每一段加上一个<p> 标记，注意，一般情况下，请不要省略</p>结束标记。

10、连接和表格使用规范

链接：
1、网站中链接路径全部采用相对路径
2、一般链接到某一目录下的缺省文件的连接路径不必写全名
例如：<a href="aboutus/index.html">而应该这样：<a href="aboutus/">
3、在浏览器里，当我们点击空连接时，他会自动将当前页面重置到首端，从而影响用户正常的阅读内容，我们用代码
“JavaScript：void(null)”代替原来的“#”标记
表格：
1、尽量避免表格嵌套过多
后果会对浏览器加载延长时间，带来不友好的用户体验
2、在写<table>互相嵌套时，严格按照的规范，对于单独的一个<table>来说，

<table><tr>对齐，<td>缩进两个半角空格， 
<td>中如果还有嵌套的表格,<table>也缩进两个半角空格。

如果结束标记应该与处于同一行，不要换行。

11、嵌套Alt和Title

相同点：
提示性语言标签
不同点：

alt：一般是对图片进行提示描述
title：一般对文字标签进行描述

实例：

 <p title="给链接文字提示"> 文字</p>
<a href="#" title="给链接文字提示">文字</a>
<img src="图片.gif" alt="给图片提示">

12、JavaScript规范

书写：
书写过程中,每行代码结束必须有分号;
变量命名格式
变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun; jQuery变量要求首字符为’_’, 其他与原生JavaScript规则相同, 如: _iTaoLun; 另,要求变量集中声明,避免全局变量.
函数命名:
首字母小写驼峰式命名. 如iTaoLun();
JavaScript文件
JavaScript程序应独立保存在后缀名为.js的文件中。应尽量减少在HTML 中的JavaScript代码，因为存在与HTML中的JavaScript代码会明显增加文件大小，且不能对其进行缓存和压缩。
filename.js或JavaScript的代码应尽量放到body的后面。 这样可以减少因为载入脚本而造成其他页面内容载入也被延迟的问题。

缩进
缩进的单位为四个空格。避免使用Tab键来缩进。 因为始终没有个统一的Tab长短标准。虽然使用空格会增加文件的大小， 但在局域网中几乎可以忽略，且在最小化过程中也可被消除掉。

函数声明
所有的函数在使用前进行声明。内函数的声明跟在var语句的后面. 这样可以帮助判断哪些变量是在函数范围内的。

变量声明
所有的变量必须在使用前通过var进行声明。JavaScript并不强制必须这么做， 但这么做可以让程序易于阅读，且也容易发现那些没声明的变量(它们会被编译成全局变量)。 将var语句放在函数的首部。最好把每个变量的声明语句单独放到一行，并加上注释说明。
尽量减少全局变量的使用。不要让局部变量覆盖全局变量。
{} 和[]
使用{}代替new　Object()。使用[]代替new　Array()。这样便于书写且能提高一点执行效率。
当成员名是一组有序的数字时使用数组来保存数据。当成员名是无规律的字符串或其他时使用对象来保存数据。

1.event.srcElement问题 //找到触发事件的源对象
问题说明：I.E.下，even对象有srcElement属性，但是没有target属性； Firefox下，even对象有target属性，但是没有srcElement属性。
解决方法：使用 var obj=event.target||window.event.srcElement;

2.parentElement（父元素）问题
firefox与I.E.的父元素(parentElement)的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法: 因为firefox与I.E.都支持DOM,因此使用obj.parentNode是不错选择.

13、图片的使用规范

存放位置
所有页面元素类图片均放入images文件夹, 测试用图片放于img/demoimg文件夹
格式
图片格式仅限于gif || png || jpg;
命名
命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;

性能
运用css sprite技术集中小的背景图或图标, 减小页面http请求,但注意,请务必在对应的spritepsd源图中划参考线, 并保存至img/images目录下.
CSSSprites
在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

这当中用到了CSS Sprites切图技术。
CSS Sprites其实就是把网页中一些图标整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
优点：减少网页http请求，提高页面性能，降低服务器负载；文件命名减少麻烦。
缺点：定位繁琐，布局固定，降低网页弹性。

Css Sprite使用方法：
1、将用到的背景图片压缩为zip格式的压缩包
2、用Css图片拼合生成器将其拼合成一张图片，然后下载该图片
3、拼合完成后会生成相应的Css规则，该文件定位了每个图片的位置及图片的宽度和高度
4、在Css样式中定位背景图片，例如：
例子：

ul.share li{float:left;}  
ul.share li a{display:block;width:25px;height:25px;text-indent:-9999px;}  
a.renren{background:url(../images/share.gif) 0 0 no-repeat;}  
a.kaixin{background:url(../images/share.gif) -25px 0 no-repeat;}  
a.sina{background:url(../images/share.gif) -50px 0 no-repeat;}  
a.douban{background:url(../images/share.gif) -75px 0 no-repeat;}  
a.googleBM{background:url(../images/share.gif) -100px 0 no-repeat;}  
<ul class="share">  
<li>分享到：</li>  
<li><a class="renren" href="/cuiying_2007/blog/ " title="">人人网</a></li>  
<li><a class="kaixin" href="/cuiying_2007/blog/ " title="">开心网</a></li>  
<li><a class="sina" href="/cuiying_2007/blog/ " title="">新浪微博</a></li>  
<li><a class="douban" href="/cuiying_2007/blog/ " title="">豆瓣</a></li>  
<li><a class="googleBM" href="/cuiying_2007/blog/ " title="">谷歌书签</a></li>  
</ul>  

14、注释规范
html注释:
注释格式 , ‘–’只能在注释的始末位置,不可置入注释文字区域;
Css注释:
注释格式 /这是注释/;
javascript注释:
单行：单行注释使用//这是单行注释 ,
多行：多行注释使用 /* 这有多行注释 */;