前端代码编写规范及es6常用语法
- 命名规范
文件夹名称，文件名称，组件名称，统一使用大驼峰或者 小横线方式命名；
组件文件名: list-item.vue.或者ListItem.vue;
基础的无状态的通用组件加V Base App前缀
BaseButton AppButton 在html中 <base-button> 或者 <BaseButton>
url路径名：小横线方式命名如：https://www.antdv.com/docs/vue/introduce-cn/
- data数据写法注意，小驼峰命名，用函数返回对象，如果直接用对象会导致复用时，公同一个data数据，引起所以组件的改变；实例：
data() {
return{ }
}
- 组件prop使用，定义要详细，前两种少用，推荐第三种用法
props: [ 'dataSource'];
props: {
dataSource: Array
}
props: {
dataSource: {
type: Array,
required: true,
default:()=>[]
},
collected: {
type: Boolean,
default: ()=> false
}
}
- 使用v-for循环渲染元素时，必须要有key，且key值唯一；v-for和v-if不要同时用在同一个元素内（v-for比v-if有更高的优先级）
<div v-if="show">
<div
v-for="item in arr"
:key="item.id"
>
</div>
</div>
- 元素有多个 attribute 应该分多行撰写，每个 attribute 单独一行；例如
<!--表单区域-->
<a-drawer
title="操作"
:width="650"
:visible="visible"
:body-style="{ paddingBottom:'80px'}"
destroyonClose
@close="onClose"
>
<jzsb-form
:zd-list="zdList"
:detail="detail"
:spsb="spsb"
:zfdz="zfdz"
:groups="groups"
@handleEnter="handleEnter"
@handleEnterZfdz="handleEnterZfdz"
@handleAddZfdz="handleAddZfdz"
@onClose="onClose"
/>
</a-drawer>
- 指令缩写
指令缩写
: => v-bihd: (.sync修饰符)
@ => v-on: ( .stop .prevent 修饰符)
# => v-slot:
vue路由机制（动态路由，静态路由）
前端组件的编写及使用
- vue组件基本构成
<template>
<div>
<div>内容</div>
</div>
</template>
<script>
export default {
name: 'TestDemo ' ,
components : {
},
mixin: [],
props: {
propName: {
type: Number,
default:()=> 0
}
},
data() {
return {}
},
computed: {
},
watch: {
data (newValue, oldvalue) {
}
},
created: {
},
mounted: {
},
methods: {
}
}
</script>
<style scoped>
</style>
- template中html，动态给class和stype赋值；
<template>
<div>
<div
:class="{'active': showClass}"
:style="styleData"
>内容</div>
</div>
</template>
<script>
export default {
name: 'TestDemo' ,
components : {
},
mixin: [],
props: {
propName: {
type: Number,
default:()=> 0
}
},
data() {
return {
showClass: true,
styleData:{
height: '100px'
}
}
},
computed: {
},
watch: {
data (newValue, oldvalue) {
}
},
created: {
},
mounted: {
},
methods: {
}
}
</script>
<style scoped>
</style>
- slot插槽用法和具名
<!--子组件-->
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'TestDemo'
}
</script>
<!--父组件-->
<template>
<div>
<text-demo>
<div>123456</div>
</text-demo>
</div>
</template>
<!--子组件-->
<template>
<div>
<slot name="name"></slot>
<slot name="sex"></slot>
</div>
</template>
<!--父组件-->
<template>
<div>
<text-demo>
<div slot="name">张三</div>
<div slot="sex">男</div>
</text-demo>
</div>
</template>
- ref的使用
<template>
<div>
<test-demo ref="test"></test-demo>
</div>
</template>
<script>
export default {
name: '父组件' ,
created {
// 调用test-demo的组件中loadDate(),
this.$refs = loadData();
},
mounted {
},
methods: {
}
}
</script>
- style中scoped含义 /deep/ .class 的含义和用法,把 /deep/ 换成 >>> 也可以达到同样的效果
<style scoped lang="less">
.list {
position: relative;
width: 100%;
min-height: calc( 100vh - 80px);
background: #FFFFFF;
margin-left: 10px;
padding-right: 10px;
}
/deep/ .ant-card-body {
padding: 12px 12px 12px 0;
text-align: right;
}
</style>
es6常用语法
- 使用let 和 const 代替var来声明变量和常量；
- 变量的结构赋值和扩展运算符 （…）
let [a, b, c] = [1,2,3](变量位置相同)
let {a, b, c} = (b: '1', c: '2', a: '3'} (变量和属性名相同)
let {a, a: (b}} = {a: {b: '123'}}
a => {(b: '123'}
b => '123'
用扩展运算符赋值
const obj = {fb: '1', c: '2', a: '3'}
const temp = {...obj， d: '4'};
temp => {(b: '1', c: '2', a: '3',d: '4'}
模板字符串
const name = 'LC' ;
const str = "我的名字叫:" + name; => `我的名字叫: ${name} ;
函数的扩展
参数可赋初始值
function fun(x = 1, y){}
箭头函数:(res) =>{} --》 function(res){}
(res)=>(res + 1) --》 function(res) { return: res + 1}
箭头函数不会改变this的指向
循环遍历函数
arr.map(item =>())有返回值
arr.forEach(item => {
})
对象的扩展
object.is(a,b) 比较两个值是否相等类似 ===
Object.assign({}, {a: '1'},{b: '1'})合并对象
Promise对象，异步编程
// 常用场景，同时发起多个异步请求，监测所有请求都完毕；
const p1 = new Promise((resole, reject => {
// ...async code
}));
const p2 = new Promise((resole, reject =>{
// ...async code
}));
const p3 = new Promise((resole, reject => {
// ...async code
}));
Promise.a11([p1,p2,p3]).then(res).catch(err)
Js中可能导致内存泄露的地方
::: tip 关于js内存管理机制
像C语言这样的底层语言一般都有底层的内存管理接口，比如 malloc()和free()。相反，JavaScript是在创建变量（对象，字符串等）时自动进行了分配内存，并且在不使用它们时“自动”释放。 释放的过程称为垃圾回收。
:::
- 意外的全局变量；局部变量在不用的时候会自动回收，而全局变量会一直占用内存；当有未定义的变量时，因为JavaScript 处理未定义变量的方式比较宽松：未定义的变量会在全局对象创建一个新变量。在浏览器中，全局对象是 window ；如
function foo(arg) {
bar = 'this is a hidden global variable';
}
// 真相是:
function foo(arg) {
window.bar = 'this is an explicit global variable';
}
- 计时器，在不需要时要手动停止；如：
// 创建计时器
activated () {
console.log('activated');
timer = setInterval(()=>{
this.loadData();
}, 30000);
},
// 消除计时器
deactivated() {
console.log('deactivated');
clearInterval(timer);
}
- 脱离DOM的引用；当把创建DOM存到对象或者数组中时，此时DOM的引用存在两个地方，一个是DOM树，一个是对象或者数组中；如：
- 添加事件监听(addEventListener())，当页面销毁或不需要时一定要手动移除事件的监听(removeEventListener())；如：
- 转换url的createObjectURL(data)方法，url用完后要手动调用revokeObjectURL(url)，否则会导致data占用的内存不能释放；如：
