菜园前端

Appearance

笔记规范 ​

没有规矩不成方圆，一切事情都要有规范。整理文档也是如此。

核心思想 ​

  1. 统一性

  2. 合理管理内容所属分类

  3. 避免内容重复

  4. 内容价值审查

  5. 层次分明、结构清晰

  6. 一目了然、一看就懂

如何提升一篇文章的质量？ ​

  1. 例如这是一款什么软件？要有相应的介绍、安装、使用、扩展等模块进行深入描述。

  2. 文章模块之间不能大幅度跳跃，例如刚介绍完这款软件，就直接讲解高级部分如何开发一款插件。

  3. 文章应该设置阅读水平要求，并不是所有人都看得懂，要加上相关 "降级" 描述。

  4. 为什么要使用这款软件，它对于使用者带来了什么优势？或者吸引人的地方。

  5. 文章的阅读群体是谁？例如是针对前端，那么就不应该讲解后端相关的内容。

  6. 文章不应该由纯文字组成，应该搭配图片或者其他图形、表格等。

  7. 文章的字数应该大于 1000 字，字数太少很难展开细节深入描述。

  8. 文章的字数应该小于 2000 字，字数太多会让人看的犯困，应该拆分为多个模块进行讲解。

具体规范要求 ​

英文单词或一组数字左右需要有 1 个空格 ​

正确示例

或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来像这样。
或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来像这样。

错误示例

或者如果你通过Babel 和 webpack使用ES2015 模块，那么代码看起来像这样。
或者如果你通过Babel 和 webpack使用ES2015 模块，那么代码看起来像这样。

一段话的结尾需要有句号 ​

正确示例

对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。
对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。

错误示例

对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象
对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象

行高调整为两倍间距 ​

正确示例

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用其中一个组件了，它仍然会被包含在最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用其中一个组件了，它仍然会被包含在最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

错误示例

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用其中一个组件了，它仍然会被包含在最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用其中一个组件了，它仍然会被包含在最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

不要有多余的空格 ​

正确示例

在字符串模板或单文件组件中定义组件时，定义组件名的方式有两种。
在字符串模板或单文件组件中定义组件时，定义组件名的方式有两种。

错误示例

  在字符串模板或单 文件组件中定义组件 时，定义组件 名的方式有两种。
  在字符串模板或单 文件组件中定义组件 时，定义组件 名的方式有两种。

不要挤在一堆密密麻麻，要有呼吸空间 ​

正确示例

查看该沙盒以调试绑定了组件注册名的完整代码，或在另一个沙盒中查看绑定了组件选项对象的示例。

你也可以使用 is attribute 来创建常规的 HTML 元素。

到目前为止，关于动态组件你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把动态 & 异步组件读完。
查看该沙盒以调试绑定了组件注册名的完整代码，或在另一个沙盒中查看绑定了组件选项对象的示例。

你也可以使用 is attribute 来创建常规的 HTML 元素。

到目前为止，关于动态组件你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把动态 & 异步组件读完。

错误示例

查看该沙盒以调试绑定了组件注册名的完整代码，或在另一个沙盒中查看绑定了组件选项对象的示例。
你也可以使用 is attribute 来创建常规的 HTML 元素。
到目前为止，关于动态组件你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把动态 & 异步组件读完。
查看该沙盒以调试绑定了组件注册名的完整代码，或在另一个沙盒中查看绑定了组件选项对象的示例。
你也可以使用 is attribute 来创建常规的 HTML 元素。
到目前为止，关于动态组件你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把动态 & 异步组件读完。

代码需要用容器包裹 ​

正确示例

javascript
let msg = 'Hello function'
let msg = 'Hello function'

错误示例

let msg = 'Hello function'

代码需要统一风格，在外部格式化后再拷贝进来 ​

如不清楚如何在 VS Code 中配置代码格式化，请查看 Prettier - Code formatter

正确示例

Vue.createApp({
    render() {
        returnVue.h('div', {}, this.hi);
    },
});
Vue.createApp({
    render() {
        returnVue.h('div', {}, this.hi);
    },
});

错误示例

   Vue.createApp({
      render() { returnVue.h('div', {}, this.hi);
    },
});
   Vue.createApp({
      render() { returnVue.h('div', {}, this.hi);
    },
});

简短代码或包含特殊字符 < ~ . / , " ' 等都需要用行内代码块包裹 ​

正确示例

index.html

错误示例

index.html

有序/无序列表、标题部分结尾处不需要句号 ​

正确示例

  • 用来定义文档或者是某一个段落的头部

错误示例

  • 用来定义文档或者是某一个段落的头部。

尽量使用英文状态下的单/双引号 ​

正确示例

把数组分成两半，在递归地对子数组进行 "分" 操作，直到分成一个个单独的数。
把数组分成两半，在递归地对子数组进行 "分" 操作，直到分成一个个单独的数。

错误示例

把数组分成两半，在递归地对子数组进行 “分” 操作，直到分成一个个单独的数。
把数组分成两半，在递归地对子数组进行 “分” 操作，直到分成一个个单独的数。

更新时间: