项目开发规范--前端

最新推荐文章于 2023-02-05 22:52:19 发布
最新推荐文章于 2023-02-05 22:52:19 发布
阅读量807 收藏 1
点赞数
分类专栏： 项目 文章标签： 代码规范
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuliwen0418/article/details/119142752
版权

通用规范

基本原则：

  • 编译器统一设置编码为UTF-8；换行符为LF。

  • 源文件编码格式（包括注释）必须是 UTF-8

  • 命名必须使用英文单词，不可出现拼音

  • 命名缩写，行业约定俗称的缩写可以直接使用

  • 命名缩写时，要么全大写要么全小写。

  • 命名太长（超过20）可考虑缩写，可采用去掉元音字母的方法来缩写

  • 不可用注释来记录修改日志，不可用注释来保留废弃代码。

  • 一个目录下文件数之和不要超过 25

  • 文件长度不超过1000行

  • 每行代码不超过80个字符，除了一些特殊情况，如：URL、shell 命令、导入模块名，其他任何超出此限制的行都应该被换行。

  • 方法长度不超过80 行

  • 圈复杂度不超过 20

    圈复杂度数量上表现为覆盖所有代码的独立现行路径条数。为了代码的可读性，圈复杂度建 议不要超过 20。

  • 块语句的最大嵌套深度不要超过 4 层

命名方法说明：

  • 驼峰：除首字母外，每个单词的首字母大写，其他字母小写的。

  • 大驼峰：首字母大写的驼峰命名法。例如 MyName

  • 小驼峰：首字母小写的驼峰命名法。例如 myName

  • 短横线分隔命名法：单词全小写，单词间使用短横线分割。例如：my-name

HTML编码规范

1. 命名

目录和文件

使用短横线分隔命名法

login-time.html

HTML标签名、类名、id名、标签属性

使用短横线分隔命名法

<a href="/">Home</a>
<div class="demo"></div>
<a href="#" style="color:red;" rel="nofollow">只能使用"内联"方式</a>
​

2. 代码风格

使用HTML5文档声明

<!DOCTYPE html>

页面语言LANG

<html lang="zh-CN">

编码

UTF-8

<meta charset="UTF-8">

缩进

使用2个空格，嵌套的节点应该缩进

<ul>
  <li>
    111
  </li>
</ul>

元素属性值使用双引号

<div class="app-container"></div>

标签

所有标签都需要开始和结束标签，且空元素标签都不加"/"字符

<div>
    <h1>我是h1标题</h1>
    <p>我是一段文字，我有始有终，浏览器能正确解析</p>
</div>
    
<br>

3. 注释

单行注释

  • 在每一个块状元素，列元素和表格元素后，加一对HTML注释。

<body>
  <!-- 注释 -->
  <header>
    <div class="container">
      <a href="#">
        <!-- 图片会把a标签给撑开，所以不用设置a标签的大小 -->
        <img src="images/header.jpg" />
      </a>
    </div>
  </header>
</body>

多行注释

  • 多行注释时，采用两个单行注释包围代码。格式如下：

<!--  Comment Text A Begin -->  
<div class="mod_a">
    ...
</div>
<!-- Comment Text A End -->

TODO

  • 使用TODO来标记待做的事情，便于后期搜索

  • 在TODO后面添加姓名来表示分类

<!-- TODO(yuliwen): remove duplicate tag -->
<p><span>2</span></p>

CSS编码规范

1. 命名

目录和文件

采用短横线分隔命名法

man-style.css

选择器、属性名

采用短横线分隔命名法

.abc-a1 {
    display-man: block;
    man-width: 50px;
}

2. 代码风格

文件组织顺序

必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”

@charset "UTF-8";

.abc {
    
}

格式化

统一使用展开格式书写样式

.abc {
    display: block;
    width: 50px;
}

缩进

两个空格

分号

使用分号结束单个属性的定义

.test {
    display: block;
    height: 100px;
}

进制的颜色值表示

尽可能使用6个字符的16进制颜色值

color: #337ab7;

空格

