js开发规范

你还没有登录。你所做的任何更改会将作者标记为匿名用户。如果你已经拥有帐户，请登录。

<h2>1. 代码风格规范</h2><h3>1.1 缩进与空格</h3><ul><li><p style="margin-left: 0.0px;"><strong>缩进</strong>：使用<span> </span><strong>2 个空格</strong><span> </span>作为缩进，禁止使用 Tab。</p></li><li><p><strong>空格</strong>：</p><ul><li><p style="margin-left: 0.0px;">在操作符前后添加空格，如<span> </span><code>a + b</code>。</p></li><li><p style="margin-left: 0.0px;">在逗号后添加空格，如<span> </span><code>function(a, b, c)</code>。</p></li><li><p style="margin-left: 0.0px;">在花括号前添加空格，如<span> </span><code>if (condition) {</code>。</p></li><li><p style="margin-left: 0.0px;">在注释符<span> </span><code>//</code><span> </span>后添加空格，如<span> </span><code>// 注释</code>。</p></li></ul></li></ul><h3>1.2 换行</h3><ul><li><p style="margin-left: 0.0px;"><strong>每行代码长度</strong>：不超过<span> </span><strong>80</strong><span> </span>个字符，超出时换行。</p></li><li><p><strong>换行规则</strong>：</p><ul><li><p style="margin-left: 0.0px;">在操作符后换行。</p></li><li><p style="margin-left: 0.0px;">在逗号后换行。</p></li><li><p style="margin-left: 0.0px;">保持代码块清晰，避免过度换行。</p></li></ul></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="5f582e06-ceea-4348-92a5-730ab2c6b6ee" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>const result = someVeryLongFunctionName(argument1, argument2, argument3)
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
  });</pre></td></tr></table><h3>1.3 命名规范</h3><ul><li><p style="margin-left: 0.0px;"><strong>变量和函数</strong>：使用<span> </span><code>camelCase</code><span> </span>命名法，如<span> </span><code>userName</code>、<code>getUserInfo</code>。</p></li><li><p style="margin-left: 0.0px;"><strong>常量</strong>：使用<span> </span><code>UPPER_SNAKE_CASE</code><span> </span>命名法，如<span> </span><code>MAX_COUNT</code>。</p></li><li><p style="margin-left: 0.0px;"><strong>类</strong>：使用<span> </span><code>PascalCase</code><span> </span>命名法，如<span> </span><code>UserModel</code>。</p></li><li><p style="margin-left: 0.0px;"><strong>私有成员</strong>：使用<span> </span><code>_</code><span> </span>前缀，如<span> </span><code>_privateMethod</code>。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="161b3569-55eb-4ff5-867e-67b64b50f494" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>const MAX_COUNT = 100;

function getUserInfo(userId) {
  // 逻辑
}

class UserModel {
  constructor() {
    this._privateProperty = 'private';
  }

_privateMethod() {
    // 私有方法
  }
}</pre></td></tr></table><h3>1.4 引号</h3><ul><li><p style="margin-left: 0.0px;">使用<span> </span><strong>单引号</strong><span> </span><code>'</code><span> </span>作为字符串的引号，除非字符串中包含单引号。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="669887ab-3d92-4f73-933d-cd95afd44287" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>const name = 'John';
const message = "He's a developer";</pre></td></tr></table><h3>1.5 分号</h3><ul><li><p style="margin-left: 0.0px;"><strong>必须使用分号</strong>，避免因自动插入分号导致的潜在问题。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="fae1da49-b65c-491d-95a8-4a600d95a712" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>const a = 1;
const b = 2;</pre></td></tr></table><h3>1.6 花括号</h3><ul><li><p style="margin-left: 0.0px;"><strong>始终使用花括号</strong>，即使代码块只有一行。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="802ee6f9-bdd2-40b5-b855-cb1b321b087d" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>if (condition) {
  doSomething();
}</pre></td></tr></table><h3>1.7 注释</h3><ul><li><p style="margin-left: 0.0px;"><strong>单行注释</strong>：使用<span> </span><code>//</code>，注释内容与符号之间保留一个空格。</p></li><li><p style="margin-left: 0.0px;"><strong>多行注释</strong>：使用<span> </span><code>/* ... */</code>。</p></li><li><p style="margin-left: 0.0px;"><strong>函数注释</strong>：使用 JSDoc 格式。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="174eb218-ef54-460f-bf68-48d88f8084a1" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>/ 单行注释

/*
 * 多行注释
 */

/**
 * 获取用户信息
 * @param {string} userId - 用户 ID
 * @returns {Object} 用户信息
 */
