《ES6 标准入门》学习笔记(第十三章:Reflect)

《ES6 标准入门》的第十三章介绍了Reflect。跟第十二章的一样简单,不信你看看。 Reflect.applay(target,thisArg,args) 等同于 Function.prototype.apply.call(func,thisArg,args),用于绑定 this 对象后执行给定函数。 Reflect.contructor(target,args) 等同于 new target(…args),提供了一种不使用new 来调用构造函数的方法。 Reflect.get(target,name,receiver) 查找并返回 target 对象的 name ...

2017
12-10

《ES6 标准入门》学习笔记(第十二章:Proxy)

《ES6 标准入门》的第十二章主要是讲 Proxy。Proxy 用于拦截一些操作的默认行为,并且可以对拦截的默认行为进行修改。没有别的,本章 Proxy 的介绍内容不多,主要是对 Proxy 支持的一些拦截操作的讲解。 get(target,propKey,receiver) 拦截对象属性的读取。 set(target,propKey,value,receiver) 拦截对象属性的设置。 has(target,propKey) 拦截 propKey in proxy 的操作,返回一个布尔值。 deletePropert...

2017
12-10

《ES6 标准入门》学习笔记(第十一章:Set 和 Map 数据结构)

《ES6 标准入门》学习笔记的第十一章主要是讲 Set 和 Map 数据结构,从脑图上看起来貌似内容很多,但是当你仔细分析下时,就会发现其实里面知识点也不是很多,主要都是一些属性和方法介绍。并且 Set 和 Map 也很很多相似之处,所以记起来还是非常地容易的。

2017
12-08

《ES6 标准入门》学习笔记(第十章:Symbol)

《ES6 标准入门》的第十章主要是讲 JavaScript 中的一个全新的数据类型 Symbol。 看这一章的时候觉得内容很不好理解,因为这是一个全新的东西,从来没有接触过。为此这一章我也看了好几篇,也才领悟了其中的一小部分,更多的内容也只是走马观花罢了。不过也不要紧,相信在不久的将来 Symbol 肯定会在脑中就会突然的开了花。

2017
12-05

《ES6 标准入门》学习笔记(第九章:对象的扩展)

《ES6 标准入门》的第九章主要是讲对象的一些方法扩展。比如对象的复制(浅拷贝)、遍历等。 【属性的可枚举】:ES5 3 个方法和 ES6 新增的 1 个方法会忽略 enumerable 为 false 的属性 for…in 循环:只遍历对象自身的和继承的可枚举属性 Object.keys():返回对象自身的所有可枚举属性的键名 JSON.stringfy():只串行化对象自身的可枚举属性 Object.assign():只复制对象自身的可枚举属性  

2017
12-04

《ES6 标准入门》学习笔记(第八章:数组的扩展)

《ES6 标准入门》的第八章主要是讲数组的一些方法扩展,换个角度其实就是让数组在处理数据的时候更加的灵活。 这章比较简单,没有很多的东西,基本都是新增的一些方法。 【扩展运算符】 :让 apply 无地自容,只好慢慢地淡出我们的视线。因为 … 让数组的参数转换变得很简洁好用: 看过来 // 以前函数传参 var args = [1,2,3]; function f(x,y,z){ // ... } f.apply(null,args); // 现在...

2017
11-30

《ES6 标准入门》学习笔记(第七章:函数的扩展)

《ES6 标准入门》的这一章虽然说是函数的扩展,但更多的是函数的优化,让函数变得更精简,更美妙。 【函数的默认值与解构赋值的结合使用】可以说是 ES6 的一个非常棒的功能,让你在给函数设置参数时易如反掌。但是这里我们还得注意下面两种写法的不同: 看过来 function m1({x=0,y=0} = {}){ console.log(x,y); } function m2({x,y} = {x:0,y:0}){ console.log(x,y); } // 都不传 m1(...

2017
11-26

《ES6 标准入门》学习笔记(第六章:数值的扩展)