属性和属性值间空一格；选择器和{中间空一格。

.abc { 
    width: 100%; 
}

空行

两个选择器间空一行

.abc {
    color: #337ab7;
}

.acd {
    color: #337ac7;
}

属性值引号

css属性值需要用到引号时，统一使用单引号

/* 推荐 */
.abc { 
	font-family: 'Hiragino Sans GB';
}

多选择器

多个选择器之间以行分割

h1,
h2,
h3 {
    line-height: 30px;
}

3. 注释

单行注释

/* html标签为统一使用的标签 */
html {
    background: #fff;
}

多行注释

/* 
* 具体描述
*/
body {
    margin: auto;
    width: 50%;
}

文件注释

@charset "UTF-8";

/**
 * 具体描述
 * @author lwx
 * @date 2015-10-10
 */

TODO

使用一行注释来描述TODO

/* TODO body的还需要重新优化调整 */
body {
    margin: auto;
    width: 50%;
}

SCSS编码规范

Sass 是一个 CSS 预处理器，Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。Sass 文件后缀为 .scss。

1. 命名

目录和文件

短横线分隔命名法

man-style.scss

选择器、属性名

采用短横线分隔命名法

.abc-a1 {
    display-man: block;
    man-width: 50px;
}

变量

以$开头，后面使用小驼峰命名法

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

2. 代码风格

遵循CSS的代码风格

文件组织顺序

必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”

  1. @charset

  2. @import

  3. 变量声明

  4. 样式声明

@charset "UTF-8";
@import "mixins/size.less";

$default-text-color: #333;

.page {
  $border-width:1px;
  width: 960px;
  margin: 0 auto;
  border: $border-width solid $default-text-color;
}

格式化

统一使用展开格式书写样式，不可写在一行。

.abc {
    display: block;
    width: 50px;
}

缩进

两个空格

分号

使用分号结束单个属性的定义

.test {
    display: block;
    height: 100px;
}

进制的颜色值表示

尽可能使用6个字符的16进制颜色值

color: #337ab7;

空格

属性和属性值间空一格；选择器和{中间空一格。

.abc { 
    width: 100%; 
}

空行

两个选择器间空一行

.abc {
    color: #337ab7;
}

.acd {
    color: #337ac7;
}

属性值引号

css属性值需要用到引号时，统一使用单引号

/* 推荐 */
.abc { 
    font-family: 'Hiragino Sans GB';
}

多选择器

多个选择器之间以行分割

h1,
h2,
h3 {
    line-height: 30px;
}

3. 注释

与CSS规范保持一致。

单行注释

/* html标签为统一使用的标签 */
html {
    background: #fff;
}

多行注释

/* 
* 具体描述
*/
body {
    margin: auto;
    width: 50%;
}

文件注释

@charset "UTF-8";

/**
 * 具体描述
 * @author lwx
 * @date 2015-10-10
 */

TODO

使用一行注释来描述TODO

/* TODO body的还需要重新优化调整 */
body {
    margin: auto;
    width: 50%;
}

4. SCSS嵌套顺序

  1. 当前选择器的样式属性

  2. 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)

  3. 伪类元素 (::before, ::after, ::first-line)

  4. 父级选择器的声明样式 (.selected, .active, .enlarged etc.)

  5. 用 SCSS的上下文媒体查询

  6. 子选择器作为最后的部分

 .product-teaser {
    // 1. 当前选择器的样式属性
    display: inline-block;
    background-color: whitesmoke;
    color: grey;
 
    // 2. 父级选择器的伪类选择器
    &:hover {
      color: black;
    }
 
    // 3. 带有父选择器的伪元素
    &::before {
      content: "";
      display: block;
      border-top: 1px solid grey;
    }
 
    &::after {
      content: "";
      display: block;
      border-top: 1px solid grey;
    }
 
    // 4. 用父选择器声明类
    &.active {
      background-color: pink;
      color: red;
 
      // 4.2. 状态类中的伪类选择器
      &:hover {
        color: darkred;
      }
    }
 
    // 5. 用 SCSS的上下文媒体查询
    @media screen and (max-width: 640px) {
      display: block;
      font-size: 2em;
    }
 
    // 6. 子选择器
    > .content > .title {
      font-size: 1.2em;
 
      // 6.5. 上下文媒体查询在子选择器
      @media screen and (max-width: 640px) {
        letter-spacing: 0.2em;
        text-transform: uppercase;
     }
    }
}

JavaScript编码规范

1. 命名

目录

短横线分隔命名法

log-manage

文件

短横线分隔命名法

monitor-task.js

类、构造函数

大驼峰命名法

function MyClass() {}
const myClass = new MyClass();

方法

方法的命名用动词、动宾结构，并遵循小驼峰命名法。

  1. get + 非布尔属性名()

  2. is + 布尔属性名()

  3. set + 属性名()

  4. has + 名词/形容词()

  5. add + 名词()

  6. delete + 名词()

  7. update + 名词()

  8. 动词()

  9. 动词 + 宾语()

function getType() {}
function isFinished() {}
function setVisible() {}
function draw() {}
function addKeyListener(listener) {}

变量、类属性、方法参数

小驼峰命名法

const firstName = 'xiaoming';

注意：当使用逻辑非运算符，并出现双重否定时，会出现理解问题。如：!isNotError 意味着什么， 不是很直白。布尔型的局部变量建议加上表达是非意义的前缀，包括常用的 is，也可以是 has、can、 should 等。

const isError = false;
const isFound = false;
const hasLicense = false;
const canEvaluate = false;
const shouldAbort = false

私有属性、私有方法

以下划线 "_" 开头，并遵循小驼峰命名法。

class Foo {
  constructor() {
    // 私有属性
    this._bar = computeBar();
    // 不是私有属性，可以通过实例访问
    this.baz = computeBaz();
   }
}

临时变量

  • 作用域不大的临时的变量可以简写，比如：str，num，bol，obj，fun，arr

  • 循环变量可以简写，比如：i，j，k 等。

常量

全大写，单词以下划线分隔

const HOTEL_GET_URL = 'http://map.baidu.com/detail';
const MAX_USER_NUM = 200;
const APPLICATION_NAME = 'Launcher';

2. 注释

注释应该是解释代码的意图，而不是描述代码怎么做

需要注释的地方

  • 类说明

  • 方法说明

  • 变量、属性说明

  • 复杂的业务逻辑处理说明

  • 复杂代码逻辑处理说明

单行注释

单行注释 // 后先跟一个空格再跟具体内容。

// 姓名
let name = '上官'

类、组件注释

使用 /** */

/**
  * 组件或类描述
  * @author 组件作者
  * @date 2017年12月05日17:22:43
  * @example 调用示例
  *  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
*/

方法注释

使用 /** */

/**
  * 方法描述名称
  * @param {Object} [title]    - 参数说明
  * @param {String} [columns] - 参数说明
  * @example 调用示例
  *  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
*/

多行注释

使用/* */

/* xxxx begin */
代码
/* xxxx end */

TODO

使用 // TODO

// TODO 该方法具体实现
function getUserName(){}

3. 代码风格

使用ESLint默认风格进行统一排版。VSCODE安装prettier-eslint插件并设置成默认格式化工具。

排版都使用了ESLint默认设置，下面的具体内容可以不看。

缩进

两个空格

换行

代码每行最长80字符。

空行

  • 逻辑相对独立的代码块之间增加一行空行

  • 方法体、块语句和类的开始或末尾不要有空行

  • class 成员之间、代码块之间使用空行分隔

  • 不要使用连续空行

空格

  • 在保留字（例如 if、for 或 catch）与左括号 ( 之间增加空格

  • 在保留字（例如 else 或 catch）与该行之前的花括号 } 之间增加空格。

  • 在任何打开花括号 { 之前增加空格，有两个例外：a. 在作为函数的第一个参数或数组中的第一个元素时，对象之前不用加空格，例如：foo({ name： [{ bar：baz }] })。 b. 在模板中，不用加空格，例如：abc${name}。

  • 单行的{}内侧要有空格

  • 数组的括号内不要有空格

  • 禁止出现多个连续空格

花括号

  • 给 if、for、do、while 等语句的执行体加花括号 {}

  • 花括号 { 和语句在同一行

    function foo() {
 //...
}

逗号、分号

  • 使用拖尾逗号

  • 强制在逗号之后使用空格

  • 每行结束不使用分号

4. 变量

  • const 或 let 而不是 var

  • 在需要时候声明变量，并且尽快初始化

  • 每行声明一个变量

  • 禁止连续赋值

  • 变量不需要用 undefined 初始化

  • 使用基本类型的字面量而不是其封装类型

  • 禁止同一作用域里，局部变量和全局变量同名

5. 方法

  • 方法设计应遵循单一职责原则（SRP），一个方法仅完成一个功能

    多段代码重复做同一件事情，那么在方法的划分上可能存在问题，应将重复部分提取为 一个方法。

  • 方法设计应遵循单一抽象层次原则（SLAP）

    SLAP 原则，是指让一个方法中所有的操作处于相同的抽象层。代码抽象层次的跳跃会破坏 了代码的流畅性。

    不好示例

    function compute() {
  input();
  const height = 100;
  output();
}

    推荐示例

    function compute() {
  input();
  process();
  output();
}

  • 方法的参数个数不宜超过 5 个

    如果参数超过 5 个，则维护的难度很大，建议减少参数个数。如果多个参数同时多次出现在 多个方法中，说明这些参数紧密相关，可以将它们封装到一个对象中。

  • 给函数的参数指定默认值

    function handleThings(opts = {}) {
  // ...
}

  • 不要把方法的入参当作工作变量/临时变量

    对函数参数中的变量进行赋值可能会误导读者，导致混乱，也会改变 arguments 对象。

    • 1) 每个变量/参数都有自己独特的功用，让一个变量承担多个职责，变量名无法清晰表达其功能， 会使程序难以理解。

    • 2) 如果参数是传引用方式的，在方法内对参数的更改，会传递到方法外，可能会造成意外的错误。 所以也不建议对参数的属性进行修改。

    不好示例

    function sample(inputVal) {
  inputVal = inputVal * CurrentMuiniplier(inputVal);
  inputVal = inputVal * CurrentAdder(inputVal);
  return inputVal;
}
​

    推荐示例

    function sample (inputVal) {
  let workingVal = inputVal;
  workingVal = workingVal * CurrentMuiniplier(workingVal);
  workingVal = workingVal * CurrentAdder(workingVal);
  return workingVal;
}

  • 总是将默认参数放在最后

    将默认参数放在最后，在调用方法时，若默认参数没有值，就可以不传入这个参数，让调用代码更简单

  • 不要使用 arguments，可以选择 rest 语法替代

    rest 参数是一个真正的数组，而 arguments 是一个类数组。rest 参数必须是列表中的最后 一个参数。

    不好示例

    function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}

    推荐示例

    function concatenateAll(...args) {
  return args.join('');
}

  • 实现对外 API 时，应该对外部传入参数的合法性进行判断

  • 用到匿名函数时优先使用箭头函数（或 Function#bind），别保存 this 的引用

    不好示例

    function foo() {
  const self = this;
    
  return function() {
    console.log(self);
  };
}

    推荐示例

    function foo() {
  return () => {
    console.log(this);
  };
}

  • 箭头函数的简写

    如果一个箭头函数适合用一行写出，并且只有一个参数，那就把花括号、圆括号和 return 都 省略掉。如果不是，那就不要省略。

    // 省略了那就把花括号、圆括号和return
