Code Monkey home page Code Monkey logo

wang-d-ming.github.io's Introduction

前端开发规范

一、命名规则

1、文件命名

文件夹/文件的命名统一用小写

保证项目有良好的可阅读性。

2、文件引用路径

因为文件命名统一小写,所以引用依赖也需要注意大小写问题

3、js变量

3.1 变量

命名方式:小驼峰

命名规范:前缀名词

命名建议:语义化 案例

// 友好
let maxCount = 10; 
let tableTitle = 'LoginTable';

// 不友好
let setCount = 10;
let getTitle = 'LoginTable';
3.2 常量

命名方式:全部大写

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

命名建议:语义化

案例

const MAX_COUNT = 10;
const URL = 'http://www.foreverz.com';
3.3 函数

命名方式:小驼峰式命名法。

命名规范:前缀应当为动词。

命名建议:语义化

案例

// 是否可阅读
function canRead(): boolean {

  return true;

}
// 获取名称
function getName(): string {

  return this.name;

}
3.4 类、构造函数

命名方式:大驼峰式命名法,首字母大写

命名规范:前缀为名称。

命名建议:语义化

案例

class Person {

  public name: string;

  constructor(name) {

    this.name = name;

  }

}
const person = new Person('mevyn');

公共属性和方法:跟变量和函数的命名一样。

私有属性和方法:前缀为_(下划线),后面跟公共属性和方法一样的命名方式。

案例

class Person {

  private _name: string;

  constructor() { }

  // 公共方法

  getName() {

    return this._name;

  }

  // 公共方法

  setName(name) {

    this._name = name;

  }

}

const person = new Person();

person.setName('mervyn');

person.getName(); // ->mervyn
const person = new Person('mevyn');
3.5 css(class、id)命名规则 BEM 什么是BEM

我们还是使用大团队比较常用的BEM模式

(1)class命名使用BEM其实是块(block)、元素(element)、修饰符(modifier)的缩写,利用不同的区块,功能以及样式来给元素命名。这三个部分使用__与--连接(这里用两个而不是一个是为了留下用于块儿的命名)。

命名约定的模式如下:

.block{}
.block__element{}
.block--modifier{}

block 代表了更高级别的抽象或组件
block__element 代表 block 的后代,用于形成一个完整的 block 的整体
block--modifier代表 block 的不同状态或不同版本

二、注释

通用约定:

  • As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性、可读性
  • As long as necessary(如有必要,尽量详尽):合理的注释、空行排版等,可以让代码更易阅读、更具美感。

1.单行注释

必须独占一行。//

2.多行注释

避免使用 /…/ 这样的多行注释。有多行注释内容时,使用多个单行注释。

3.函数/方法注释

函数/方法注释必须包含函数说明,有参数和返回值时必须使用注释标识。 参数和返回值注释必须包含类型信息和说明。 当函数是内部函数,外部不可访问时,可以使用 @inner 标识。

函数/方法注释

3.文件注释

文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。 应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。

文件注释


三、代码书写规则

我们通过引入 eslint 来强制开发人员来遵守这些规范

以下是eslint的配置以及相关需要准守的书写规范,可通过实际场景进行调整

wang-d-ming.github.io's People

Contributors

wang-d-ming avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.