随笔: 我学习到的JavaScript的一些东西_H5之家 - 中国HTML5教程资源分享第一站

关于ES5和ES6的一些新特性:一、关键字let, 常量const：  两个不同函数各自声明同一个变量，不同函数内部的同名局部变量相互独立，互不影响。内部函数可以访问外部函数变量（全局变量），外部函数不能直接访问内部局部变量。函数在查找变量时，首先扫描整个函数体局部变量，然后父级作用域寻找，再往祖父级....一级级往上走。为了解决块级作用域，ES6引入关键字let，用let代替var声明块级作用域的变量。const是定义常量关键字，编辑常量都使用大写字母如PI,let与const都有块级作用域。但是使用let必须在同级顶部加'use strict'。二、class类：      在ES5中，JavaScript没有类的说法，而创建的对象就基本上等价于类了。而在ES6中，新增了class这个属性，而我们在写代码的时候用到了class可以通过，typescript或者babel来进行ES5与ES6之间的转换。 <img src="/Scripts/UEditor/net/upload/image/20161215/6361741037673884566846243.png" title="blob.png" alt="blob.png" width="779" height="435"/> 关于学到的JS的新东西：一、prototype的使用方法：    定义添加对象的属性 <img src="/Scripts/UEditor/net/upload/image/20161215/6361741111906701076293926.png" title="blob.png" alt="blob.png"/>二、setInterval、requsetAnimationFrame:        游戏<span style="font-size: 16px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;">是一帧一帧图像的叠加播放，并通过捕获用户反馈来实现游戏中的人机交互。之前我选择了函数setInterval来循环，但是说JavaScript是单线程，setInterval的定时循环间隔会受到CPU使用情况的影响，同时电脑对它的最短间隔也有不同的要求。所以我换成用<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame" target="_blank" style="text-indent: 37px; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); text-decoration: underline; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-size: 16px; font-family: arial, helvetica, sans-serif;"><span style="background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-size: 16px; font-family: arial, helvetica, sans-serif;">requestAnimationFrame</a>函数<span style="font-family: arial, helvetica, sans-serif; text-indent: 37px; background-color: rgb(255, 255, 255); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;">来执行循环播放的。它的优势就是能根据浏览器的实时渲染帧率来执行函数，使的动画播放比较流畅。而不会因为函数的执行时间跟定时器时间不同导致的播放卡顿现象。<img src="/Scripts/UEditor/net/upload/image/20161215/6361741146497313416750495.png" title="QQ截图20161215151028.png" alt="QQ截图20161215151028.png"/> 关于学到的<canvas>的新东西：一、二次贝塞尔曲线：（了解中）    里程碑的作品中，有打算加一条粒子trail来增加游戏视觉效应，二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 <a href="" title="HTML5 canvas beginPath() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: rgb(255, 255, 255); font-family: Verdana, Arial, 宋体; white-space: normal; text-decoration: underline; font-size: 16px;">beginPath()</a> 和 <a href="" title="HTML5 canvas moveTo() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: rgb(255, 255, 255); font-family: Verdana, Arial, 宋体; white-space: normal; text-decoration: underline; font-size: 16px;">moveTo()</a> 方法来定义开始点。<img src="/Scripts/UEditor/net/upload/image/20161215/6361741062600439409959715.png" title="blob.png" alt="blob.png"/>现在的困难在于，粒子跟着鼠标移动，要确定结束点的坐标。多看多学多思考。。。。二、translate():    重新映射画布上的 (0,0) 位置，当你的一个player是由多个Image组成是，通过translate来控制所有图片的（0,0）点就可以把它很好的组合起来。 总结：有关JS的正则表达式、Cookie需要认真的搞懂，基础知识需要多看多记，前端也需要去练习。Node可以尝试着去了解了