当前位置:首页 > 技术分析 > 正文内容

成为一个优秀的开发人员,从写文档开始

ruisui882周前 (04-11)技术分析12

在移动、Web 和桌面应用或 JavaScript 库的开发领域中,文档在应用的成功之路上扮演着非常重要的角色。但如果你曾经编写过文档,就肯定会同意我的看法:编写文档是开发人员最不喜欢做的事情之一。

与编写代码(这是开发人员的本职工作)不同,文档必须能被所有人轻松理解(这里的所有人不仅是指开发人员,也包括缺乏技术背景的一般人)。从技术上讲,我们必须将机器语言(代码)翻译成普通人都可以理解的语言,这种事情说起来容易做起来却很难。

尽管这件事情可能会给你带来很大的负担,但是编写文档是很重要的环节,并且可以为你的用户、你的同事,尤其是你自己带来诸多好处。

好的文档可以帮助用户

显然,文档可以帮助读者 理解代码的工作原理。但是许多开发人员有着错误的认识,那就是他们认为软件的用户都是编程高手。在这样的假设下,他们编写的文档可能只是薄薄的几页纸,从头到尾跳过了文档本应该包含的许多要点。如果你精通编程语言,那么遇到问题还可以自己找出解决办法。如果你并没有那么专业,那么看文档时很容易就会迷失方向。

供用户使用的文档通常包括使用实践或“操作方法”的内容。为一般用户创建文档时,经验法则是 文档应该清晰直观。使用普通人也容易理解的词汇要比使用技术术语或专业习语更合适。软件的实际应用示例也是非常受用户欢迎的。

良好的文档布局设计还可以真正帮助用户轻松浏览文档的各部分内容。在这方面一些很好的例子包括 Bootstrap 的文档,和 WordPress 的“WordPress 的第一步”文档,它们也都是我最喜欢的榜样。

好的文档可以帮助其他开发人员

每位开发人员都有自己的代码风格。但在团队合作中,我们经常需要与其他同事共享代码。因此大家有必要 达成共识,形成一套标准,以使所有人保持一致。精心编写的书面文档会是团队必要的参考。

但与最终用户文档不同,这类文档通常会描述代码命名约定之类的技术流程,展示开发人员应如何构造特定页面,以及 API 如何工作,外加一些代码示例。通常,我们还必须在代码内编写文档(称为注释),以描述所注释代码的作用。

此外,如果以后有新成员加入团队,这类文档可以是培训他们的一种省时有效的方法,这样你就不必为新人一对一地讲解代码了。

好的文档也可以帮助开发人员自己

关于编程的有趣之处在于,有时 甚至开发人员自己也不理解他们编写的代码。尤其是当开发人员几个月甚至几年都没再碰过自己写过的代码时,他们突然回来看自己的作品会感到十分陌生。

如果出于某种原因,开发人员需要重新审阅以前的代码,他们往往会怀疑自己在编写这些代码时到底在想些什么。别惊讶:我以前就曾遇到过这种情况。在这种情况下,我肯定会希望自己给代码写下了良好的文档

给你的代码写好文档的话,你就能够快速深入到代码的底层,不会有那么多疑惑,从而节省许多时间。省下来的这些时间可以拿来完成更改工作。

好的文档有哪些特性?

有几个因素可以帮助你构建出良好的文档。其中一些最重要的因素如下:

1. 永远不要假设

不要以为你知道的东西用户也知道,或者他们很清楚自己应该了解的内容。无论用户的熟练程度如何,总是 从头开始解释各种事情 是更好的选择。

例如,如果你构建了一个 jQuery 插件,则可能会从 SlickJS 的文档中汲取灵感。它介绍了如何构造 HTML、放置 CSS 和 JavaScript 的位置、从头开始讲解如何初始化 jQuery 插件,甚至还展示了添加所有这些内容后的完整最终标记,所有东西都写得清清楚楚。

最重要的是,文档应该是根据用户而不是开发人员的思考过程来编写的。以这种方式处理你自己的文档,将为你提供一个更好的视角来组织自己的代码。

2. 遵守标准

在添加与代码内联的文档时,请使用 代码编程语言所期望的标准。 我们应该总是解释每个函数、变量以及函数返回的值都是什么意思。下面是一个很好的 PHP 内联文档示例。

/**
 * Adds custom classes to the array of body classes.
 *
 * @param array $classes Classes for the body element.
 * @return array
 */
