JSON简介以及用法汇总

2015/03/26 · JavaScript
· 1 评论 ·
JSON

原文出处:
韩子迟的博客   

函数防抖与函数节流

2018/06/22 · JavaScript
· 函数

原文出处: 司徒正美   

 

函数防抖与节流是很相似的概念,但它们的应用场景不太一样。

我们先从概念上深刻理解它们。

先说函数防抖,debounce。其概念其实是从机械开关和继电器的“去弹跳”(debounce)衍生
出来的,基本思路就是把多个信号合并为一个信号。

单反也有相似的概念,在拍照的时候手如果拿不稳晃的时候拍照一般手机是拍不出好照片的,因此智能手机是在你按一下时连续拍许多张,
能过合成手段,生成一张。翻译成JS就是,事件内的N个动作会变忽略,只有事件后由程序触发的动作只是有效。

实现思路如下,将目标方法(动作)包装在setTimeout里面,然后这个方法是一个事件的回调函数,如果这个回调一直执行,那么这些动作就一直不执行。为什么不执行呢,我们搞了一个clearTimeout,这样setTimeout里的方法就不会执行!
为什么要clearTimeout呢,我们就需要将事件内的连续动作删掉嘛!待到用户不触发这事件了。那么setTimeout就自然会执行这个方法。

那么这个方法用在什么地方呢,就是用于input输入框架的格式验证,假如只是验证都是字母也罢了,太简单了,不怎么耗性能,如果是验证是否身份证,这性能消耗大,你可以隔170ms才验证一次。这时就需要这个东西。或者你这个是自动完全,需要将已有的输入数据往后端拉一个列表,频繁的交互,后端肯定耗不起,这时也需要这个,如隔350ms。

JavaScript

function debounce(func, delay) { var timeout; return function(e) {
console.log(“清除”,timeout,e.target.value) clearTimeout(timeout); var
context = this, args = arguments console.log(“新的”,timeout,
e.target.value) timeout = setTimeout(function(){ console.log(“—-“)
func.apply(context, args); },delay) }; }; var validate =
debounce(function(e) { console.log(“change”, e.target.value, new Date-0)
}, 380); // 绑定监听
document.querySelector(“input”).addEventListener(‘input’, validate);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function debounce(func, delay) {
    var timeout;
    return function(e) {
        console.log("清除",timeout,e.target.value)
        clearTimeout(timeout);
        var context = this, args = arguments
        console.log("新的",timeout, e.target.value)
        timeout = setTimeout(function(){
          console.log("—-")
          func.apply(context, args);
        },delay)
    };
};
 
var validate = debounce(function(e) {
    console.log("change", e.target.value, new Date-0)
}, 380);
 
// 绑定监听
document.querySelector("input").addEventListener(‘input’, validate);

图片 1

这个保证了正常的用户每输入1,2个字符就能触发一次。如果用户是输入法狂魔,也可以狠制他每输入3~6个字符触发一次。

这个方法的重点是,它在用户不触发事件的时,才触发动作,并且抑制了本来在事件中要执行的动作。

其他应用场合:提交按钮的点击事件。

再看节流,throttle。节流的概念可以想象一下水坝,你建了水坝在河道中,不能让水流动不了,你只能让水流慢些。换言之,你不能让用户的方法都不执行。如果这样干,就是debounce了。为了让用户的方法在某个时间段内只执行一次,我们需要保存上次执行的时间点与定时器。

XHTML

<div id=’panel’ style=”background:red;width:200px;height:200px”>
</div>

1
2
3
<div id=’panel’ style="background:red;width:200px;height:200px">
 
</div>

---

JavaScript

function throttle(fn, threshhold) { var timeout var start = new Date;
var threshhold = threshhold || 160 return function () { var context =
this, args = arguments, curr = new Date() – 0
clearTimeout(timeout)//总是干掉事件回调 if(curr – start >=
threshhold){ console.log(“now”, curr, curr –
start)//注意这里相减的结果,都差不多是160左右 fn.apply(context, args)
//只执行一部分方法,这些方法是在某个时间段内执行一次 start = curr }else{
//让方法在脱离事件后也能执行一次 timeout = setTimeout(function(){
fn.apply(context, args) }, threshhold); } } } var mousemove =
throttle(function(e) { console.log(e.pageX, e.pageY) }); // 绑定监听
document.querySelector(“#panel”).addEventListener(‘mousemove’,
mousemove);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function throttle(fn, threshhold) {
var timeout
var start = new Date;
var threshhold = threshhold || 160
return function () {
 
var context = this, args = arguments, curr = new Date() – 0
clearTimeout(timeout)//总是干掉事件回调
if(curr – start >= threshhold){
     console.log("now", curr, curr – start)//注意这里相减的结果,都差不多是160左右
     fn.apply(context, args) //只执行一部分方法,这些方法是在某个时间段内执行一次
     start = curr
}else{
//让方法在脱离事件后也能执行一次
     timeout = setTimeout(function(){
        fn.apply(context, args)
     }, threshhold);
    }
  }
}
var mousemove = throttle(function(e) {
console.log(e.pageX, e.pageY)
});
 
