前端工作实践总结（一）

引言

    为什么要记录这些呢？其实算是一种踩坑总结吧，方便之后再回过头来看看，减少错误的重复率。毕竟现在在前端也写了不少代码了，不希望像之前一样，一个问题卡半天。

1.JavaScript的number类型

    不要收到了C语言的影响，误认为前端的js的数据类型将整型作为首选，其实JavaScript主要是double类型，因此2/3期望得到0之前需要先进行类型转化，或者直接将结果进行类型转换。

2.CSS样式属性——calc宽度计算失效

    错误示例如下：

width:calc(100%-20px);

正确的使用方法：

width:calc(100% - 20px);

解释：calc函数检测不是很灵敏，使用的时候需要使用必要的空格，否则可能会误认为是平台不兼容。

3.v-for中key的使用

    在uni-app中使用v-for的时候，比如有以下html代码：

<view class="msg-item" v-for="(item,index) in testList" :key="item.icon" @click="operate(item.icon)">
	<view :class="item.icon" :style="item.bgcolor"></view>
	<view class="msg-type">{{item.type}}</view>
	<view class="msg-num" v-if="item.num">
		<tui-tag  shape="circle">{{item.num}}</tui-tag>
	</view>
	<view class="arrow-right"></view>

另外有如下特使序列：

testList:[{
				icon:'icon-system',
				bgcolor:"background-color: #1aa034",
				type:"系统通知",
				num:1
			},{
				icon:'icon-system',
				bgcolor:"background-color: #1aa034",
				type:"私信通知",
				num:3
			},{
				icon:'icon-system',
				bgcolor:"background-color: #1aa034",
				type:"评论通知",
				num:5
			}]

    在将testList数据渲染到上述HTML代码中需要注意以下几点：
（1）:key中使用的下标依然要使用item.icon的形式（index除外），并且最好不要使用index作为唯一索引，原因请看这篇文章：Vue的v-for中:key取index存在的问题
（2）对于v-for，v-for所在的那个标签开始循环。实际开发中常常为了增强可读性和可移植性，我们常常会写个box将需要被循环内容装起来，最外层的盒子只是起到了封装的作用，实际对于内层代码没有影响。容易误结成v-for是从子级元素开始循环的。其实v-for在那个标签里面，意味着那个标签会被循环多次；
（3）在uni-app中，由于其封装行比较高，使用引入testList里面的内容时需要严格按照如下形式：

:class="item.icon"

不支持类似于微信小程序的拼接写法，导致的问题是有参函数的封装会出现问题，因为有参函数的参数传递需要进行拼接。针对这个问题可以利用中间桥梁函数 tempFunction 来处理：由于key的存在可以标记不同的函数，函数参数可以直接先传入到 tempFunction ，然后进一步传递到下级函数里面，也就是如下这个意思：

<view @click="tempFunction(item.key)"><view>

tempFunction:function(key){
	switch(key){
		case 'key1':this.fun1;break;
		case 'key2':this.fun2;break;
		case 'key3':this.fun3;break;
		default:console.log("函数内容的待开发");
	}
}