[1, 2, 3].map(num => num * num);
// 有两个参数，不能省略
[1, 2, 3].reduce((total, num) => {
 return total + num;
}, 0);

  • 要求使用一致的 return 语句

    不像静态类型语言强制要求函数返回一个指定类型的值，JavaScript 允许在一个函数中不同 的代码路径返回不同类的值。 JavaScript 中令人感到困惑的一面是：在以下情况下函数返回 undefined ：

    • 1) 在退出之前没有执行 return 语句

    • 2) 执行 return 语句，但没有显式地指定一个值

    • 3) 执行 return undefined

    • 4) 执行 return void，其后跟着一个表达式 (例如，一个函数调用)

    • 5) 执行 return，其后跟着其它等于 undefined 的表达式

    在一个函数中，如果任何代码路径显式的返回一个值，但一些代码路径不显式返回一个值，那么这 种情况可能是个书写错误，尤其是在一个较大的函数里。

    推荐示例

    // 保证所有路径都返回相同类型的值
function doSomething(condition) {
  if (condition) {
    return true;
  } else {
    return false;
  }
}

function doSomething(condition) {
  if (condition) {
    return true;
  }
  return false;
}

  • 函数返回多个值时，应该使用对象解构，而不是数组解构

    不好示例

    function processInput() {
  return [left, right, top, bottom];
}
// 需要考虑返回数据的顺序
const [left, , top] = processInput();

    推荐示例

    function processInput() {
  return { left, right, top, bottom };
}
// 只要选择需要的数据
const { left, right } = processInput();