// 绑定监听
document.querySelector("#panel").addEventListener(‘mousemove’, mousemove);

图片 2

函数节流会用在比input, keyup更频繁触发的事件中,如resize, touchmove,
mousemove, scroll。throttle
会强制函数以固定的速率执行。因此这个方法比较适合应用于动画相关的场景。

如果还是不能完全体会 debouncethrottle 的差异,可以到
这个页面
看一下两者可视化的比较。

图片 3

2 赞 3 收藏
评论

图片 4

一篇真正教会你开发移动端页面的文章(二)

2017/12/07 · 基础技术 ·
移动端

原文出处:
HcySunYang   

什么是JSON?

JavaScript 对象表示法(JavaScript Object Notation)。

JSON是一种轻量级的数据交换格式,某个JSON格式的文件内部譬如可以长成这样:

JavaScript

{ “name”: “hanzichi”, “sex”: “male” }

1
2
3
4
{
  "name": "hanzichi",
  "sex": "male"
}

看起来都是key-value的键值对,很像js的对象吧?没错,但同时JSON表示不服,我不能跟js的对象长成一样啊,我得有我自己的个性,于是规定键-值对中的键必须用双引号!同时规定键-值对中的值的取值有一定要求:

JSON 值可以是:

  1. 数字(整数或浮点数)
  2. 字符串(在双引号中
  3. 逻辑值(true 或 false)
  4. 数组(在方括号中)
  5. 对象(在花括号中)
  6. null

除以上6种外,再无其他,没有像js一样的undefined、NAN,JSON拒绝使用。

移动端开发的干货篇

之前写了一篇文章《一篇真正教会你开发移动端一面的文章(一)》/)。那是本篇文章的基础,如果没有阅读过的同学可以去看看,今天就给大家带来干货,真真正正的讲到如何很好的开发一个移动端的页面

图片 5

好了,让我们开始吧,从哪里开始呢?从设计图开始,即PSD稿件:
移动端PSD稿件的尺寸肯定较之PC端的PSD稿件不同,具体体现在设计图的尺寸上,现在移动端的设计图尺寸大多以iPhone5和iPhone6的设备像素尺寸作为依据,比如拿到一张PSD设计图,它的总宽度为640px(iPhone5)或者750px(iPhone6)。本例就拿iPhone6的设计图尺寸为标准进行讲解,其它设计图尺寸道理是一样的,这并不影响我们的开发。

首先我们要有一张设计图才行,看下图,假设我们有一张设计图,它很简单,只有一个红色的方块:

图片 6

拿到了设计图,于是你开开心心的开始写代码了,你打开了编辑器,并写下了如下HTML代码:

JavaScript

<!DOCTYPE html> <html> <head>
<title></title> <meta charset=”utf-8″ /> <meta
name=”viewport”
content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no”
/> </head> <body> <div class=”box”></div>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<body>
 
    <div class="box"></div>
 
</body>
</html>

HTML代码写好了,你用了一个带有box类的div标签作为ps稿中的红色块,经过尺寸测量,你为上面代码添加了CSS样式,最后你的代码是这样的:

JavaScript

<!DOCTYPE html> <html> <head>
<title></title> <meta charset=”utf-8″ /> <meta
name=”viewport”
content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no”
/> <style> body{ margin: 0; padding: 0; } .box{ width: 200px;
height: 200px; background: red; } </style> </head>
<body> <div class=”box”></div> </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        background: red;
    }
    </style>
</head>
<body>
 
    <div class="box"></div>
 
</body>
</html>

上面的代码中,你只是在原来的基础上增加了CSS样式,首先你清除了body标签上的默认样式,这个没什么好说的,然后你根据设计图中测量的尺寸来给box编写样式,宽200px;高200px;背景红色。看上去并没有什么问题,于是你开开心心的打开浏览器,刷新页面,你的脸色沉了下来,因为你看到了你不想看到的结果,如下图,上图为设计稿的样式,下图为你编写的html文件的样式:

