前端开发规范--自用

https://www.runoob.com/w3cnote/front-end-standards.html 菜鸟文档
https://blog.csdn.net/qq_35715972/article/details/90515670 张miro的博客

文件和文件夹命名

  • 全部英文小写字母,可以使用中线
  • 文件(文件夹)名单词间隔用“-”隔开,不要采用大小写(因为windows路径不识别大小写)
  • 调用 /lib里面的文件需包含版本号,压缩文件需包含min关键词,其他插件则可不包含

CSS规范

1.1 CSS命名规范

  • 所有的命名用小写的英文单词
  • 不使用简单的方位词直接命名,如"left","bottom"
  • 不缩写单词,除非一看就明白的单词
  • 长名称或词组可以使用下划线 _ 作为连接符
  • 避免选择器嵌套层级过多,少于3级
  • 不要随意使用id,id应该按需使用,而不能滥用
  • 使用CSS缩写属性 ,比如padding:0 10px 5px 5px等等,这样精简代码同时又能提高用户的阅读体验。

2.2 CSS 书写规范

向"无ID,无层级,无标签"准则靠拢,可有效提高重用性,减小文件大小,提升渲染效率

2.3 CSS 注释格式

用来区分页面的注释,如
/********************产品中心*********************/
模块的注释,如
/*首页导航栏*/

2.4 CSS各属性的排列顺序:不做硬性要求

  • Positioning(定位,如position,top,z-index)
  • Box model(盒模型,如display,box-sizing,width,border)
  • Typographic(排版,如font,line-height,text-align)
  • Visual(视觉,如background,color,opacity)
  • Other(其他,如cursor)
    -由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型决定了组件的尺寸和位置,因此排在第二位。 其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。

2.6 CSS字体单位

  • px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的。
  • em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
  • rem也是相对长度单位,但相对的只是HTML根元素。
  • vw代表视窗(Viewport)的宽度为1%,如果视窗宽度为1000px,那么50vw = 500px
  • vh代表窗口高度的百分,如果视窗高度为800px,那么50vh = 400px
  • 公司项目使用时注意事项:现有项目都是使用px作为单位,现推荐使用rem,vw,vh作为单位

CSS注意事项

例如:

  • 基础组件css命名空间为 c-
  • 外层容器样式命名 c-文件名
  • 子元素样式命名 c-文件名-样式名
  • 条件样式命名 c-文件名--样式名

JS 规范

3.1 JS命名规范

3.1.1 JS 变量命名

  • 命名方法:小驼峰式命名
  • 命名规范:前缀应当是名词。(函数的名字前缀为动词,以此区分变量和函数)
  • 命名建议:尽量在变量名字中体现所属类型,如:length、count等表示数字类型;而包含name、title表示为字符串类型。
  • 变量简单直接, 不要带有逻辑和动作的意味

示例:

// 好的命名方式
var maxCount = 10;
var tableTitle = 'LoginTable';

// 不好的命名方式
var setCount = 10;
var getTitle = 'LoginTable';

3.1.2 JS 函数命名

  • 命名方法:小驼峰式命名法
  • 命名规范:前缀应当为动词
  • 命名建议:可使用常见动词约定
  • 所有绑定事件类的方法统一前缀 on 例如:onOpen、onMessage
  • 所有后端拉取数据的方法统一前缀 get 例如:getList、getStudentDetail、保- 存统一前缀save、更新统一前缀update、删除统一前缀delete
  • 所有内部私有方法统一前缀 _ 例如:_compareTime、_isStudent


    前端开发规范--自用_第1张图片
    image.png

3.1.3 JS 常量命名

  • 命名方法:名称全部大写
  • 命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词

示例

var MAX_COUNT = 10;
var URL = 'http://www.runoob.com';   

3.1.4 JS 文件命名

  • 使用短线(-)或句点(.)作为分隔符号,推荐使用句点,最好使用小写英文字符,不要使用其他符号和扩展字符,如 jQuery UI 1.9.0 的源文件可命名为"jquery-ui-1.9.0.js"

  • 使用 .js 扩展名,这个扩展名的兼容性最好。其实任何扩展名都可以,只要是 text 类型、编码正确即可

  • 用句点分隔表示名称中的从属关系,范围大的在前,如jQuery 的表单插件 Form既可以命名为jquery.form.js

3.2 js 注释格式

  • 使用多行注释,以/开头,/结尾