6. 类与对象

  • class 关键字定义类

  • 采用 extends 关键字实现继承

    class PeekableQueue extends Queue {
  peek() {
    return this._queue[0];
  }
}

  • 在构造函数中禁止在调用 super()之前使用 this 或 super

    class ClassA extends ClassB {
  constructor() {
    super();
    // 在”super()”之后.
    this.age = 0; 
  }
}

  • 在构造函数中设置所有对象的属性（不包括方法）

    在构造函数完成后，不应将属性添加到对象或从对象中删除属性，因为它会阻碍 VM 的优化 能力。在构造函数中设置所有的属性，也有利于看代码时，对代码整体功能的理解。如有必要，对 于稍后初始化的字段，也应在构造函数中显示设置为 null。

  • 字符串使用单引号

    单引号优于双引号，当你创建一个包含 HTML 代码的字符串时就知道它的好处了。

  • 使用模板字符串（`）实现字符串拼接

    说明：在 ECMAScript 6 中，如果模板字符串跨越多行，或者有变量的拼接，则需要使用模板字符 串。

    function sayHi(name) {
  return `How are you, ${name}?`;
}
// 利用模板字符串处理多行字符串
function arithmetic(a, b) {
  return `Here is a table of arithmetic operations:
        ${a} + ${b} = ${a + b}
        ${a} - ${b} = ${a - b}
        ${a} * ${b} = ${a * b}
        ${a} / ${b} = ${a / b}`;
}

  • 向数组添加元素时使用 Arrary#push 替代直接赋值

    const someStack = [];
someStack.push('abracadabra');

  • 不要在 forEach 循环里进行元素的 remove/add 操作

    在 forEach 循环中删除、增加元素，会破坏原本的遍历顺序，可能导致意料之外的结果。

  • 使用数组解构

    ECMAScript 6 允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称之为 解构(Destructuring)。解构赋值避免了临时变量或对象，给 JavaScript 书写带来了很大的便利性，同 时也提高了代码的可读性。

    • 1) 可以在赋值的左侧使用数组字面量来执行解构，最后元素可以是 rest。

    • 2) 数组解构也可以用于函数参数。如果数组参数是可选的，则始终需要将[]指定为默认值，并在 左侧提供默认值。

    const [age, bee, cat, ...rest] = generateResults();
const [,bee,, dog] = someArray;
function optionalDestructuring([age = 4, bee = 2] = []) {};

  • 尽量在一个地方定义对象的所有属性

  • getter 和 setter 应该成对出现在对象中

  • 禁止在对象实例上直接使用 Object.prototypes 的内置属性

    对象实例可以具有属性，这些属性可以将 Object.prototype 的内建函数隐藏，可能导致意外 行为或拒绝服务安全漏洞。例如，web 服务器解析来自客户机的 JSON 输入并直接在结果对象上调 用 hasOwnProperty 是不安全的，因为恶意客户机可能发送一个 JSON 值，如 { hasOwnProperty: 1 }， 并导致服务器崩溃。

  • 用 Object.keys()替代 for-in 进行遍历。

    在使用 for-in 遍历对象时，会把从原型链继承来的属性也包括进来。这样会导致意想不到的 项出现。因此，应该在 for-in 循环中使用 Object.prototype.hasOwnProperty 来排除不需要的原型属性。

7. 运算与表达式

条件表达式

  • 在条件判断中，应该变量在先，字面量在第二的位置

    if (color === 'red') {
// ...
}

  • 判断相等时使用 === 和 !== ，而不是 == 和 !=

    JavaScript 中使用双等 == 做相等判断时会自动做类型转换，如：[] == false、[] == ![]、3 == '03'都是 true，当类型确定时使用全等 === 可以提高效率

  • 使用简写的条件表达式

    对于条件表达式，例如 if 语句，JavaScript 引擎会强制计算它们的表达式为布尔值，规则如 下：

    • 1) 对象 被计算为 true；

    • 2) undefined 被计算为 false；

    • 3) null 被计算为 false；

    • 4) 布尔值 被计算为 布尔的值；

    • 5) 数字 如果是 +0、-0、或 NaN 被计算为 false, 否则为 true；

    if (isValid) {
 // ...
}
const collection = [1, 2, 3];
if (collection.length) {
 // ...
}
// name是字符串
if (name !== '') {
 // ...
}

  • 禁止使用嵌套的三元表达式

    嵌套的三元表达式使代码更加难以理解。

控制语句

  • 每个 switch 语句都包含一个 default 语句，即使它不包含任何代码

  • 在 switch 语句的每一个有内容的 case 中都放置一条 break 语句

    遗漏 break，可能导致程序误入下一个 case 分支，执行了预期之外的代码，导致异常。而且， 不推荐做出有意不写 break 的设计。

  • case 语句中需要声明词法时, 花括号{}不能省略

    词法声明在整个 switch 语句块中是可见的，但是它只有在运行到它定义的 case 语句时， 才会进行初始化操作。为了保证词法声明语句只在当前 case 语句中有效，应该将语句包裹在块中。

    // switch 语句之外的声明是有效的
const num = 0;
switch (foo) {
  // 下面的 case 子句使用括号包装成块
  case 1: {
    let age = 1;
    break;
  }
  case 2: {
    const bar = 2;
    break;
  }
  case 3:
    // 由于函数声明提升特性，不带括号是可以的
    function fun() {}
    break;
 case 4:
    // 由于 var 变量的声明提升特性，不带括号是可以的
    var dog = 4;
    break;
 default: {
    class ClassA {}
  }
}

  • 对于 if-else if（有多个 else if）类型的条件判断，最后必须包含一个 else 分支

正则表达式

  • 禁止正则表达式字面量中出现多个空格

    正则表达式可以很复杂和难以理解，这就是为什么要保持它们尽可能的简单，以避免出现错 误。在使用正则表达式时使用了多个空格很容易出错。

    const re = /foo {3}bar/;
const re = new RegExp('foo {3}bar');

  • 建议在正则表达式中使用命名捕获组

    const foo = /(?<id>ba[rz])/;
const bar = new RegExp('(?<id>ba[rz])');
const baz = RegExp('(?<id>ba[rz])');
​
foo.exec('bar').groups.id;

8. 模块

  • 如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，则使用 export，export default与export不要同时使用

    import myObject from './importModule'

  • 如果默认输出一个函数，函数名采用小写驼峰命名

    function getUerList() {}

export default getUerList;

  • 如果模块默认输出一个对象，大驼峰命名

    const UserDetail={
    name: '上官';
    age: 18
}
	
export default UserDetail

Vue项目规范

1. 命名

1.1 目录和文件

短横线分隔命名法，有复数结构时，要采用复数命名法，缩写不用复数

除通用的缩写，不自定义缩写

src/components/images/utils/styles/img/views/components-demo

1.2 项目名

短横线分隔命名法

management-system

1.3 组件命名

  • 组件名：采用大驼峰命名法

  • 导入及注册主键：采用大驼峰命名法

  • 使用规范：html中使用时采用短横线分隔命名法

示例如下：组件名称为AvatarUploadCustom,导入注册是使用AvatarUploadCustom，html使用时用avatar-upload-custom

​
// 组件名
@Component({
name: 'AvatarUploadCustom',
components: {
AvatarUpload,
PanThumb
}
})
// 导入注册 
@Component({
name: 'PersonalCenter',
components: { AvatarUploadCustom }
})
// 使用
<avatar-upload-custom />

1.4 方法命名

小驼峰命名法

1.5 Prop命名

  • Prop名字：小写驼峰命名法

  • Prop使用：而在模板中使用短横线分隔命名法引用

// 子
props: {
  greetingText: String
}
// 父
<WelcomeMessage greeting-text="hi"/>
​

2. 代码风格

使用ESLint默认配置，统一代码风格。

文件组织顺序

VUE文件和TS/JS文件分别写。

  1. 模板

  2. script

    • import

    • 组件选项

  3. style

示例如下：

<template>
<div>
    <!--必须在div中编写页面-->
    </div>
</template>
<script lang="ts">
  import { Component, Vue, Watch } from 'vue-property-decorator'
      
  export default {
      components : {
      },
      data () {
        return {
        }
      },
      mounted() {
      }，
      methods: {
      }
   }
</script>
<!--声明语言，并且添加scoped-->
<style lang="scss" scoped>
</style>

组件选项顺序

  - components
  - props
  - data
  - computed
  - created
  - mounted
  - metods
  - filter
  - watch
​

多元素写法

  • 多个特性的元素应该分多行撰写，每个一下单独一行（增强可读性）

 <el-tree
   ref="tree"
   highlight-current
   expand-on-click-node
   node-key="id"
   :data="treeData"
   :filter-node-method="filterNode"
   :props="defaultProps"
   :current-node-key="selectNodeId"       
   @node-click="handleNodeClick"
 />

元素特性的顺序

原生属性放在前面，指令放在后面

- class
- id,ref
- name
- data-*
- src, for, type, href,value,max-length,max,min,pattern
- title, alt，placeholder
- aria-*, role
- required,readonly,disabled
- is
- v-for
- key
- v-if
- v-else-if
- v-else
- v-show
- v-cloak
- v-pre
- v-once
- v-model
- v-bind,:
- v-on,@
- v-html
- v-text

Prop

  • 定义应尽量详细，必须制定其类型

  • 必须加上注释，表明其含义

  • 必须加上 required 或者 default，两者二选其一

@Prop({ required: true }) private id!: string
@Prop({ required: true }) private url!: string
@Prop({ default: 200 }) private thumbnailHeight!: number
@Prop({ default: 200 }) private thumbnailWidth!: number

3. 注释

注释要求

  • api 目录的接口 ts 文件必须加注释

  • store中的 state,mutation,action等必须加注释

  • vue文件的 methods，每个方法必须加注释

  • vue文件中的 data，非常见单词要加注释

单行注释

使用//

  // Active state:
  &.material--active {
    .material-label {
      color: $color-blue;
    }
  }

多行注释

  /**
   * 点击tab标签切换刷新当前页面
   * @param tab<obj> 当前tab的所有信息
   */
  private handleClick(tab: any, event: Event) {
    let queryType: any
    let name = tab.name
  }

TODO

  • 使用TODO来标记待做的事情，便于后期搜索

  • 在TODO后面添加姓名来表示分类

  // TODO 这个后面再写
  &.material--active {
    .material-label {
      color: $color-blue;
    }
  }

TypeScript编码规范

命名、注释、排版与JavaScript一致，并使用Eslint默认配置统一风格

yuliwen0418
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阿里前端开发规范.pdf
05-08
一． 编程规约 (一) 命名规范 1.1.1 项目命名 1.1.2 目录命名 1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名 1.1.4 命名严谨性4 (二) HTML 规范 （Vue Template 同样适用） 1.2.1 HTML 类型 1.2.2 缩进 1.2.3 分块注释 1.2.4 语义化标签 1.2.5 引号 (三) CSS 规范 1.3.1 命名 1.3.2 选择器 1.3.3 尽量使用缩写属性 1.3.4 每个选择器及属性独占一行 1.3.5 省略 0 后面的单位 1.3.6 避免使用 ID 选择器及全局标签选择器防止污染全局样式 (四) LESS 规范 1.4.1 代码组织 1.4.2 避免嵌套层级过多 (五) Javascript 规范 1.5.1 命名 1.5.2 代码格式 1.5.3 字符串 1.5.4 对象声明 1.5.5 使用 ES6+ 1.5.6 括号 1.5.7 undefined 判断 1.5.8 条件判断和循环最多三层 1.5.9 this 的转换命名 1.5.10 慎用 console.log 二、 Vue 项目规范
阿里巴巴前端开发规范.docx
07-10
阿里巴巴前端开发规范.docx
WEB前端开发规范文档
01-31
为新项目写的一份规范文档,分享给大家.我想前端开发过程中,无论是团队开发,还是单兵做站,有一份开发文档做规范, 对开发工作都是很有益的.本文档由本人编写,部分意见来源于网络,以此感谢,片面及有误的地方,希望大家指正. 另,本文档部分规范是为我所在项目组所写,使用时请根据实际项目需求修改.以下为[WEB前端开发规范文档]正文点此查看WEB版本为提高团队协作效率,便于后台人员添加功能及前端后期优化维护
Vue前端开发规范.pdf
10-29
Vue前端开发规范
Web前端项目开发规范 .pdf
10-16
为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后可以更改此文档。
es6...运算符rest参数与arguments的区别
我爱学习H55555的博客
12-18 623
//arguments function fn() { arguments.push('hello word'); console.log(arguments); //报错: arguments.push is not a function at fn } fn([1, 2, 3, 4]); //rest function fn1(...a) { a[0].push('hello word'); console.log(a); //[1, 2, 3, 4, 5, 'hello.
vue中dom模板为什么要使用kebab-case命名法(短横线命名)
树上骑个猴的博客
01-25 1258
最近看到vue官方文档的时候，多次提及字符串模板和dom模板，对这个概念比较模糊，经查阅后记录供日后参考。 1.字符串模板 字符串模板就是写在vue中的template中定义的模板，如.vue的单文件组件模板和定义组件时template属性值的模板。字符串模板不会在页面初始化参与页面的渲染，会被vue进行解析编译之后再被浏览器渲染，所以不受限于html结构和标签的命名。 Vue.component('MyComponentA', { template: '<div MyId="123">
VsCode 使用 koroFileHeader 配置作者信息、及函数注释
wang13679201813的博客
11-08 2216
VsCode 配置作者信息、代码修改日期
[leetcode笔记001]JavaScript之Airbnb 代码规范与leetcode刷题
记一些学习笔记
02-05 191
前端，Airbnb 代码规范与leetcode刷题
web前端开发规范手册
09-20
有常用的标签命名规范，和项目结构设计规则，文件命名规则，css 书写规范，html书写规范，这是在网上找到的，来源已经忘了，不过看着十分不错，对于写出规范的代码帮助很大
Vue前端开发规范整理(推荐)
08-27
本文是基于vue官方风格指南整理的关于Vue前端开发规范(推荐),非常不错，具有参考借鉴借鉴价值，需要的朋友可以参考下
前端开发规范
06-11
代码规范往往是项目开发过程中最容易被忽略的一个环节，我们常常在维护修改他人代码的过程中无比艰辛，心中暗自职责他人的水平菜鸡，挖坑能力出众，的确在某些情况下是由于他人的基础能力引起的问题，但由于规范的...
前端开发规范手册合集.zip
06-16
前端开发规范手册合集，包含前端开发基本规范、vue项目开发规范、css开发规范、js开发规范、IDE工具规范手册，技术开发全面的规范手册，集团内部规范手册，不是网络上的普通规范手册，物有所值！！！！
前端开发规范文档.zip
最新发布
04-18
项目规划：制定详细的项目计划，包括制定项目的时间表、任务分配和前端技术选型等。 设计阶段：进行网页或应用程序的设计工作，包括制定整体布局、设计界面的风格、色彩搭配、字体选用等。 前端开发：根据设计稿进行...
前端-代码走查模板.docx
12-23
前端项目管理中不可少的一个环节就是代码走查。可以很好的约束开发方式，对齐组内开发风格
前端Vue项目开发规范.md
09-04
前端Vue项目开发规范.md
前端开发-绩效考核1
08-08
员工考核表 岗位：web前端开发 部门：千影事业部 姓名： 考核日期： 项目及考核内容配 分考评分态度分（10分）职业道德（5分）职业行为规范执行很出色5职业
nbsaas-boot项目源码
01-14
开发规范：nbsaas-boot提供一套开发规范，包括代码风格、命名规范、注释规范等，使团队开发更加规范化和高效化。 数据搜索：nbsaas-boot提供一种新的数据搜索，基于搜索引擎技术，快速搜索海量数据，提供精确和...
阿里巴巴前端开发规范
01-03
根据您提供的引用内容，阿里巴巴前端开发规范是指阿里巴巴公司制定的前端开发规范，旨在提高团队协作效率、代码质量和项目可维护性。该规范包括了代码风格、命名规范、HTML、CSS、JavaScript等方面的规范。 您可以参考阿里巴巴前端开发规范的官方文档，该文档详细介绍了各种规范的具体要求和示例代码。以下是一些主要的规范要点： 1. 代码风格： - 使用4个空格缩进。 - 使用单引号或反引号，避免使用双引号。 - 每行最多不超过80个字符。 - 使用分号结尾。 2. 命名规范： - 使用驼峰命名法。 - 组件名使用多个单词，且首字母大写。 - 文件名使用小写字母，多个单词之间使用连字符。 3. HTML规范： - 使用语义化的标签。 - 避免使用行内样式和脚本。 - 标签属性使用双引号。 4. CSS规范： - 使用BEM命名规范。 - 避免使用!important。 - 避免使用行内样式。 5. JavaScript规范： - 使用ES6语法。 - 使用严格模式。 - 避免使用全局变量。 请注意，以上只是阿里巴巴前端开发规范的一部分内容，您可以参考官方文档以获取更详细的规范要求和示例代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值