凡事就怕较真,较真必有成长,开始~
1.保存接口获取输入框数据
let obj = {
name : " " ,
age: " " ,
sex: " " ,
height: " " ,
} ;
$.each( obj , function ( key , value) {
obj [ key ] = $('input[name= ' + key + ' ] ').val() ;
}) ;
console.log(obj) ; // {name: "张三", age: "13", sex: "男", height: "100cm"}
多余的obj属性获取到是undefined,delete掉或者重新赋值,看实际情况。我在项目用的handlebars,直接tpl模板传入数据,数据回显相当舒服(和后台要接口文档的重要性o(╯□╰)o)。
2.数据里面有" ’ "单引号 在个别特殊场景JSON.stringify会有问题。
<body>
<div id="test"></div>
</body>
<script>
let data = {} ;
data.content = " 你好 ' ' 你好 '你好 " ;
data.age = 13 ;
data = JSON.stringify(data) ;
let html = ' <p data-p = \ ' ' + data + ' \ '> 你是个好人</p> ' ;
$('#test').html(html) ;
console.log( $('#test p').attr('data-p') ) ; // {"content":"你好
</script>
这种可能用户输入的内容里面有两个单引号,也可能存在XSS注入的情况,获取数据都会有问题。
之前在项目用的一个解决方法就是在JSON.stringify之前把单引号替换成转义符"’"。
data.content = data.content.replace( /(')/g , " ' " ) ;
let objType = JSON.parse( $('#test p').attr('data-p')) ;
console.log(objType ) ; // {content: "你好''你好'你好", age: 13}
Object.prototype.toString.call(objType ) ; // [object Object]
这样获取以及渲染在DOM都一切正常。
3.判断数据类型
Object.prototype.toString.call() ;
Object.prototype.toString.call('1') ; // [object String]
Object.prototype.toString.call(1) ; // [object Number]
4.时间戳转时间
function tranformDate ( time ) {
var timeDa = new Date ( time + 8*60*60*1000 ).toJSON () ;
return timeDa.split ( 'T' ) [0] + ' ' +timeDa.split ( 'T' ) [1].split ( '.' )[0].split ( 'Z' )[0] ;
};
tranformDate ( 1576746501000 ) ; // "2019-12-19 17:08:21"
由于我所在公司的后端比较懒(哈哈)返回前端的是时间戳,写一个时间戳转时间的函数。
5.css加载是由上而下,从右至左,防止FOUC应该尽量避免用@import引入,建议在head标签里用link加载css,兼容性也好。说到加载请求,我一般不太喜欢用CSS sprites,虽然可以减少请求次数,但是在http2多路复用下,它的优势已经小了很多。伴随着管理麻烦,更新一个图标就要更新整张图片。
6.Chrome浏览器让字体小于默认最小的12px。
设置transform: scale( );// transform: scale( 0.5 , 0.5 );只有Chrome有最小12px限制,ie、Firefox 最小
都可以为0。
没有什么条理,想到什么写什么,以上~