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

Posted 2021-03-26 ai469

我的工程实践课题是《物联网网关智能分析引擎》，我所做的是前端开发。基于此，我对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）。