css3动画事件—webkitAnimationEnd-一次关于JSONP的小实验与总结-javascript学习笔记[5]--函数（2）

当前位置: 编程技术>WEB前端

本页文章导读:

▪css3动画事件—webkitAnimationEnd 　　用css3的animation完成一个动画，当只有这个动画完成时才执行令一个事件，比如让动画保持在终止的状态或其他一些事件。我们该怎么办呢。　　第一种方法：　　　　用计时器，设定一.........

▪一次关于JSONP的小实验与总结前言：今天，无意间看到自己某个文件夹下有个JSONP的东西。慢慢回忆起，这个东西是之前想写的一个demo，也不知道是多久以前了，但是不知道怎么的，给忘那边了。.........

▪javascript学习笔记[5]--函数（2）吃晚饭，洗个澡，然后继续吧，今天看完这些，明天就能进入面向对象了，后面还有bom，dom，ajax还有好多需要看呢。刚刚真是惭愧，我还以为我看完函数那一章了呢.........

[1]css3动画事件—webkitAnimationEnd

来源: 发布时间: 2013-11-06

　　用css3的animation完成一个动画，当只有这个动画完成时才执行令一个事件，比如让动画保持在终止的状态或其他一些事件。我们该怎么办呢。

　　第一种方法：

　　　　用计时器，设定一个和动画时长一样的time，过time事件去执行这个函数。

　　　　setTimeout(function(){ },time);

　　第二种方法：

　　　　　　当-webkit-animation动画结束时有一个webkitAnimationEnd事件，只要监听这个事件就可以了。

　　例子：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="@my_programmer">
<title>webkitAnimationEnd</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
#div{
width:200px;
height:200px;
background:#f60;
margin:100px auto;
-webkit-transition: all ease 1s;
}
.change{
-webkit-animation: transform 1s 2 ease;
}
@-webkit-keyframes transform {
0% { -webkit-transform: scale(1)}
30% { -webkit-transform: scale(2)}
60% { -webkit-transform: scale(0.5)}
100% { -webkit-transform: scale(1)}
}
</style>
</head>
<body>

var tt = document.querySelector('#div');
tt.addEventListener("click", function(){
this.className = 'change';
}, false);

tt.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件
this.className = this.className.replace('change', ' ');
console.log(2);
}, false);

</script>
</body>
</html>

　　拓展：

　　　1、　-webkit-animation动画其实有三个事件：　　　　　　

　　　　　　开始事件 webkitAnimationStart
　　　　　　结束事件 webkitAnimationEnd
　　　　　　重复运动事件 webkitAnimationIteration

　　　　你可以在上个例子中测试一下这两个事件

tt.addEventListener("webkitAnimationStart", function(){ //动画开始时事件
　　console.log(1);　　//动画开始时，控制台输出1

}, false);
tt.addEventListener("webkitAnimationIteration", function(){//动画重复运动时的事件
　　console.log(3);　　//第一遍动作完成时，控制台输出3
}, false);

　　　　2、 css3的过渡属性transition，在动画结束时，也存在结束的事件：webkitTransitionEnd;

　　　　　　注意：transition,也仅仅有这一个事件。

本文链接

[2]一次关于JSONP的小实验与总结

来源: 发布时间: 2013-11-06

前言：

今天，无意间看到自己某个文件夹下有个JSONP的东西。慢慢回忆起，这个东西是之前想写的一个demo，也不知道是多久以前了，但是不知道怎么的，给忘那边了。那么，就趁这个机会把它完成吧，其实也说不上是一个demo，就是一个小实验，虽然，网上也已经有很多关于JSONP的文章和例子了，但是有些东西看看很简单，不亲自试一下总觉得不踏实。我今天为什么要实验，一方面也是经常在网上看到有些网站需要跨域获得数据，但是目前自己做的项目中又没有相关需求，于是很好奇，于是就有了这篇文章，于是......那就开始这次练习吧。

一什么是JSONP

　　JSONP全称：JSON with Padding

　　看到名字，好像说，JSONP是JSON的什么？或许有人会问，什么是JSON呢？如果有同学还不清楚JSON，可以先去了解下JSON，然后再继续本文的阅读或许会更好。简单的说，JSON是一种数据交换格式，在我们通过ajax技术获取数据的时候，可以以XML或者JSON这样的格式进行传递。ajax虽然好用，但是也有遇到困难的时候，比如你需要跨域获取数据。这个时候，普通的ajax获取方式就不太容易了，这时候，JSONP就可以帮忙了。这里再补充下前面提到跨域问题，跨域其实简单的说就是，比如你自己写了一个网站把它部署到域名是www.a.com的服务器上,然后你可以毫无压力的使用ajax请求www.a.com/users.json 的数据。但是，当要你通过普通ajax方式请求www.b.com域名下的www.b.com/users.json的数据时，就没那么容易了，在后面的小实验中，可以看到这一情况。既然使用普通的ajax技术无法做到，那么JSONP又是如何做到的呢？

二 JSONP的基本原理

　　JSONP可以实现跨域，这要归功于强大的<script></script>元素标签。除了我们会在它中间写js代码外，也经常会在网站中通过它的src属性引入外部js文件，关键就在此，我们的引入的js文件也可以不是同一个域下的。那么我们也就可以将原来需要获取的JSON数据写到js文件中去，然后再获取。不过，不幸的事情终究发生了，当我们把一段JSON格式的数据，例如：