function getUserInfo(userId) {
  // 逻辑
}</pre></td></tr></table><h2>2. 变量与常量</h2><h3>2.1 变量声明</h3><ul><li><p style="margin-left: 0.0px;">使用<span> </span><code>const</code><span> </span>声明常量，使用<span> </span><code>let</code><span> </span>声明变量，避免使用<span> </span><code>var</code>。</p></li><li><p style="margin-left: 0.0px;">每个声明语句只声明一个变量。</p></li></ul><p><br /></p><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="2de10ab1-6a13-4889-8486-c727837fe0a6" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>const MAX_COUNT = 100;
let userName = 'John';</pre></td></tr></table><h3>2.2 变量初始化</h3><ul><li><p style="margin-left: 0.0px;">尽量在声明时初始化变量。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="a2915253-2767-4de7-ba6a-f2b2e828e269" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>let count = 0;
const name = 'John';</pre></td></tr></table><h3>2.3 避免全局变量</h3><ul><li><p style="margin-left: 0.0px;">避免使用全局变量，尽量将变量限制在局部作用域内。</p></li></ul><h2>3. 函数规范</h2><h3>3.1 函数命名</h3><ul><li><p style="margin-left: 0.0px;">使用<span> </span><code>camelCase</code><span> </span>命名法，函数名应清晰描述其功能。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="d1009285-074a-4938-b651-d8499c8a4cce" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>function calculateTotalPrice(items) {
  // 逻辑
}</pre></td></tr></table><h3>3.2 函数参数</h3><ul><li><p style="margin-left: 0.0px;">参数数量不宜过多（建议不超过 5 个），过多时使用对象传递。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="024e9cac-e7c6-4166-b7c8-8687413f66ae" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>function createUser({ name, age, email, address }) {
  // 逻辑
}</pre></td></tr></table><h3>3.3 箭头函数</h3><ul><li><p style="margin-left: 0.0px;">优先使用箭头函数，尤其是回调函数和匿名函数。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="a523f571-d293-434c-9c46-e33d3457aa3a" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);</pre></td></tr></table><h3>3.4 默认参数</h3><ul><li><p style="margin-left: 0.0px;">使用默认参数替代函数内部的默认值逻辑。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="fc4d08fc-ba41-435b-a617-65086d14ed51" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>function greet(name = 'Guest') {
  console.log(`Hello, ${name}`);
}</pre></td></tr></table><h2>4. 对象与数组</h2><h3>4.1 对象字面量</h3><ul><li><p style="margin-left: 0.0px;">使用字面量创建对象，避免使用<span> </span><code>new Object()</code>。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="b375065e-3095-4b45-b1a8-95d3f4efaf06" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>const user = {
  name: 'John',
  age: 30,
};</pre></td></tr></table><h3>4.2 对象属性</h3><ul><li><p style="margin-left: 0.0px;">属性名使用<span> </span><code>camelCase</code><span> </span>命名法。</p></li><li><p style="margin-left: 0.0px;">动态属性名使用<span> </span><code>[]</code>。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="7fbb5eec-8d86-4b80-a2b1-7842cd3358c3" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>const key = 'name';
const user = {
  [key]: 'John',
};</pre></td></tr></table><h3>4.3 数组字面量</h3><ul><li><p style="margin-left: 0.0px;">使用字面量创建数组，避免使用<span> </span><code>new Array()</code>。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="798aaa20-f75d-4956-b9d9-8e94a1c74dd7" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>const numbers = [1, 2, 3];</pre></td></tr></table><h3>4.4 数组方法</h3><ul><li><p style="margin-left: 0.0px;">优先使用<span> </span><code>map</code>、<code>filter</code>、<code>reduce</code><span> </span>等函数式方法。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="1e157540-5b40-4d03-a655-a45412532fdd" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>const doubled = numbers.map(num => num * 2);</pre></td></tr></table><h2 style="">5. 类与模块</h2><h3 style="">5.1 类定义</h3><ul style=""><li><p style="margin-left: 0.0px;">使用<span> </span><code>class</code><span> </span>关键字定义类，避免使用原型链。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="ac85e152-965f-475e-854d-b6af5eb2f9d5" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>class User {
  constructor(name) {
    this.name = name;
  }

greet() {
    console.log(`Hello, ${this.name}`);
  }
}</pre></td></tr></table><h3 style="">5.2 模块化</h3><ul style=""><li><p style="margin-left: 0.0px;">使用<span> </span><code>ES Module</code><span> </span>进行模块化开发。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="29d0bab0-782d-4e12-9f2d-a931815d96d7" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>// user.js
export class User {
  // 类定义
}

// main.js
import { User } from './user.js';</pre></td></tr></table><h2 style="">6. 异步编程</h2><h3 style="">6.1 Promise</h3><ul style=""><li><p style="margin-left: 0.0px;">使用<span> </span><code>Promise</code><span> </span>处理异步操作，避免回调地狱。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="2eb70a2a-0546-4dcf-a216-6eb2758538d2" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>function fetchData() {
  return new Promise((resolve, reject) => {
    // 异步操作
  });
}</pre></td></tr></table><h3 style="">6.2 Async/Await</h3><ul style=""><li><p style="margin-left: 0.0px;">优先使用<span> </span><code>async/await</code><span> </span>替代<span> </span><code>Promise.then</code>。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="a893c04c-49cf-4038-b41f-e428f4f713af" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>async function getUser() {
  try {
    const user = await fetchData();
    console.log(user);
  } catch (error) {
    console.error(error);
  }
}</pre></td></tr></table><h2 style="">7. 错误处理</h2><h3 style="">7.1 Try/Catch</h3><ul style=""><li><p style="margin-left: 0.0px;">使用<span> </span><code>try/catch</code><span> </span>捕获同步代码中的错误。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="249165ad-b3ba-4df7-96fd-f564244bd193" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>try {
  doSomething();
} catch (error) {
  console.error(error);
}</pre></td></tr></table><h3 style="">7.2 Promise 错误处理</h3><ul style=""><li><p style="margin-left: 0.0px;">使用<span> </span><code>.catch()</code><span> </span>或<span> </span><code>try/catch</code><span> </span>捕获异步错误。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="e31bf430-46eb-48f2-bbbf-3f2ef2910571" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&amp;locale=zh_CN&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>fetchData()
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    console.error(error);
  });</pre></td></tr></table><p><br /></p><p><br /></p><p><br /></p>