公司网站源码去一品资源网（公司网站源码搜一品资源）

提升企业阶梯不再依赖于您多年的经验。 当然，这可能是决胜局中的决定性因素，但它几乎没有说明你可以带来什么。 更重要的是你如何编写你的代码，代码的质量，以及未来重复使用这段代码的可能性。 学习业界采用的最佳约定就像阅读著名的开源代码或阅读您正在使用的工具（Vue、C#、JavaScript）的单页纸一样简单。 但这还不是全部——当您继续阅读本文时，将介绍更多内容。

可扩展性设计

通常情况下，当我们考虑设计可伸缩性时，我们会考虑编写直到以后才会使用的代码。这远非真相！这样的代码一开始就不应该存在——它会产生技术债务，如果最终根本不被使用，可能会导致可维护性问题！

可扩展性的主要思想是从一开始就使用它，以便可以在未来的冲刺或马拉松比赛中以最小的努力和几乎没有变化来扩展它。举个例子，我工作的这家初创公司与许多薪资和 POS 公司合作，为我们的客户提供产品内的无缝第三方集成。尽管每个集成都是独一无二的，但所需的任务几乎是相同的。

假设从第三方系统 Gusto 和 BambooHR 导入员工时，他们应该具有以下设置要求：

– 位置映射（第三方内对应位置的员工只应添加到客户选择的位置）

– 向所有成功导入的员工发送邀请的选项

在这里，解决方案很简单，如下面的 Vue.js 示例代码所示：

<template>
  ...
  <location-mapping :set="setMapping"    :integration:"state.integration" v-if="state.index === 0" />
  <employee-invite :set="setInvite" v-if="state.index === 1"/>
  ...
  <button :click="nextTab" v-if="state.index !==1 ">Next</button>>
  <button :click="startImport" v-else">Start Import</button>
</template>
...
setup() {
  const state = reactive({
    index: 0,
    integration: $route.params.integration,
    configuration: {},
  });  function startImport() {
    startBackgroundJob(state.integration, state.configuration);
  }  function setMapping(mapping) {
    state.configuration.locationMapping = mapping;
  }  function setInvite(canInviteEmployees) {
    state.configuration.inviteEmployees = canInviteEmployees;
  }  function nextTab() {
    state.index++;
  }  return { state, startImport, setMapping, setInvite, nextTab };
}

但是，如果我们添加另一个集成，零，它也需要休假类型的映射（即将员工可能拥有的年假、病假和陪产假同步到我们的系统中）。 我们可以复制上面的模板并添加一个新元素，即离开映射，或者我们可以重用这个模板并确保集成只看到它们需要的元素。 为此，大多数开发人员会使用 if 语句，这为我的下一次编码实践提供了完美的选择。

除非完全必要，否则避免使用 if 语句

if gusto show this:
   ...
if bamboohr show that:
   ...
...

虽然这应该可以解决问题，但这样做会导致代码不可读并且可能更难以扩展，特别是如果您正在使用比上述 3 更多的集成。

相反，以 JavaScript 对象的形式使用定义要快得多，并且可以更轻松地扩展应用程序。 看看下面的代码

LOCATION_MAPPING = {
  COMPONENT: 'location-mapping',
  ...otherRequiredProperties,
}
EMPLOYEE_INVITE = {
  COMPONENT: 'employee-invite',
  ...otherRequiredProperties,
}
LEAVE_TYPE_MAPPING = {
  COMPONENT: 'leave-type-mapping',
  ...otherRequiredProperties,
}INTEGRATIONS = {
  BAMBOOHR: [LOCATION_MAPPING, EMPLOYEE_INVITE],
  GUSTO: [LOCATION_MAPPING, EMPLOYEE_INVITE],
  ZERO: [LOCATION_MAPPING, LEAVE_TYPE_MAPPING, EMPLOYEE_INVITE],
}

我们创建了一个对象，其中包含我们正在为此特定任务使用的所有集成。 每个集成都有将要使用的组件的属性，例如，BambooHR 使用 LOCATION_MAPPING 和 EMPLOYEE_INVITE，这反过来为我们提供了与它们相关的有用信息，从而使我们能够进行扩展。 其中一个信息是 COMPONENT，它本质上告诉我们与它们相关的 Vue 模板的名称。 通过我们可以使用组件的名称，我们可以利用 Vue 的元组件，它允许我们根据需要动态渲染我们需要的组件： <component :is="componentName" />

现在，我们的代码应该看起来更加简洁，并且只需进行最少的更改，我们应该能够根据需要将此功能扩展到许多集成。 它不仅有助于扩展性，而且还极大地提高了代码的可读性和可维护性。

<template>
  ...
  <component :is="state.currentTab" />
  <button :v-if="state.hasNext" @click="nextTab">Next</button>
  <button :v-else @click="startImport">Start Import</button>
</template>
// import definitions
// import components
...
setup() {
  const state = reactive({
    tabIndex: 0,
    state.integration: $route.params.integration,
    currentTab: computed(() => INTEGRATIONS[state.integration][state.tabIndex].COMPONENT),
    hasNext: computed(() => state.tabIndex + 1 !== INTEGRATIONS[state.integration].length
  });  function nextTab() {
    state.tabIndex++;
  }  function startImport() {
    // Do what is needed
  }  return { state, nextTab, startImport };
}

应该避免使用 if 语句的原因还有很多，但这将是另一篇文章！

命名约定

从一开始，命名事物就一直是个大问题。是的，你可能可以命名一个变量外星人、巫师，或者有一个 do_things 函数，但是，虽然它会在那一刻完成工作，但对于下一个人，甚至你自己来说，它也会变得困难 100 倍将来，了解变量和函数的用途。您将花费宝贵的工程时间回溯代码以了解正在发生的事情，而不是直接修复错误或引入新功能。

在命名变量和函数时，我遵循的一条规则是使用任何利益相关者都清楚的词语，以便很好地理解变量或函数的用途。

注释

就像 if 语句一样，注释是最好从代码中省略的内容之一。它是否有助于程序员更好地理解代码？这得看情况。看看下面的代码块：

// start count
let count = 0;

此评论是否包含仅通过阅读代码无法告知的信息？一点也不！这样的注释具有破坏性，需要程序员不断地切换上下文，这是有代价的。主要的经验法则是编写不需要你用简单的英语解释它的作用的代码。这也意味着拥有一个只完成一项工作的功能，这与正确命名事物密切相关。拥有一个名为 getThirdPartySalesData 的函数应该可以让我们了解我们可以从这个函数中得到什么，因此根本不需要注释！话虽如此，了解函数所需的参数是什么可能很棘手，在这种情况下，更棘手的是知道我们可以在返回的对象中期望哪些属性。对于此类情况，以及出于文档的目的，我们可以使用 JSDoc、PHPDoc 等。

JSDoc 是 JavaScript 的文档生成器，它分析代码并自动生成包含所有文档的静态页面。这在与大型团队合作时非常棒，但我们追求的是它与 IDE / 代码编辑器的集成，通过自动完成建议使编程变得更加容易。

更多APP/小程序/网站源码资源，请搜索"七爪网源码交易平台"！