新航路师徒学院

 找回密码
 立即注册
搜索
查看: 608|回复: 0

不为人知的Web前端黑科技(黑科技+Web前端)

[复制链接]

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
发表于 2016-10-25 19:31:35 | 显示全部楼层 |阅读模式
原文出处:新航路师徒学院  
黑科技是什么?
小米5终于正式发布了,搭载十余项黑科技,小米更是打出了“探索黑科技,为发烧而生”的口号,看上去是那样的高大上。
新航路师徒学院打出:“黑科技+Web前端”
那么Web前端黑科技倒底有哪些?我们列举几个:

一、很多Web前端针对数据为空的处理纠结过,有一部分前端是不知道如何判断:
  1. var obj = { 0 : "a", 1 : "b", 2 : "c"};
  2. var obj = {};
复制代码
喽的方法:
  1. JSON.stringify(data).length
复制代码
稍高端点方法:
  1. $.isEmptyObject( obj )
复制代码
然而,黑科技Web前端是这样的:
  1. Object.keys(obj)
复制代码
对,使用原生Js处理,没见过?上干货
  1. Object.keys(obj) 返回一个数组  通过数组的长度来轻松实现
复制代码
二、默认样式重置
新手都这么干:
  1. *{margin:0;padding:0}
复制代码
有些经验的:
  1. body,div,p,h1,ul,ol,li,td…….strong,span {margin:0;padding:0}
复制代码
黑科技Web前端:
  1. body, h1, h2, h3, h4, h5, h6, blockquote, ol, ul, dl, dd, p, textarea, input, select, option, form {

  2.   <i>margin</i>: 0;

  3. }

  4. ol, ul, textarea, input, option, th, td {

  5.   <i>padding</i>: 0;

  6. }
复制代码
对就这么少,不相信?
  1. div是没有内外边距的,其他也有少标签是没有的。
复制代码
三、定时器的使用:
要实现一个轮播或每隔一段时间要做一件事情,很多人都会想到这个
  1. var <i>index </i>= 0;

  2. setInterval(function(){

  3.     <i>index</i>++;

  4.     <i>console</i>.log(<i>index</i>)

  5. },1000)
复制代码
黑科技Web前端是这样的
  1. var <i>index </i>= 0 ;

  2. setTimeout(function(){

  3.     <i>index</i>++;

  4.     <i>console</i>.log(<i>index</i>);

  5.     setTimeout(arguments.callee,1000)

  6. },1000)
复制代码
为什么要这么使用呢?
  1. setInterval时间长了就会有误差的,如果你试过的话。
  2. 所以使用setTimeout、arguments.callee 来实现
复制代码
四、字符串转换Json的方法
有那么一部分人这么用:
  1. <blockquote>function evalJson(str){
复制代码
还有一部分人这么用:
  1. <blockquote>function isJson(str){
复制代码
还有这么用:
  1. $.parseJSON(str);
复制代码
而黑科技+Web前端是这么使用的:
  1. <blockquote>function newJson(str){
复制代码

....
还有很多这方面的黑科技Web前端技术。
性能、体验、优化、技巧等等。
Web前端的黑科技持术还是非常多的。
。。。



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-9-18 23:26 , Processed in 0.136995 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表