前端代码规范

最新推荐文章于 2022-12-27 07:59:28 发布
最新推荐文章于 2022-12-27 07:59:28 发布
阅读量382 收藏 2
点赞数 1
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44064067/article/details/127843722
版权

前端代码规范

变量

1、使用有意义且易懂的变量名

Bad:
const yyyymmdstr = moment().format("YYYY/MM/DD");
Good:
const currentDate = moment().format("YYYY/MM/DD");

2、对相同类型的变量使用相同的根词汇

Bad:
getUserInfo(); getClientData(); getCustomerRecord();
Good:
getUserInfo(); getUserData(); getUserRecord();

3、编写的代码是可读和可搜索的

Bad:
// What the heck is 86400000 for? 
setTimeout(blastOff, 86400000);
Good:
// Declare them as capitalized named constants. 
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; 
setTimeout(blastOff, MILLISECONDS_PER_DAY);

4、使用解释变量

Bad:

const address = "One Infinite Loop, Cupertino 95014"; 
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/; 
saveCityZipCode(   address.match(cityZipCodeRegex)[1],   address.match(cityZipCodeRegex)[2] );

Good:

const address = "One Infinite Loop, Cupertino 95014"; 
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/; 
const [_, city, zipCode] = address.match(cityZipCodeRegex) || []; saveCityZipCode(city, zipCode);

5、显式优于隐式

Bad:

const locations = ["Austin", "New York", "San Francisco"]; 
locations.forEach(l => {   
doStuff();   
doSomeOtherStuff(); 
   // Wait, what is `l` for again? 
  dispatch(l); });

Good:

const locations = ["Austin", "New York", "San Francisco"]; 
locations.forEach(location => { 
  doStuff(); 
  doSomeOtherStuff(); 
 dispatch(location); 
});

6、如果你的类/对象名告诉了你什么，不要在变量名中重复。

Bad:

const Car = {   carMake: "Honda",   carModel: "Accord",   carColor: "Blue" }; 
function paintCar(car, color) {   
car.carColor = color; 
}

Good:

const Car = {   make: "Honda",   model: "Accord",   color: "Blue" }; 
function paintCar(car, color) {   
car.color = color; 
}

7、默认参数是更干净的写法

Bad:

function createMicrobrewery(name) 
{   const breweryName = name || "Hipster Brew Co.";  
 // ... }

Good:

function createMicrobrewery(name = "Hipster Brew Co.") 
{   // ... }

方法

1、参数数量小于等于2

Bad:

function createMenu(title, body, buttonText, cancellable) {
  // ...
}
createMenu("Foo", "Bar", "Baz", true);

Good:

function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}
createMenu({
  title: "Foo",
  body: "Bar",
  buttonText: "Baz",
  cancellable: true
});

2、单一功能性

Bad:

function emailClients(clients) {
  clients.forEach(client => {
    const clientRecord = database.lookup(client);
    if (clientRecord.isActive()) {
      email(client);
    }
  });
}

Good:

function emailActiveClients(clients) {
  clients.filter(isActiveClient).forEach(email);
}
function isActiveClient(client) {
  const clientRecord = database.lookup(client);
  return clientRecord.isActive();
}

3、函数名告诉我们他是做什么的

Bad:

function addToDate(date, month) {
  // ...
}


const date = new Date();
// It's hard to tell from the function name what is added
addToDate(date, 1);

Good:

function addMonthToDate(month, date) {
  // ...
}
const date = new Date();
addMonthToDate(1, date);

4、删除重复代码

Bad:

function showDeveloperList(developers) {
  developers.forEach(developer => {
    const expectedSalary = developer.calculateExpectedSalary();
    const experience = developer.getExperience();
    const githubLink = developer.getGithubLink();
    const data = {
      expectedSalary,
      experience,
      githubLink
    };
    render(data);
  });
}
function showManagerList(managers) {
  managers.forEach(manager => {
    const expectedSalary = manager.calculateExpectedSalary();
    const experience = manager.getExperience();
    const portfolio = manager.getMBAProjects();
    const data = {
      expectedSalary,
      experience,
      portfolio
    };
    render(data);
  });
}

Good:

function showEmployeeList(employees) {
  employees.forEach(employee => {
    const expectedSalary = employee.calculateExpectedSalary();
    const experience = employee.getExperience();
    const data = {
      expectedSalary,
      experience
    };
    switch (employee.type) {
      case "manager":
        data.portfolio = employee.getMBAProjects();
        break;
      case "developer":
        data.githubLink = employee.getGithubLink();
        break;
    }
    render(data);
  });
}

5、使用Object.assign设置默认对象

Bad:

const menuConfig = {
  title: null,
  body: "Bar",
  buttonText: null,
  cancellable: true
};
function createMenu(config) {
  config.title = config.title || "Foo";
  config.body = config.body || "Bar";
  config.buttonText = config.buttonText || "Baz";
  config.cancellable =
    config.cancellable !== undefined ? config.cancellable : true;
}
createMenu(menuConfig);

Good:

const menuConfig = {
  title: "Order",
  // User did not include 'body' key
  buttonText: "Send",
  cancellable: true
};
function createMenu(config) {
  let finalConfig = Object.assign(
    {
      title: "Foo",
      body: "Bar",
      buttonText: "Baz",
      cancellable: true
    },
    config
  );
  return finalConfig
  // config now equals: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
  // ...
}
createMenu(menuConfig);

6、不要将标志用作函数参数

Bad:

function createFile(name, temp) {
  if (temp) {
    fs.create(`./temp/${name}`);
  } else {
    fs.create(name);
  }
}

Good:

function createFile(name) {
  fs.create(name);
}
function createTempFile(name) {
  createFile(`./temp/${name}`);
}

7、避免副作用函数

Bad:

// Global variable referenced by following function.
// If we had another function that used this name, now it'd be an array and it could break it.
let name = "Ryan McDermott";
function splitIntoFirstAndLastName() {
  name = name.split(" ");
}
splitIntoFirstAndLastName();
console.log(name); // ['Ryan', 'McDermott'];

Good:

function splitIntoFirstAndLastName(name) {
  return name.split(" ");
}
const name = "Ryan McDermott";
const newName = splitIntoFirstAndLastName(name);
console.log(name); // 'Ryan McDermott';
console.log(newName); // ['Ryan', 'McDermott'];

8、条件封装为函数

Bad:

if (fsm.state === "fetching" && isEmpty(listNode)) {
  // ...
}

Good:

function shouldShowSpinner(fsm, listNode) {
  return fsm.state === "fetching" && isEmpty(listNode);
}
if (shouldShowSpinner(fsmInstance, listNodeInstance)) {
  // ...
}

9、避免否定条件

Bad:

function isDOMNodeNotPresent(node) {
  // ...
}
if (!isDOMNodeNotPresent(node)) {
  // ...
}

Good:

function isDOMNodePresent(node) {
  // ...
}
if (isDOMNodePresent(node)) {
  // ...
}

10、移除 deadcode

Bad:

function oldRequestModule(url) {
  // ...
}
function newRequestModule(url) {
  // ...
}
const req = newRequestModule;
inventoryTracker("apples", req, "www.inventory-awesome.io");

Good:

function newRequestModule(url) {
  // ...
}
const req = newRequestModule;
inventoryTracker("apples", req, "www.inventory-awesome.io");

对象和数据结构

1、用set get修改数据

Bad:

function makeBankAccount() {
  // ...
  return {
    balance: 0
    // ...
  };
}
const account = makeBankAccount();
account.balance = 100;

Good:

function makeBankAccount() {
  // this one is private
  let balance = 0;
  // a "getter", made public via the returned object below
  function getBalance() {
    return balance;
  }
  // a "setter", made public via the returned object below
  function setBalance(amount) {
    // ... validate before updating the balance
    balance = amount;
  }
  return {
    // ...
    getBalance,
    setBalance
  };
}
const account = makeBankAccount();
account.setBalance(100);

Class

1、方法使用链式调用

Bad:

class Car {
  constructor(make, model, color) {
    this.make = make;
    this.model = model;
    this.color = color;
  }
  setMake(make) {
    this.make = make;
  }
  setModel(model) {
    this.model = model;
  }
  setColor(color) {
    this.color = color;
  }
  save() {
    console.log(this.make, this.model, this.color);
  }
}
const car = new Car("Ford", "F-150", "red");
car.setColor("pink");
car.save();

Good:

class Car {
  constructor(make, model, color) {
    this.make = make;
    this.model = model;
    this.color = color;
  }
  setMake(make) {
    this.make = make;
    // NOTE: Returning this for chaining
    return this;
  }
  setModel(model) {
    this.model = model;
    // NOTE: Returning this for chaining
    return this;
  }
  setColor(color) {
    this.color = color;
    // NOTE: Returning this for chaining
    return this;
  }
  save() {
    console.log(this.make, this.model, this.color);
    // NOTE: Returning this for chaining
    return this;
  }
}
const car = new Car("Ford", "F-150", "red").setColor("pink").save();

异步请求

Use Promises, not callbacks

Bad:

import { get } from "request";
import { writeFile } from "fs";
get(
  "https://en.wikipedia.org/wiki/Robert_Cecil_Martin",
  (requestErr, response, body) => {
    if (requestErr) {
      console.error(requestErr);
    } else {
      writeFile("article.html", body, writeErr => {
        if (writeErr) {
          console.error(writeErr);
        } else {
          console.log("File written");
        }
      });
    }
  }
);

Good:

import { get } from "request-promise";
import { writeFile } from "fs-extra";
get("https://en.wikipedia.org/wiki/Robert_Cecil_Martin")
  .then(body => {
    return writeFile("article.html", body);
  })
  .then(() => {
    console.log("File written");
  })
  .catch(err => {
    console.error(err);
  });

Async/Await are even cleaner than Promises

Bad:

import { get } from "request-promise";
import { writeFile } from "fs-extra";
get("https://en.wikipedia.org/wiki/Robert_Cecil_Martin")
  .then(body => {
    return writeFile("article.html", body);
  })
  .then(() => {
    console.log("File written");
  })
  .catch(err => {
    console.error(err);
  });

Good:

import { get } from "request-promise";
import { writeFile } from "fs-extra";
async function getCleanCodeArticle() {
  try {
    const body = await get(
      "https://en.wikipedia.org/wiki/Robert_Cecil_Martin"
    );
    await writeFile("article.html", body);
    console.log("File written");
  } catch (err) {
    console.error(err);
  }
}
getCleanCodeArticle()

3、错误捕获

Bad:

try {
  functionThatMightThrow();
} catch (error) {
  console.log(error);
}

Good:

try {
  functionThatMightThrow();
} catch (error) {
  // One option (more noisy than console.log):
  console.error(error);
  // Another option:
  notifyUserOfError(error);
  // Another option:
  reportErrorToService(error);
  // OR do all three!
}
鱿鱼西3.0
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端开发规范手册（第一版）
caoyan0829的博客
07-12 3932
未经允许不得转载   伙伴行前端开发手册 伙伴行研发中心前端组    编     目录   一、     Airbnb...................................................................................... 6 （一）       JavaScript 编码规范.....................
这是借鉴、引用的是京东前端代码规范。
05-05
这是借鉴、引用的是京东前端代码规范。
Web前端开发规范手册
01-20
集中了一些文件命名规则，css 书写规范，html书写规范， JavaScript书写规范， css 浏览器兼容
前端开发规范手册
qq_41551150的博客
04-26 1390
前端开发规范手册 此手册主要实现的目标：代码一致性和最佳实践。通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。 一、编程规约 (一)命名规范 1.1.1 项目命名 全部采用小写方式， 以中划线分隔。 正例：mall-management-system 反例：mallManagementSystem 1.1.2 目录命名 全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数 正例： scripts / styl
公司前端开发规范简要手册
子豆MMR的博客
12-24 738
前端的开发规范 本文主要从以下的几个方面来概述前端的开发规范 目录的构建规范 前端命名规范 前端工作规范 开发文档的书写规范 1. 前端目录构建规范 我们从命名原则、根目录、业务逻辑等方面进行目录构建 1.1 命名原则 简洁明了（如下：） src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包 不使用复数（如下：） 不使用 imgs docs 1.2 根目录（root）结构按职能划分 src 源代码（逻辑） doc 文档 dep 第三方依赖
前端代码规范.rar
11-25
前端代码规范.rar
前端代码规范.pdf
05-25
前端代码规范
前端代码规范 - v1.0.docx
06-04
前端代码规范 前端代码规范是指在前端开发过程中遵循的一些规则和约定，以确保代码的可读性、维护性和可扩展性。本文档旨在提供一个通用的前端代码规范，涵盖 HTML、CSS、JS 和 Vue 代码规范，适合公司开发人员参考...
Web前端开发规范手册.pdf
04-11
Web前端开发规范手册 提高团队协作效率  便于前端开发以及后期优化维护  方便新进的成员快速上手  输出高质量的代码
html代码规范文档,前端代码规范大全
weixin_36130547的博客
06-03 260
原标题：前端代码规范大全初衷不管参与项目的人数有多少，确保每一行代码都像是同一个人编写的;根据实际情况制定良好的代码规范；遵守编码风格使代码更容易维护，对长期项目大有裨益；实施代码规范增加代码可读性，提高协作开发效率；实施代码规范减少低级 bug 的出现概率；提供相关工具(插件)，保障代码规范的无缝接入。1、文件/资源命名——1.1 通用规则在 web 项目中，所有的文件名应该都遵循同一命名约定，...
前端代码规范文档
Andrew_Chenwq的博客
12-27 801
此外，它可能会导致维护人员引入错误，因为他们认为他们在使用一个变量，但实际上在使用另一个变量。●[建议] img 标签缺少alt属性时，sonar警告消除使用/ eslint-disable jsx-a11y/alt-text /。要么这条语句是多余的，应该删除，要么重新赋值是错误的，应该使用其他值或变量来代替赋值。●[建议] 有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现。● [强制] 使用html5的doctype来启用标准模式，建议使用大写的 DOCTYPE。
代码的规范性
qingyanhuan的博客
09-07 1123
1.HTML 原则 1.规范 。保证您的代码规范，保证结构表现行为相互分离。 2.简洁。保证代码的最简化，避免多余的空格、空行，保持代码的语义化，尽量使用具有语义的元素，避免使用样式属性和行为属性。任何时候都要用尽量简单、尽量少的元素解决问题。 3.实用。遵循标准，但是不能以牺牲实用性为代价。 4.忠诚。选择一套规范，然后始终遵循。不管代码由多少人参与，都应该看起来像一个人写的一样
百度前端代码规范pdf
最新发布
06-24
百度前端代码规范pdf是百度公司出品的一份标准化的前端代码书写规范，旨在提高前端开发人员的代码质量和可维护性。该规范涵盖HTML、CSS、JavaScript等各个方面的编码规范和约定，包括命名规范、代码缩进、注释规范、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值