图片 7

图片 8

通过对比psd原稿和我们目前所写的html页面,可以看出我们html页面的问题,红色方块与整个页面的比例和psd原稿不一样啊,那么为什么我们明明是按照原稿测量的尺寸写出来的代码却和psd原稿显示的效果不一样呢?别忘了,psd原稿的尺寸是按照设备像素设计的,由于我们所用的设计稿是基于iPhone6设计的,所以我们设计稿的尺寸就是iPhone6的设备像素的尺寸,也就是750px,而我们CSS中的样式是基于布局视口的尺寸计算的,由于我们html页面中由于写入了以下meta标签:

<meta name=”viewport”
content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no”/>

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

在上一篇我们讲过, width=device-width
这段代码是让布局视口的尺寸等于理想视口。
根据公式(缩放比例为1):
设备像素比(DPR) = 设备像素个数 /
理想视口像素个数(device-width)

因为iPhone6的DPR(设备像素比)为2,设备像素为750,所以iPhone6的理想视口尺寸为375px。所以上面代码最终导致的是:使我们布局视口的宽度变成了375px。而我们CSS中编写的样式尺寸又是基于布局视口计算的,所以我们得到的页面看上去比例不对,如下图:

图片 9
图片 10

如上面两幅图片,我们知道,psd稿的总宽是750px,元素宽200px,而我们真正做页面的时候,布局视口的宽度是375px,正好是设计稿的一半。所以我们不能直接使用设计稿上面测量所得的像素尺寸,根据比例,我们应该将测量所得的尺寸除以2,才是我们CSS中布局所用的尺寸,据此,我们将200px除以2得到100px,于是我们修改代码,将红色方块的宽高都设为100px,刷新页面,看看比例是不是和设计图一样了?答案是肯定的,如下图为修改后的html页面:

图片 11

这样,我们就得到了正确的数据,并且正确的写出了页面,你很高兴,可是问题来了,如果你在做页面的时候,测量了一个元素的宽度,宽度是一个奇数,比如111像素,按照我们之前的做法是,将测量到的数据除以2,得到我们真正使用的数据,所以111除以2等于55.5px,我们知道,计算机(手机)没办法显示不到一个像素的像素值,计算机(手机)会自动将其补全为一个像素进行显示,所以最终会将元素显示为56像素,这并不是我们想要的结果。
另外,我们的设计稿是基于iphone6设计的,我们调试页面也是在iphone6下调试的。又因为iphone6的设备像素比试2,所以我们才能由设计稿测量的数据除以2后直接使用,并且在iphone6下没有问题,但是你要知道,并不是所有手机的设备像素比都是2,有的手机的设备像素比试2.5或者3。并且不同设备的设备像素又不同,这样就导致理想视口的尺寸不同,从而导致布局视口的尺寸不同,那么我们直接根据iphone6的设计稿尺寸除以2得到的尺寸用来编写CSS是不能在所有设备下完好显示的。

所以,我们要换一个方法。
于是我们想到:如果我们能将布局视口的尺寸设置为和设备像素尺寸相等的话,这样我们就保证了设计图与页面的1:1关系,那么我们就可以直接使用psd中测量的尺寸了,然后在其他尺寸的手机中,我们进行等比缩放就ok了。那么如何才能让布局视口的尺寸等于设备像素尺寸呢?

我们注意到meta标签中的 width=device-width
这段代码,首先你要明白这句话的意思,前面讲过,这句话最终导致的结果是:让布局视口的尺寸等于理想视口的尺寸。言外之意就是,在代码
width=device-width 中:

width:是布局视口的width
device-width:是理想视口的宽度

根据公式(缩放比例为1):

设备像素比(DPR) = 设备像素个数 / 理想视口像素个数(device-width)

以iphone6为例:
设备像素比(DPR):2
设备像素个数:750
所以在缩放比例为1的情况下,iphone6理想视口的像素个数为 750 / 2 =
375,也就是说,对于iphone6来讲 device-width的值为375

所以我们通过width=device-width这句话,间接的将布局视口的尺寸设为了375,也就是说,如果我们能改变理想视口的尺寸,也就改变了布局适口的尺寸,如何改变理想视口的尺寸呢?这就要讲到缩放了,上一篇我们讲到过缩放,缩放是缩小或放大CSS像素的过程,以iphone6为例,当我们缩放比例为1:1的时候,由于iphone6的设备像素比为2,所以iphone6的设备像素与CSS像素的关系看起来就像下图这样:

图片 12

一个CSS像素宽度等于两个设备像素宽度,所以750px的设备宽度的布局视口为357CSS像素。这是在缩放比例为1的情况下,既然缩放可以放大或缩小CSS像素,所以如果我们将CSS像素的宽度缩放至与设备像素宽度相等了,那么750个设备像素也就能显示750个CSS像素,缩放后的设备像素与CSS像素看起来应该像下图这样:

图片 13

但是,我们的缩放倍数是多少呢?在缩放比例为1的时候,一个CSS像素的宽度 =
两个设备像素的宽度,如果我们想让 一个CSS像素的宽度 =
一个设备像素的宽度,我们就要将CSS像素缩小为原来的0.5倍,实际上,我们缩小的倍数
= 设备像素比的倒数。
于是,我们修改上面的HTML代码(修改了meta标签):

JavaScript

<html> <head> <title></title> <meta
charset=”utf-8″ /> <meta name=”viewport”
content=”width=device-width,initial-scale=0.5,maximum-scale=0.5,user-scalable=no”
/> <style> body{ margin: 0; padding: 0; } .box{ width: 200px;
height: 200px; background: red; } </style> </head>
<body> <div class=”box”></div> </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,user-scalable=no" />
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        background: red;
    }
    </style>
</head>
<body>
 
    <div class="box"></div>
 
</body>
</html>

注意,上面代码中我们给红色方块使用的CSS尺寸直接使用的是psd稿中测量的尺寸,我们刷新页面,怎么样?满意吧:

图片 14

但是我们这是有个前提的,那就是缩放0.5倍只适用于设备像素比为2的设备(因为缩放值
= 1 /
设备像素比)。所以,为了适应所有的设备,我们应该用javascript代码动态生成meta标签:

var scale = 1 / window.devicePixelRatio;
document.querySelector(‘meta[name=”viewport”]’).setAttribute(‘content’,’width=device-width,initial-scale=’

  • scale + ‘, maximum-scale=’ + scale + ‘, minimum-scale=’ + scale + ‘,
    user-scalable=no’);
1
2
var scale = 1 / window.devicePixelRatio;
document.querySelector(‘meta[name="viewport"]’).setAttribute(‘content’,’width=device-width,initial-scale=’ + scale + ‘, maximum-scale=’ + scale + ‘, minimum-scale=’ + scale + ‘, user-scalable=no’);

其中 window.devicePixelRatio 的值为设备像素比。
于是我们的代码变成了这样:

JavaScript

<html> <head> <title></title> <meta
charset=”utf-8″ /> <meta name=”viewport” content=”” />
<style> body{ margin: 0; padding: 0; } .box{ width: 200px; height:
200px; background: red; } </style> </head> <body>
<div class=”box”></div> <script> var scale = 1 /
window.devicePixelRatio;
document.querySelector(‘meta[name=”viewport”]’).setAttribute(‘content’,’width=device-width,initial-scale=’

  • scale + ‘, maximum-scale=’ + scale + ‘, minimum-scale=’ + scale + ‘,
    user-scalable=no’); </script> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="" />
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        background: red;
    }
    </style>
</head>
<body>
 
    <div class="box"></div>
 
    <script>
    var scale = 1 / window.devicePixelRatio;
    document.querySelector(‘meta[name="viewport"]’).setAttribute(‘content’,’width=device-width,initial-scale=’ + scale + ‘, maximum-scale=’ + scale + ‘, minimum-scale=’ + scale + ‘, user-scalable=no’);
    </script>
</body>
</html>

上面的代码最终能保证一个问题,那就是无论任何设备,布局视口的宽度总是等于设备像素。
这样,我们在设计图中测量为200px的宽度就能直接用在CSS中了,并且在iphone6中显示完好,可是别忘了,我们的设计图就是根据iphone6设计的,如果换做其他设备,还能显示完好么?我们不妨试一下,如下图,是上面代码在iphone5和iphone6下的对比:

图片 15

图片 16

我们发现,无论是五还是6,即使设备像素变了,即屏幕宽度变了,可是红色方块的宽度并没有变,这并不是一个好的现象,因为这样页面的元素就不成比例了,会影响到布局,所以我们要想办法让我们页面的元素跟着设备变化而等比缩放,这就是我们要解决的第二个问题,怎么实现呢?这就要讲到rem的知识点了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注