1 {"id" : "1","name" : "小王"}

写入js文件，然后通过<script>元素引入后，却报错了。原因是<script>标签元素还是很老实的，因为它就是负责执行js的，所以你那个JSON格式的数据它也会毫不犹豫的当作js代码去执行，而那个数据根本不符合js语法，于是就很悲剧的出错了。但这个出错，同样却带给了我们答案，不是吗？既然不符合js语法不行，我们搞个符合的不就可以了。这里一种常用的办法就是返回一个函数callback（{"id" : "1","name" : "小王"}); 的执行语句就可以了。这里的callback命名不是必须的，你可以换任何喜欢的名字。这里只是强调这是个回调函数才这么写。回调函数确实强大啊，要使得这里可以执行该函数，那么这个函数必须在开始就已经被我们提前定义了。我们在开始就定义好：

function callback(data){
alert(data.name);
}

其实这个不难理解，普通的函数执行或许大家都明白，在<script>标签中间先定义上面的函数，但是该函数并不会运行，因为你没执行调用，当你接着在代码中写上
callback({"id" : "1","name" : "小王"});就顺利的执行了。而JSONP所做的就是这个事情，只不过调用的语句从远程服务器传来，动态加入到你的页面中去执行而已。到这里只剩下最后一步了，就是告诉服务器端返回哪个名称的函数执行，这个也好办，将函数名以一个查询参数传递到后台告诉它名字就好了，类似：

http://www.b.com/getUsers.json?callback=getUsers

然后在服务器端处理，获得参数callback的值，然后将数据填充到getUser（data）；的函数参数中去，这里的data。返回前台页面后，便可以执行并获得data数据了。到此，也终于明白了JSON with Padding中的Padding（填充）了。关于JSONP的基础理论部分就结束了，剩下的内容就剩下实验部分了。

三 JSONP小实验

　　实验环境：windows操作系统。
　　开发工具：NotePad++。
　　开发语言：Node.js。
　　前台使用插件：jQuery。

开始了，这里选择Node.js，没其它原因，我只是顺手抓到它了，你当然也可以用asp.net，java servlet，php，ruby，Golang等等等你喜欢的去实验。因为只实验JSONP，没多少东西，所以Node.js中也没有使用第三方的框架（不过后来有点后悔了，多写了好多......）。

首先需要模拟两个域，因为我在windows下，所以可以修改host文件，添加

两个域名映射到本机回送地址127.0.0.1。然后开始写代码：

创建两个Node.js的应用，一个是appA.js,一个appB.js。首先，我们尝试通过普通ajax获取同域的数据：

appB.js代码：

1 var http = require('http'),
2 url = require('url'),
3 fs = require('fs'),
4 path = require('path');
5
6
7 function getFile(localPath,mimeType,res){
8 fs.readFile(localPath,function(err,contents){
9 if(!err){
10 res.writeHead(200,{
11 'Content-Type' : mimeType,
12 'Content-length' : contents.length
13
14 });
15 res.end(contents);
16 }else{
17 res.writeHead(500);
18 res.end();
19 }
20
21 });
22 }
23 http.createServer(function(req,res){
24 var urlPath = url.parse(req.url).pathname;
25 var fileName = path.basename(req.url) || 'index.html',
26 suffix = path.extname(fileName).substring(1),
27 dir = path.dirname(req.url).substring(1),
28 localPath = __dirname + '\\';
29
30

[3]javascript学习笔记[5]--函数（2）

来源: 发布时间: 2013-11-06

吃晚饭，洗个澡，然后继续吧，今天看完这些，明天就能进入面向对象了，后面还有bom，dom，ajax还有好多需要看呢。刚刚真是惭愧，我还以为我看完函数那一章了呢。汗颜^^^

js函数刚开始的时候会对（）有些不清楚。这边分享一下：（）有两个作用：

1）分隔作用，function func(arg1,arg2){} var a = String(adwad); (1+2)*3

2）执行作用，var acc = func(); 这里就是执行。

(function(){})(); 前面的小括号指的分隔符，最后的小括号指的是立即执行，很优雅的写法。

这在当你碰到在js中window.onload = init;和在body标签中添加 onload = init();是一样的效果。

就是函数调用和引用的区别，可以看有没有小括号。这个小知识点我觉得挺有用的，就写在这了。

5.1 变量的作用范围和生命周期

看一下下面这个有趣的代码：重点是第二个输出为什么是undefined。

5.2 闭包函数（绑定函数）

闭包是一个函数，所以通常也称为闭包函数，当一个函数不在它所处环境（变量作用范围）中被调用，仍能够使用本地变量，这就是闭包函数。

1）作为值从函数返回的函数

function B(){
var temp = "abc";
function A(){
alert("本地变量temp的值："+temp);
}
return A;
}

var myFunc = B();
myFunc();

//输出本地变量temp的值：abc
//如果你理解我刚开始讲的小括号的含义的话，这里很容易理解为什么会是abc。

2）利用变量作用范围形成闭包函数

作为参数传递给函数的函数或作为值从函数返回的函数都是闭包函数，但是利用变量作用范围也可以形成闭包函数

var f;
function B(){
var temp = "abc";
f = function(){
alert("temp="+temp);
}
}
B();
f();
//输出temp = abc
//B()为了个f赋值，f()输出abc

这边还有一些有意思的代码，

好了，就这些吧，明天开始面向对象，洗洗玩会游戏去了。。

本文链接