这一章主要介绍数值的一些方法和属性。对于这一章我个人觉得知道大概有些方法及属性就足够了,当遇到有这样的需求时,脑中能够有这样一幅脑图就行,不需要有多清晰,只要有就好。 ES6 为Math 对象新增了不少方法,我们也不必把所有的都记下来,把常用的记下来就可以。比如二进制和八进制的表示法、parseInt() 方法和 parseFloat() 方法已经迁移到 Number 对象上。 对于上面说到的 integer 类型,几乎所有...

2017
11-23

《ES6 标准入门》学习笔记(第五章:正则的扩展)

《ES6 标准入门》第五章,主要内容是介绍了ES6 对正则的一些增加语法。内容有点多,但把它拼成一个脑图后就清晰可见了。 注意 图中有用到 \n 的,\ 和 n 之间多了一个空格,本来是不能有的,但不加个空格就会把它解析了,所以还是无奈之举。 图中有些文字比较长,本来想图中只是写个大概,然后再用文字补上一些,但想想,还是能在图上写的,就尽量写在图上,因为这样来得更直观,更好记。可能会有些知识...

2017
11-23

《ES6 标准入门》学习笔记(第四章:字符串的扩展)

《ES6 标准入门》的第四章主要是介绍 ES6 加强对 Unicode 的支持,以及扩展了字符串对象。 Unicode 的表示字符的增加,以前对于超过\u0000~\uFFFF这个范围的,必须用2个双字节的形式表达,现在有了{}我们就可以像下面这样写: 以前 console.log("\uD842\uDFB7"); // console.log("\u20BB7"); // ₻7 但是现在我们就可以通过{}来显示所对应的码点(大于\uFFFF): 现在 console.log("\u{20BB7}"); //...

2017
11-21

《ES6 标准入门》学习笔记(第三章:变量的解构赋值)

《ES6 标准入门》的第三章主要讲的是变量的解构赋值,这里也没什么特别难的地方。只要足够细心,基本都能理解。 对于数组的结构赋值,等号左则的模式只匹配等号右边数据的一部分时,解构还可以成功的;如果等号左则的模式变量多于等号右则的数组长度时也依然可以解构成功,只不过按顺序依次赋值后,没有得到值的就为undefined。不妨看几个例子: 看这里 // 右则超值情况 let [a,b,c] = [1,2,3,4,5,6]; ...

2017
11-19

《ES6 标准入门》学习笔记(第二章:let 和 const 命令)

ES6 标准入门-第二章主要是讲了 let 和 const 以及 块级作用域。 let 和 const 命令 从上图可以看出,let 和 const 有很多相似之处,可以把它们看作是一对孪生兄弟。let 中【基本用法】的第一点,我们必需要知道用 let 声明的变量(比如:i) 会有两个不同的作用域,请看下面这个例子: let 与 var 的区别 // var 声明 for(var i=0;i<5;i++){ // 这个 i 为父级作用域 var i = 5; console...

2017
11-19

JavaScript 视频文字弹幕效果

