我要投稿

通用编码标准 JavaScript

资讯主编 JavaScript

2024-08-07 0 283

通用编码标准

有意义的名字：
- 使用有意义且具有描述性的变量和函数名称。
- 除了循环计数器之外，避免使用缩写和单字母名称。

// good
const userage = 25;
function calculatetotalprice(items) { ... }

// bad
const a = 25;
function calc(items) { ... }

一致的命名约定：
- 变量和函数使用驼峰命名法。
- 使用 pascalcase 命名类名。

const userage = 25;
function calculatetotalprice(items) { ... }
class userprofile { ... }

避免重复：
- 遵循 dry（don’t repeat yourself）原则，将重复的代码封装到函数中。

// good
function calculatediscount(price, discount) { ... }
const price1 = calculatediscount(100, 10);
const price2 = calculatediscount(200, 20);

// bad
const price1 = 100 - 10;
const price2 = 200 - 20;

错误处理：
- 将 API 调用和其他异步操作包装在 try-catch 块中。

async function fetchdata() {
  try {
    const response = await fetch('api/url');
    const data = await response.JSon();
    return data;
  } catch (error) {
    console.error('error fetching data:', error);
  }
}

边缘情况：
- 始终考虑边缘情况并验证输入。

function getuserage(user) {
  if (!user || !user.age) {
    return 'age not available';
  }
  return user.age;
}

一致的格式：
- 遵循一致的代码格式风格（缩进、间距等）。使用 prettier 等工具来自动化此操作。

if (condition) {
  dosomething();
} else {
  dosomethingelse();
}

代码组织

模块化：
- 将代码分解为小的、可重用的模块或函数。

// utils.js
export function calculatediscount(price, discount) { ... }

// main.js
import { calculatediscount } from './utils.js';

关注点分离：
- 将不同的关注点（例如，ui 逻辑、业务逻辑、数据处理）分离到不同的文件或函数中。

// ui.js
function updateui(data) { ... }

// data.js
async function fetchdata() { ... }

// main.js
import { updateui } from './ui.js';
import { fetchdata } from './data.js';

最佳实践

使用严格模式：
- 始终启用严格模式来捕获常见的编码错误。

1	`'use strict';`

使用常量：
- 对不改变的值使用常量。

1	`const` `max_users = 100;`

避免全局变量：
- 尽量减少全局变量的使用，以避免冲突和意外行为。

// good
(function() {
  const localvariable = 'this is local';
})();

// bad
var globalvariable = 'this is global';

评论和文档：
- 编写注释和文档来解释代码的目的和功能。

/**
 * calculates the total price after applying a discount.
 * @param {number} price - the original price.
 * @param {number} discount - the discount to apply.
 * @returns {number} - the total price after discount.
 */
function calculatetotalprice(price, discount) { ... }

使用 promises 和异步/等待进行错误处理：
- 更喜欢使用 promise 和 async/await 进行异步操作，并将它们包装在 try-catch 块中以进行错误处理。

// good
async function fetchdata() {
  try {
    const response = await fetch('api/url');
    const data = await response.JSON();
    return data;
  } catch (error) {
    console.error('error fetching data:', error);
  }
}

// bad
function fetchdata(callback) {
  fetch('api/url')
    .then(response =&gt; response.json())
    .then(data =&gt; callback(data))
    .catch(error =&gt; console.error('error fetching data:', error));
}

对象解构：
- 使用对象解构以简洁的方式从对象中提取多个属性。

// Good
const vehicle = { make: 'Toyota', model: 'Camry' };
const { make, model } = vehicle;

// Bad
const vehicleMake = vehicle.make;
const vehicleModel = vehicle.model;

通过遵循这些标准，您可以确保您的 JavascrIPt 代码干净、可维护且高效。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在

免责声明
1. 本站所有资源来源于用户上传和网络等，如有侵权请邮件联系本站整改team@lcwl.fun！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系本站工作人员处理！
6. 本站资源售价或VIP只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压，如遇到无法解压的请联系管理员！
8. 因人力时间成本问题，部分源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别！
9.本站所有源码资源都是经过本站工作人员人工亲测可搭建的，保证每个源码都可以正常搭建，但不保证源码内功能都完全可用，源码属于可复制的产品，无任何理由退款！

网站搭建学习网 JavaScript 通用编码标准 JavaScript https://www.xuezuoweb.com/9842.html