分析一套源代码的代码规范和风格并讨论如何改进优化代码

2019-10-11 19:30 AI469 阅读(155) 评论(0) 收藏举报

我的工程实践课题是《物联网网关智能分析引擎》，我所做的是前端开发。基于此，我对Vue.js目录结构进行分析。Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。

1.Vue.js目录结构

结构图如下所示：

build：项目构建(webpack)相关代码。
config：配置目录，包括端口号等。我们初学可以使用默认的。
node_modules：npm 加载的项目依赖模块。
src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。
static：静态资源目录，如图片、字体等。
test：初始测试目录，可删除。
.xxxx文件：这些是一些配置文件，包括语法配置，git配置等。
index.html：首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json：项目配置文件。
README.md：项目的说明文档，markdown 格式。

2.Vue.js的常用指令

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

Vue.js提供了一些常用的内置指令，接下来我们将介绍以下几个内置指令：

v-if指令:条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法为：v-if="expression",expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。
v-show指令：v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。
v-else指令：可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。
v-for指令：v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：v-for="item in items"，其中items是一个数组，item是当前被遍历的数组元素。
v-bind指令：v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute）。

3.代码规范和风格的一般要求以及有悖于“代码的简洁、清晰、无歧义”的基本原则的做法及优化改进

3.1 组件名应该始终为多个单词，根组件App除外。这样做可以避免跟现有的以及未来的HTML元素相冲突。

正例：

export default{

name: 'TodoItem',

// ...

}

反例：

export default {

name: 'Todo',

// ...

}

3.2 组件中的data必须是一个函数，防止在组件复用的时候数据变动产生关联。当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。

正例：

// In a .vue file
export default {
 data () {
 return {
 foo: 'bar'
 }
 }
}
// 在一个 Vue 的根实例上直接使用对象是可以的， 因为只存在一个这样的实例。
new Vue({
 data: {
 foo: 'bar'
 }
})
反例：
export default {
 data: {
 foo: 'bar'
 }
}

3.3 prop的定义尽量详细，至少需要指定其类型。

正例：

props: {
 status: String
}
props: {
 status: {
 type: String,
 required: true,
 validator: function (value) {
 return [
 'syncing',
 'synced',
 'version-conflict',
 'error'
 ].indexOf(value) !== -1
 }
 }
}
反例：
props: ['status']

3.4 为v-for设置键值。总是用 key 配合 v-for，在组件上_总是_必须用 key 配合 v-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的对象固化 (object constancy)，也是一种好的做法。

正例：

<ul>
 <li
 v-for="todo in todos"
 :key="todo.id"
 >
 {{ todo.text }}
 </li>
</ul>
反例：
<ul>
 <li v-for="todo in todos">
 {{ todo.text }}
 </li>
</ul>
3.5  避免 v-if 和 v-for 用在一起。永远不要把 v-if 和 v-for 同时用在同一个元素上。
正例：
<ul v-if="shouldShowUsers">
 <li
 v-for="user in users"
 :key="user.id"
 >
 {{ user.name }}
 </li>
</ul>
反例：
<ul>
 <li
 v-for="user in users"
 v-if="shouldShowUsers"
 :key="user.id"
 >
 {{ user.name }}
 </li>
</ul>
3.6  为组件样式设置作用域。对于应用来说，顶级 App 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。
正例：
<template>
 <button class="c-Button c-Button--close">X</button>
</template>
<!-- 使用 BEM 约定 -->
<style>
.c-Button {
 border: none;
 border-radius: 2px;
}
.c-Button--close {
 background-color: red;
}
</style>
反例：
<template>
 <button class="btn btn-close">X</button>
</template>
 
<style>
.btn-close {
 background-color: red;
}
</style>
<template>
 <button class="button button-close">X</button>
</template>
<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
 border: none;
 border-radius: 2px;
}
.button-close {
 background-color: red;
}
</style>
4.同类编程语言或项目在代码规范和风格的一般要求文件、资源命名
以可读性而言，中划线用来分隔文件名。
确保文件命名总是以字母开头而不是数字。
特殊含义的文件，需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css），抑或一串前缀（比如 all.main.min.css）。使用点分隔符来区分这些在文件名中带有清晰意义的元数据。
文本缩进:一次缩进4个空格。
代码检查
对于前端JavaScript这种比较宽松自由的编程语言来说，严格遵循编码规范和格式化风格指南极为重要。前端开发人员需严格遵循开发规范，并且使用自动代码检查工具（如JSHint）降低语法错误，确保代码正确执行。JSHint是一款检查JS代码规范与否的工具，用来检查JS代码的规范性。它提供了配置的方法，来检查不符合开发规范的错误。
黄金定律
永远遵循同一套编码规范 -- 可以是这里列出的，也可以是你自己总结的。如果你发现本规范中有任何错误，敬请指正。
不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

刷新页面返回顶部

AI469