3.3 js 注意事项

书写格式

  • JS 换行缩进:采用tab(打散为4个空格)
  • 结束行需添加分号;

性能

  • 尽量选用局部变量而不是全局变量
  • 尽量使用链式写法
  • 尽量减少DOM调用
  • 将js脚本放到页面底部
  • 使用jquery的data来存取数据,减少对dom的操作
  • 使用on方法绑定事件,这是jquery的推荐使用
  • 选择器的选择:尽量不用标签选择器,能用ID选择器的就不用class选择器

4. HTML 规范

4.1 标签使用规范

  • 尽量减少标签层级

  • 双标签必须闭合,单标签用斜线闭合

  • HTML第一行统一使用HTML5标准

  • 一律统一标签结尾斜杠的书写形式:


    注意之间空格

  • 避免使用已过时标签,如:

标签默认默认格式:默认时文字

标签默认格式:xxx
注:target="_blank" 根据需求决定style、link、script可省略type属性,因为 text/css 和 text/javascript 分别是他们的默认值

4.2 HTML注释


content

4.3 注意事项

  • 手机端的自适应布局尽量采用弹性布局,而不是百分比

  • css文件都 置于头部

  • HTML换行缩进:采用 tab空格

  • 其他效果js统计代码 文件置于尾部

  • 手机端的页面都按750px来做,显示效果按375px

vue中对assets中的图片文件路径引用


基础组件示例

/**
 * 注意:
 * 自定义事件 一定要在顶部申明, 加上详细注释, 包括事件类型, 传递参数, 参数类型, 参数状态等
 */
const events = {
  CLICK: 'click'
}
 
/**
 * 注意:
 * 自定义组件 一定要在顶部申明, 加上详细注释, 包括事件类型, 传递参数, 参数类型, 参数状态等
 *
 * button组件
 * @module components/button
 * @desc 按钮
 * @param {String} [type=default] - 显示类型, 接收 default, primary, danger
 * @param {Boolean} [disbale=false] - 禁用
 * @param {String} [size=large] - 尺寸, 接收 normal, small, large
 *
 * @example
 * 
 */
const props = {
  disable: Boolean,
  size: {
    type: String,
    default: 'normal'
  },
  type: {
    type: String,
    default: 'default'
  }
}

书写细节

  • 块级作用域:let 取代 var。var命令存在变量提升效用,let命令没有这个问题。

  • 全局常量和线程安全: 在let和const之间,建议优先使用const,尤其是在全局环境,不应该设置变量,只应设置常量。

  • 字符串:静态字符串一律使用单引号或反引号,不使用双引号。动态字符串使用反引号。

  • 解构赋值:使用数组成员对变量赋值时,优先使用解构赋值。函数的参数如果是对象的成员,优先使用解构赋值。

  • 对象:单行定义的对象,最后一个成员不以逗号结尾。多行定义的对象,最后一个成员以逗号结尾。

  • 对象尽量静态化: 一旦定义,就不得随意添加新的属性。如果添加属性不可避免,要使用Object.assign方法。

  • 数组:使用扩展运算符(…)拷贝数组。使用 Array.from 方法,将类似数组的对象转为数组。

  • 函数:立即执行函数可以写成箭头函数的形式。那些需要使用函数表达式的场合,尽量用箭头函数代替。因为这样更简洁,而且绑定了 this。箭头函数取代Function.prototype.bind,不应再用 self/_this/that 绑定 this。

  • 模块:import取代require,使用export取代module.exports。如果模块只有一个输出值,就使用export default,如果模块有多个输出值,就不使用export default,export default与普通的export不要同时使用。如果模块默认输出一个函数,函数名的首字母应该小写。如果模块默认输出一个对象,对象名的首字母应该大写。

  • 三元条件判断:用三元操作符分配或返回语句。在比较简单的情况下使用,避免在复杂的情况下使用。

  • 使用严格等:总是使用 === 精确的比较操作符,避免在判断的过程中,由 JavaScript 的强制类型转换所造成的困扰。

日志规范

console.log 项目调试可以使用, 但是不能在项目上线之后, 保留上次无用的console.log, 如 console.log(‘aaaaaaaaaaa’), console.log(’--------bbbb’) 这种, 会影响二次开发人员的开发及相关调试

你可能感兴趣的:(前端开发规范--自用)