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

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