Web前端开发规范

最新推荐文章于 2021-07-27 18:22:45 发布

qzo_smile

最新推荐文章于 2021-07-27 18:22:45 发布

阅读量249

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_43148113/article/details/104519989

版权

前端专栏收录该内容

6 篇文章

订阅专栏

Web前端开发规范

一、规范目的
为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后可以更改此文档.

二、文件名规范
文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。

1、HTML的命名原则
引文件统一使用index.htm index.html index.asp文件名（小写）
各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。
例如：
关于我们 - aboutus
信息反馈 - feedback
产品 - product

如果栏目名称多而复杂并不好以英文单词命名，则统一使用该栏目名称拼音或拼音的首字母表示；

2、图片的命名原则
图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质
例如：广告、标志、菜单、按钮等等。
放置在页面顶部的广告、装饰图案等长方形的图片取名： banner
标志性的图片取名为： logo
按钮图片我们取名为 btn
在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu
装饰用的照片我们取名： pic
不带链接表示标题的图片我们取名： title
鼠标感应效果图片命名规范为"图片名+_+on/off"。
例如：banner_sohu.gif，menu_aboutus.gif，title_news.gif ，logo_police.gif ，pic_people.jpg，menu1_on.gif， menu1_off.gif

3、javascript的命名原则
javascript的命名以性质\描述\简称英语翻译取单一单词命名
例如：广告条的javascript文件名为ad.js 弹出窗口的javascript文件名为 pop.js

三、HTML书写规范

1、head区代码规范，必须加入的标签
网站简介
例如：<meta name="description" content="这里是网站描述">
搜索关键字
例如：<meta name="keywords" content="网站关键字，关键字">
网页的css规范
例如：<link href="../css/style.css" rel="stylesheet" type="text/css">
网页的js规范
例如：<script type="text/javascript" src="js/test.js"></script>
网页标题
例如：<title>标题</title>

2、body区的代码规范：
为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用
来人工干预分段。
在不同的功能区使用相应的标签，避免重复使用div这种情况，比如导航栏使用nav标签，底部使用footer标签。这样做有助于网页的seo优化，同时也可以让你的html代码变得更加优雅。
每个页面只能有一个H1标签，H2-6随意
不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。
不要在网页中连续出现多于一个的，也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。
排版中我们经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，一般情况下，请不要省略 </p> 结束标记。

3、Alt 和 Title
· 提示性语言标签，请注意它们之间的区别。对目标进行一定的注释说明。
alt 用来给图片来提示的。Title用来给链接文字或普通文字提示的。使用请添加注释说明

四、CSS书写规范

1、基本原则：
样式为设计师自定义的新 CSS 样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例：“ .shadow ”文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例：“ .no12 ” 、“ .no12-24 ”

2、注意事项：
ID和class的命名：ID和class(类)名使用可以反应元素目的和用途的名称，或其他通用名称。使用具体且反映元素目的的名称，这些是最容易理解的，而且发生变化的可能性最小。
通用名称只是多个元素的备用名，他们兄弟元素之间是一样的，没有特别意义。
ID命名要注意明确性及唯一性；class命名要注意通用性及复用性。
合理的避免使用ID：ID不应该被应用于样式。因为ID的样式不能被复用并且每个页面中你只能使用一次ID。只有为了确定网页或整个站点中的唯一有效位置时才使用ID。
尽可能的精确：很多前端开发人员写选择器链的时候不使用直接子选择器，导致疼痛的设计问题并且有时候可能会很耗性能。
如果不是需要匹配到DOM末端的选择器，应该使用直接子选择器。
单位：省略“0”值后面的单位。不要在0值后面使用单位，除非有值。同时在有可能的情况下使用3个字符的十六进制表示法，例如颜色单位。
声明顺序：为了保证更好的可读性和可扫描性，样式声明应该首先声明结构性属性：1.display；2.position.left.top.right等；3:overflow,float.clear等；4.margin.padding; 其次声明表现性属性：1.background,border;2.font.text;
Css引用：属性选择器或属性值用双引号（“”），而不是单引号（“）括起来。URI值（url()）不要使用引号。

五、JavaScript书写规范

1、基本原则
变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun; jQuery变量要求首字符为’_’, 其他与原生JavaScript 规则相同, 如: _iTaoLun; 另, 要求变量集中声明, 避免全局变量.
类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;
函数命名: 首字母小写驼峰式命名. 如iTaoLun();
命名语义化, 尽可能利用英文单词或其缩写;
尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;
代码结构明了, 加适量注释. 提高函数重用率;
注重与html分离, 减小reflow, 注重性能
具体细节遵照JavaScript Standard Style开发 https://standardjs.com/readme-zhcn.html

六、vue项目代码风格建议

1、基本原则（必需的）
组件名称使用驼峰式(首字母大写)命名，根据组件性质意图等语义化命名，应该为多个单词组成。
例如： <List></List> ==> <ProductList></ProductList>
prop定义应该至少声明格式
例如：

props: {  pageNum } ==> props: { pageNum : Number } ==>  props: { pageNum: {
      type: Number,required: true, default: 1,validator: function(){} } }

v-for需要key的配合
v-if和v-for不可用于同一元素，如需隐藏，可使用父元素v-if控制
<style>标签需要scoped属性

2、建议原则（强烈推荐）
单文件组件组件的文件名建议使用大驼峰写法或者横线-连接。
展示类组件（无逻辑，无状态组件）建议以某个特定的前缀开头。
例如：<ChapterList /> ==><TemplateChapterList />
只在某一个父组件下使用的子组件，建议使用父组件名为前缀。
例如：<ToolList /> <ToolListButton />
引入组件时，建议使用大驼峰格式
例如： import MyCompontent from '...'
使用单标签组件时，建议使用大驼峰格式。<MyCompontent /> 使用双标签时，建议使用中划线 <my-compontent></my-compontent>
定义props时，建议使用驼峰写法
例如：props: { pageNum : Number }
复杂的表达式写入computed
例如：{{a === 1 ? '1' : a === 2 ? '2' : '3'}} ==> page: function () {this.a ... return }
组件实例的选项顺序 name: ‘’ ,mixins: [], // 混入 components: {}, // 组件 model: {}, props: {}, data () { return {} }, // 数据 created () {}, // 创建周期 mounted () {}, // dom挂载周期 computed: {}, // 计算属性 watch: {}, // 监听器 methods: {}, // 方法 filters: {}, // 过滤 directives: {}, // 指令 destroyed () {} // 实例销毁周期