前端开发札记

2016-05-28

最近的一些开发过程遇到的东西或者看到的觉得需要记下来的关于javascript的技巧/代码。后期将对本文内容进行归类总结，并且汇编为专辑文章。

一、开发手记

js解析有不定项子集的json数组

function jsonToHtml(json){
    var res;
	for(var key in json){
		if(typeof json[key] == "object"){
			data = jsonToHtml(json[key]);
			res += data;
		}else{
			res += json[key];
		}
	}
	return res;
}

常用时间戳timestamp格式化

const timeFormat = (t,format='Y-M-D-hm') => {
    if (!t || t == '') return t;
    let n = new Date();
    n.setTime(t);
    let y = n.getFullYear(); //year
    let m = n.getMonth() + 1; //month
    let d = n.getDate(); //day
    let h = n.getHours(); //hour
    let min = n.getMinutes(); //minutes
    if (m < 10) m = '0' + m;
    if (d < 10) d = '0' + d;
    if (h < 10) h = '0' + h;
    if (min < 10) min = '0' + min;
    let res = '';
    switch(format) {
        case "Y-M-D-hm":
            res = y + '年' + m + '月' + d + '日' + ' ' + h + ':' + min;
            break;
        case "y/m/d-hm":
            res = y + '/' + m + '/' + d + ' ' + h + ':' + min;
            break;
        case "y/m/d":
            res = y + '/' + m + '/' + d;
            break;
        default:
            break;
    }
    return res;
}

常用货币格式化

（eg: 123,123,123，121.55）

var n = parseFloat(45412345678.55); /*转化为浮点型*/
   var l = n.toString().split('.')[0]; /*整数部分*/
   var s = n.toString().split('.')[1] || '00'; /*小数部分*/
   var r,x = '';
   var w = Math.floor(parseInt(l.length/3)); /*取商*/
   var y = parseInt(l.length%3);  /*取余*/
   if (y == 0) {w = w-1;}
   for (var i = 0; i < w; i++) {
	r = ',' + l.substring(l.length-3,l.length);
	l = l.substring(0,l.length-3);
	x = r + x; /*拼接*/
   }
   x = l + x + '.' + s;

更优雅的做法应该是这样的：

const currency = (num) => {
    /* 格式化为：123,456,789 */
    if (!num || isNaN(num)) {
        return ''
    }
    const str = num.toString()
    let l = Math.ceil(str.length/3), n = []
    for (let i = 0; i < l; i++) {
        let end = str.length-3*i,start = Math.max(str.length-3*(i+1),0)
        n.unshift(str.substring(start,end))
    }
    return n.join(',')
}

演示：

密码类型输入处理

<input type="password" onkeyup="value=value.replace(/[\W]/g,'')">
<!-- 过滤密码中非数字、英文字母外的字符 -->
<!-- 实际上，减号还是可以输入的 -->

演示：

移除HTML5 input type=number 的上下小箭头

<!-- 针对chrome -->
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
	-webkit-appearance: none !important;
	margin: 0;
}
<!-- 针对Firefox -->
input[type="number"]{-moz-appearance:textfield;}

修复input[type=file]在EDGE下无限弹出的问题

修复弹出层用`animate`动画，导致内层文字抖动

backface-visibility: hidden;
transform-style: preserve-3d;

二、新手起手式

移动端WEBAPP开发

为了模仿顶部通栏和底部工具按钮，常用到 position: absolute; 来进行顶部和底部栏的定位，例如设置底部工具栏，则web结构如下：

<div class="topbar">我是顶部栏</div>
<div class="mainbody">我是主要内容content</div>
<div class="foobar">我是底部栏</div>

主要样式：

.topbar{
	height: 30px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.mainbody{
	margin-top: 30px;
	margin-bottom: 45px;
	position: relative;
}
.foobar{
	height: 45px;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

H5兼容低版本浏览器

为了兼容低版本浏览器下的H5渲染，常需要在head加入这样一段代码：

<!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->

同时可能引入normalize.css进行全局样式的初始化。

文件下载解决方法

【设置H5属性download=XXX】

<a href="path" download="file.name">Download</a>
<!-- 此处的path必须与站点处于同个IP或域名下，否则执行浏览器默认行为，而不是下载行为。 -->
<!-- file.name只需填写文件名称，不需要添加后缀。 -->

兼容IE的单行文字两端对齐

非flex布局下，在编写HTML文字对齐样式时，兼容IE是个难题，以下是其中一个解决单行文字两端对齐的样式：

justify-block {
	text-align-last: justify; /* webkit 内核 */
	-moz-text-align-last: justify; /* Firefox */
	-ms-text-align-last: justify;/* IE 8+ 支持 */
	text-justify: inter-ideograph;/* IE 私有属性 */
}

JS运算符优先级序列表（从高到低）

运算符	描述
`.[]()`	字段访问、数组下标、函数调用以及表达式分组
`++---~!delete new typeof void`	一元运算符、返回数据类型、对象创建、未定义值
`* / %`	乘法、除法、取模
`+ - +`	加法、减法、字符串连接
`<< >> >>>`	移位
`< <= > >= instanceof`	小于、小于等于、大于、大于等于、instanceof
`== != === !==`	等于、不等于、严格相等、非严格相等
`&`	按位与
`^`	按位异或
`\|`	按位或
`&&`	逻辑与
`\|\|`	逻辑或
`?:`	条件
`= oP=`	赋值、运算赋值
`,`	多重求值