前言 视频弹幕效果到处都是,这种交互大大地改变了网友之间的交流方式 ,让你看视频的时候,可以发评论,可以看到别人的评论,真是一石三鸟。用户体验没得说,所以本文就是将要分享这个效果。上码! 各种套路 套路一 简单的 CSS 样式如下 : 样式看这里 *{ padding: 0; margin: 0; } html,body{ width: 100%; height: 100%; overflow: hidden; } .stage{ posit...

2017
11-14

JavaScript 实现长按功能(满满的套路)

前言 在某种特定场景下,有时候我们需要用到长按功能,比如长按弹出操作界面,不过,在 PC 端的话就用得比较少,本文主要是针对移动端操作的,毕竟移动端手势操作是必不可少。 在开始之前我们先来看看基本的 HTML 代码: 简单得….. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 实现长按效果 - 云库前端</ti...

2017
11-14

input 输入框在项目开发中的各种需求实现

前言 在前端开发中,当我们遇到 input 输入框的时候,需求总是会提出各种要求,让你做出来的东西更可靠,更人性化。所以在这里我们有必要把 input 输入框的一些常用的实现整理出来。 input 之旅 在这里我们尽可能的把所有涉及到的需要的实现方法都为大家整理出来,如果你觉得有些还没列出,那么可以留言,我会作进一步的完善。 首先把基础的 HTML 代码贴出来: DEMO HTML 代码 <!DOCTYPE html> ...

2017
11-13

JavaScript 实现浏览器全屏模式及退出全屏模式

这是一个不怎么常用的 JavaScript 交互效果,一旦用到了,你就知道书到用时方恨少的痛苦了。所以还是有备无患,自己先过一篇即使有个印象也未常不是一件好事。 HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 实现浏览器全屏及退出全屏 - 云库前端</title> <meta name="viewport" content="width...

2017
11-12

JavaScript 获取 Select 下拉框的值

为什么这么简单的一个东西,我还得单独一篇文章记录下来?其实理由很简单,就是时刻提醒像我这种眼高手低的,基础知识不牢固的人,基础就是一切,基础可以创造一切。在做《Canvas 实现炫丽的粒子运动效果(粒子生成文字)》这个效果时,需要用到下拉框,来动态改变粒子运动效果。但尴尬的是,下拉框写好了却不知道怎么获取选中的值,于是网上找了下,并记录成文。 写好的HTML代码: HTML 代码 <!DOCTYP...

2017
11-12

Canvas 实现炫丽的粒子运动效果(粒子生成文字)

没有最好,只有更好,如题所示,这篇文章只要是分享一个用 Canvas 来实现的粒子运动效果。感觉有点标题党了,但换个角度,勉勉强强算是炫丽吧,虽然色彩上与炫丽无关,但运动效果上还是算得上有点点炫的。不管怎么样,我们还是开始这个所谓的炫丽效果吧! 直接上代码 ,不懂可以看代码注释。估计就会看明白大概的思路了。 HTML代码 (html+css+js) <!DOCTYPE html> <html lang="en"> <h...

2017
11-12

WEB前端动画库汇总篇(应有尽有)

作为前端开发人员动画效果是硬性要求,如果还不会就得开始学习啦,像我这样的新手一开始应该要懂得站在巨人的肩膀上,先把别人的东西用起来,熟悉了之后就可以模仿别人的实现,研读别人的代码,好了不多说,还是赶紧走进动感世界吧! dynamics.js。一个用于创建物理运动动画的 JavaScript 库,非常的实用,不管是对象、DOM 元素、还是 SVG 都驾驭得了。 bounce.js。它可以让你生成一系列非常有动感的动画效...

2017
11-10

Dynamics.js 一个简单强大的物理运动动画库

前言 这是一篇没有什么技术含量的文章,因为本次只是来分享一个简单但强大的物理运动动画库,他们可让你的元素、对象、SVG 变得魅力十足。我是在学习Canvas 过程中用到这个 JavaScript 动画库的,觉得还不错,所以就单独成文,把它分享给大家。虽然网上有很多关于 Dynamics.js  的资料,但我毕竟是我,我只是记录自己的一切。 官网首页的清爽让我不得不截图以证清白: 虽然图片有点抢镜,但我就是喜欢。...

2017
11-09

Canvas 动画之多对象边界碰撞运动

前言 学习的道路永远没有尽头,除非……。之前分享过两篇文章《Canvas 动画之多对象运动》和《Canvas 动画之来回运动的小圆》,可以说本文是基于这两篇博文之上做出来的效果。都说一步一个脚印,记录下来了才知道自己当初是怎么走过来的。好了,马上开始今天的分享,老规矩上第二道菜: HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...

2017
11-05

Canvas 动画之多对象自由落体运动

在上一篇文章中分享了《Canvas 实现多对象运动动画》,此次分享的是在它的基础上进行代码修改,实现多个小球作自由落体运动的动画效果。一步一个脚印,记录下来,在自己回过头来看时能清楚地看到 Canavs 之路首阻且长的辛酸史。 HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas 多对象自由落体运动动画-云库前端<...

2017
11-03

Canvas 动画之多对象运动

前言 之前分享过一篇文章《Canvas 动画之来回运动的小圆》,对于很多朋友而言,这都是小菜一碟。不管怎么说,这都是自己走过的路,记下来也不一定有很大作用,但至少可以给自己一个交代,对于以后都是美美的回忆。本文要分享的是基于上面这篇文章的。但会比上面这篇文章更让人为之动容,不信?咱们走走瞧。 在这里没有过多的话要说,作为一个准前端开发程序员,代码也许就是我对你最冲动的告白。 HTML 代...

2017
11-02

Canvas 征战之旅

前言 Canvas 的使用越来越多,比如百度的 echart.js 就是用canvas 实现的。在没有看到类似 echart.js 这样的惊人效果后,我一直不相信 Canvas 是如此惊艳。为了说服自己在网上也查阅了很多有关于 Canvas 的例子。真的可以很炫。于是就开始了Canvas 之旅,但是本文要说的不是 Canvas 如何如何,而是把在学习 Canvas 时的一些坑也好,技巧也好,或者说是解决方案也罢,都统统记录下来,以便前人种树,后人...

2017
11-01

JavaScript 中的 this 关键字

前言 关于 JavaScript 中的 this 关键字相信你已经早已感受到它的存在了,或者对他也已经有一知半解了,但本文要分享的关于 this 的东西你确定全都知道吗?可能不一定! this 之旅 this 总是指向一个对象,这一点已经家喻户晓了,包括你也不例外。但在不同的情况下它的指向也是不一样的,得具体情况具体分析。我们通过几个例子来感受感受 this 的博大精深。 场景一 直接打印 console.log(this); //...

2017
10-26

移动端 input 输入框弹出键盘时页面被吊打的解决方案

前言 IOS 的兼容永远是前端开发的一个伤心地,虽然是这样,但你也没有办法,毕竟果粉还不是一般的少,当 IOS 键盘遇到 fixed 的时候,你除了感到无助外,更多的是绝望。不过现在曙光就在眼前,只要你把这篇文章仔细阅读完。 说走就走的旅程 首先我们得知道一个事实,那就是在绝大部安卓机中,只要你按常理出牌(常用布局),一般情况下点击输入框弹出手机键盘都不会有什么问题。这里我们不妨假设一个常...

2017
10-24

Canvas 动画之来回运动的小圆

正如标题所说的,本文是要实现一个无限循环运动(直线运动)的小圆。通过本文你可以学到在 Canvas 中最基本的动画制作。这个动画有如下特点: 无限循环运动(上下来回运动) 随机速度 随机加速度 随机的圆大小 随机的圆初始位置 好了,废话不多说,我们真接来看代码,没有代码解决不了的问题: 超简单的HTML (index.html) <!DOCTYPE html> <html lang="en"> <head> <meta...

2017
10-23

JavaScript 关于元素滚动的多种场景

在这里文章虽然说是多种场景,其实说白也就是元素的内容滚动,只是对象不一样罢了(如:body 或者 div)。怎么实现元素滚动到其内容的指定位置?实现元素滚动到底部有什么应用场景?等这些问题一个个从脑中浮现。现在让我们来看看怎么实现。 首先我们最常用见或者最常用的就是浏览器默认的滚动元素 body,比如滚动到页面指定的位置,或者滚动到页面的底部,这太常见了。但是在本文中我们不用 body 来作为例...

2017
10-19

JavaScript 浅拷贝与深拷贝(对象合并)

在平时的开发中我们经常会用对对象进行合并,简单的合并,比如:用户参数也默认参数的合并。有时候需要更深层次的合并,如复杂对象的合并。而这些合并就会涉及到 JavaScript 中的浅拷贝和深拷贝。浅拷贝的思路和实现也非常的简单,深拷贝相对来说就复杂一些。 浅拷贝 方法一 看过来 // ES6 方法 浅拷贝 var a1 = { a: 1 }; var a2 = { b: 2 }; var a3 = { c: 3 }; var obj = Object.assign(a1, a2...

2017
10-16

Canvas 画圆

HTML 代码(index.html) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas 画圆 - 云库前端</title> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body> <canvas id="canvas"></canvas> <script> var ican...

2017
10-15