博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue 组件编码规范
阅读量:6543 次
发布时间:2019-06-24

本文共 1721 字,大约阅读时间需要 5 分钟。

一、为什么要有规范?

1. 自己、同事更容易阅读和理解2. 更好的利用开发工具的功能(高亮、格式化等功能)3. 更好的进行代码拆分复制代码

二、 我们可以做什么?

1. 始终基于模块的方式来构建你的应用,每个模块专注于解决一个问题,做到独立、可复用、微小(不超过100行)、可测试。2. 组件命名需要遵循以下规则:    -组件名为多个有意义单词    -简短(使用连字符分割单词)    3. 组件表达式简单化      (1)复杂表达式存在的问题        -表达式功能强大但也存在风险        -复杂的行内表达式阅读困难        -行内表达式无法提取公用,导致重复编码        -IDE无法识别且不能自动补全    (2)如何避免        -尽量使用method或者computed属性代替其功能        4. props尽量传递原始类型的数据    -使用原始类型可以使得组件更接近于HTML5原生元素    -其他开发人员可以更好地理解每一个prop的含义和作用    -复杂的对象使得我们不能够清楚的知道哪些属性和方法被组件使用,使得代码难以重构和维护    组件的每一个属性定义一个props,并且使用函数和原始类型的值    ```        
``` 5. 为每一个props提供验证 (1)验证props可以保证你的组件可用性,即使使用者未按照你的想法使用也不会出现问题-----为什么 (2)如何做 -给prop提供默认值 -使用type或者自定义validator验证传入的prop是否是你需要的如果不是会在控制台给使用者警告 6. 将this指向组件实例。切换不通上下文时确保this指向一个可用的component -尽量使用ES6进行编码(箭头函数保留this作用域) 7. 组件结构化(按照一定的结构组织使得组件易于理解可参考ELEMENTUI) -导出一个清晰有序的组件,使得代码阅读理解简单,有利于标准化 -按照首字母排序 data、computed、watch、method、mounted,使得属性易于查找 -使用单文件.vue格式组织代码 ```
``` 8. 合理的事件命名 -以动词或名词结尾(如crive-upload-success、upload-error) 9. 避免使用this.$parent 尽量不在子组件访问父组件上下文 -通过props传值给子组件 -子组件触发事件通知父组件 -通过props传递回调函数给子组件达到调用父组件方法的目的 10. 避免使用this.$ref VUE支持通过ref属性访问其他组件和HTML元素并能得到其相应的上下文 违背了组件组件独立的原则 当props和events难以实现功能时使用this.$ref或者需要操作DOM时而不是使用JQquery、document.getElement、docunment.queryElement11. 使用组件名作为样式作用域命名空间 -避免组件样式影响外部样式和被外部样式影响 -模块名、目录名、样式作用域名一致易于开发者理解 12. 完善README.md文件方便其他开发者使用13. 提供demo14. 对组件文件进行代码校验15. Mixins 封装可重用的代码,避免了重复。如果两个组件共享有相同的功能,则可以使用 mixin。通过 mixin,你可以专注于单个组件的任务和抽象的通用代码参考 vue风格指南复制代码

转载于:https://juejin.im/post/5cd53490f265da037d4fc7f4

你可能感兴趣的文章
inheritprototype原型继承封装及综合继承最简实例
查看>>
【磁耦隔离接口转换器】系列产品选型指南
查看>>
Apriori 关联算法学习
查看>>
MVPArms官方首发一键生成组件化,体验纯傻瓜式组件化开发
查看>>
Log4j_学习_00_资源帖
查看>>
制作iso镜像U盘自动化安装linux系统
查看>>
JSLint的使用
查看>>
命令行常用命令--软连接
查看>>
HTTP POST GET 本质区别详解
查看>>
MD5加密
查看>>
ant
查看>>
微信,想要说爱你,却没有那么容易!
查看>>
有关sqlite与sql
查看>>
MapXtreme 2005 学习心得 概述(一)
查看>>
php进一法取整、四舍五入取整、忽略小数等的取整数方法大全
查看>>
Hibernate的拦截器和监听器
查看>>
游戏中学习Bash技能
查看>>
ubuntu 12.04系统托盘不显示ibus输入法图标的解决方法
查看>>
WSDP
查看>>
Memory Management
查看>>