记录几个前端开发小方法。-CSDN博客

本文链接：https://blog.csdn.net/weixin_41724477/article/details/107760366

凡事就怕较真，较真必有成长，开始~

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 , " &#39; " ) ;

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。

没有什么条理，想到什么写什么，以上~