function body_classes( $classes ) {
  // Adds a class of group-blog to blogs with more than 1 published author.
  if ( is_multi_author() ) {
    $classes[] = 'group-blog';
  }

  return $classes;
}
add_filter( 'body_class', 'body_classes' );

以下是使用 PHP、JavaScript 和 CSS 的最佳实践来格式化内联文档的一些参考:

  • PHP:WordPress 的 PHP 文档标准
  • JavaScript: UseJSDoc
  • CSS: CSSDoc

如果你使用的是 SublimeText ,我建议你安装 DocBlockr,它将用内联文档巧妙地预填充你的代码。

3. 图形元素

文档中应该多用图形元素,它们比文本更直观。这些媒介很有用,特别是当你使用图形界面构建软件时。你可以添加指向性元素,例如箭头、圆圈或 任何可以帮助用户直观地弄清楚如何完成这些步骤的元素

以下是 Tower 应用中的示例,你可以从中汲取灵感。它们很好地解释了如何用优雅的方式来做版本控制工作,比纯文本命令行更容易理解。

4. 分区

你可以考虑将文档中的一些内容包装在项目符号列表和表格中,因为这样可以让用户更容易浏览较长的内容,更方便快速定位。

添加目录,并将文档拆分为一些容易理解的部分,同时要让各个部分与接下来的内容保持关联。内容应该简短明了。以下是 Facebook 中一份组织良好的文档示例。

我们可以点击目录元素,直接跳转到对应内容。

5. 修订和更新

最后,文档写好后要仔细查看文档中是否有错误,并在必要时,或在产品、软件或库发生重大更改时修订文档。如果不随产品一起定期更新,那么你的文档对任何人都是没用的。

引文原文

The Importance of Documentation for Web Developers

关注我并转发此篇文章,私信我“领取资料”,即可免费获得InfoQ价值4999元迷你书,点击文末「了解更多」,即可移步InfoQ官网,获取最新资讯~

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3441.html

标签: js文档
分享给朋友:

“成为一个优秀的开发人员,从写文档开始” 的相关文章

「图解」父子组件通过 props 进行数据交互的方法

1.组件化开发,经常有这样的一个场景,就是父组件通过 Ajax 获取数据,传递给子组件,如何通过 props 进行数据交互来实现,便是本图解的重点。2.代码的结构3.具体代码 ①在父组件 data 中存放数据 ms。 ②将父组件 data 中的数据 ms 绑定到子组件中的属性 ms。 ③子组件在 p...

Git 分支管理策略汇总

最近,团队新入职了一些小伙伴,在开发过程中,他们问我 Git 分支是如何管理的,以及应该怎么提交代码?我大概说了一些规则,但仔细想来,好像也并没有形成一个清晰规范的流程。所以查了一些资料,总结出下面这篇文章,一共包含四种常见的分支管理策略,分享给大家。Git flow在这种模式下,主要维护了两类分支...

JavaScript数组操作:掌握常用方法,提升开发效率

JavaScript数组操作:从增删改查到高级应用本文深入解析JavaScript中常用的数组方法,包括push、unshift、pop、shift、map、filter、reverse、at 和 slice。通过详细的例子和应用场景,帮助开发者快速掌握这些方法,提升代码效率和可读性。开篇点题作为J...

关于Vue页面跳转传参,参数不同, 但页面只获取参数一次的问题

#头条创作挑战赛#1.问题描述问题描述: element 展示表格(页面A),点击表格的每一行的查看详情按钮,可以携带此行的信息参数跳转到另一个页面(页面B),但是从A页面到B页面,只有第一次跳转的时候B页面可以获取到A页面的参数,返回再次A->B ,B页面无法获取到参数。2.解决办法:方法一...

Vue进阶(二十六):详解router.push()

在Vue2.0路由跳转中,除了使用 <router-link> 声明式创建 a 标签来定义导航链接,还可以借助 router 的实例方法,通过编码式编写代码来实现。router.push(location)想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 hi...

vue父组件修改子组件的值(通过调用子组件的方法)

props只支持第一次加载这个组件的时候获取父组件的值,后续修改父组件的值得时候子组件并不会动态的更改。然而我们想要通过父组件修改子组件的值要怎么做呢?可以通过ref的方式调用子组件的方法改变子组件的值。子组件<template><div><span>{{data...