《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 标准入门》学习笔记(第二章: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

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

JavaScript 中的 this 关键字

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

2017
10-26

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

JavaScript HTML DOM Document 对象属性和方法

Document 对象属性 属性 描述 body 提供对 <body> 元素的直接访问。 对于定义了框架集的文档,该属性引用最外层的 <frameset>。 cookie 设置或返回与当前文档有关的所有 cookie。 domain 返回当前文档的域名。 lastModified 返回文档被最后修改的日期和时间。 referrer 返回载入当前文档的文档的 URL。 title 返回当前文档的标题。 URL 返回当前文档的 URL。 Docum...

2017
10-15

JavaScript HTML DOM Element 对象属性和方法

属性 / 方法 描述 套路 element.accessKey 设置或返回元素的快捷键。 element.attributes 返回元素属性的 NamedNodeMap。 element.childNodes 返回元素子节点的 NodeList。 element.className 设置或返回元素的 class 属性。 element.clientWidth 返回元素的可见宽度(包括padding)。 element.clientHeight 返回元素的可见高度(包括padding)。 element.offsetWidth 返回元素的宽度...

2017
10-14

Canvas 画箭头

这篇文章也比较简单,用 Canvas 来画个箭头,可以从简单的例子中学到或者巩固对 Canvas 的知识点。什么东西都不要觉得好像一眼就能看到明白了,自认为码一篇是没必要的,但我个人觉得看一篇别人的代码,不如自己码一篇代码印象更加深刻。作为敲码的人,万万不能眼高手低。 HTML 代码(index.html) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

2017
10-13

ES6 let cost 基本命令

说明迟,那时快,ES6 说来就来,作为前端水军不得不默默地开始 ES6 的学习之旅,时不我待,该拥抱时就必需拥抱。那就让我们开始吧! 与之前的变量声明不同,到了ES6 分工就非常地明确了。不像之前的简单粗暴一个 var 走遍天下都不怕。如今 ES6 把 var 折成了两个一个是 let 一个是 cost。但是在程序中你依然可以同时使用这三个命令。那么它们之间有什么异同呢? 首先我们先来看看ES6 中的两个基本命令是如...

2017
10-12

JavaScipt 中函数声明与函数表达式的区别

在 JavaScript 中函数可以说是无处不在,没有了它,在 JavaScript 的世界里你就寸步难行,心有余而力不足。但在这篇文章里,我们不对函数作过多的分享,而是来看看 JavaScipt 中函数声明与函数表达式之间有什么区别。虽然这是一个很小的点,那是知道了有这么一回事,在以后的开发中你很有可能会快人一点。 要想知道它们之间的区别,我们只需要来看看两段代码就可以了: 函数声明 runDeclaration(); funct...

2017
10-11

AngularJS 多个控制器共享服务

多个控制器共享同一个服务(Service),就是一个控制器操作的数据会影响到其它控制器中的数据。 下面直接贴出代码: HTML 代码 index.html <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"> <title>AngularJS 多个控制器共享服务</title> <link rel="stylesheet" href="http://yunkus.com/demo/lib/css/bootstrap...

2017
09-27

Element.scrollIntoView() 用法

Element.scrollIntoView() 可以让元素滚动到可窗口可视区域。类似于我们平时用到的锚文本功能。 语法 看这里 element.scrollIntoView(); element.scrollIntoView(alignToTop); // Boolean parameter element.scrollIntoView(scrollIntoViewOptions); // Object parameter 参数 alignToTop alignToTop 为可选的布尔值类型 如果 alignToTop 为 true 或者不传,窗口会尽量滚动自身顶部与元素顶部对...

2017
09-26

AngularJS $timeout $interval 定时器用法

前言 原生的 JavaScript 已经给我们提示了setTimeout 和 setInterval 了,为什么 Angular 还给我们这两个东西($timeout $interval)呢?。因为在AngularJS 中如果你使用原生的setTimeout 和 setInterval 的话,在计时器里更改的值是不是自动更新到页面中的,而$timeout 和 $interval 就可以做到,也就是说 AngularJS 为我们把原生 JavaScript 的 setTimeout 和 setInterval 做了封装。 看这里 <!DOC...

2017
09-23

AngularJS ng-repeat 遍历完成(repeatFinish)

AngularJS 中的 ng-repeat 相信你已经再熟悉不过了,在这里也没有什么好说的,本文主要是想分享下 ng-repeat 完成的判断。这个判断也很常用,比如页面中的轮播图就很有可能会用到这个判断。所以我们现在就开始吧! 看这里 <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"> <title>AngularJS $repeatFinish</title> <...

2017
09-23

AngularJS $cacheFactory 缓存用法

前言 缓存有很多种,比如本地缓存、会话、以及本文将要介绍的 $cacheFactory ,它们能给我们带来不少好处,比如数据的临时存储,下面就来分享分享这个好东西。 看这里 <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"> <title>AngularJS $cacheFactory 缓存</title> <script src="http://yunkus.com/demo/lib/js/...

2017
09-23

JavaScript 判断对象是否为空

前言 在 JavaScript 的世界我们会遇到很多种意想不到的情况,更不用说如何判断对象是否为空这样的常用技巧了。本文不会长,几段代码就结束了,所以相信你应该可以在两分钟内看完。 怎么判断一个对象是否为空呢?套路也不多,就几种。我就把它们罗列出来,希望你喜欢: 空对象之旅 方法一:JSON.stringify() JSON.stringify(),用于把一个对象解析成字符串,返回值为JSON 文本的字符串。 看这里 var ...

2017
09-14

AngularJS 实现省市区三级联动功能

省市区三级联动功能无处不在,所以本文就来分享下如何用 AngularJS 实现省市区的三级联动功能。AngularJS  实现这个功能极其的简单,主要还是得看数据结构,如果数据结果合理,基本都不用写 JS 代码。不信,我们走着瞧! 省市区三级联之旅 因为是基于 AngularJS,所以直接把代码贴出来。 看这里 <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"&...

2017
09-12

AngularJS ng-options 指令套路大全

前言 下拉框无处不在,我们不能小看它,因为它的功能还是很实在的。下面就把 AngularJS 中的 ng-options 指令整理成文。以备不时之需。 ng-options 指令 ng-options 指令说强大也不强大,但它可以帮助我们实现一些常用的功能,比如:下拉联动选择。ng-options 根据其处理的数据大致可以分为三大类,下面我们将逐个记录。 数组型下拉框 看这里 <!DOCTYPE html> <html lang="en" ng-app="yk...

2017
09-11

AngularJs 数据表格化(完美展示)

前言 AngularJs 的强大之处不必多说,在平时的开发中我们经常会用来表格来展示相关数据,并且可以新增、删除、修改数据,你甚至还可以按不同的关键字对数据进行排序。这个功能都是极常见的。所以在这里我们在必要用专门一篇文章来分享它。 AngularJS 数据表格化之旅 HTML 代码 <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"> <title>...

2017
09-10

JavaScript 正则表达式用法及常用的正则表达式整理

前言 正则表达式功能之强大,不用多说,不敢想象没有正则表达式的程序世界里会是怎么样的。正则表达式是一种匹配的模式,用于匹配一个或者多个字符串。 字符串常用的一方法如: indexOf 查找下标(通过字符串) substring 获取子字符串(有两个参数,开始位置,结束位置,但不包含结束位置) charAt 获取某个字符(通过下标) split 分割字符获取数组 但在这里我们通过正则来完成字符串的一些操作。 判...

2017
08-26

腾讯地图 API 使用指南

前言 地图功能对于我们的日常生活来说非常地重要,不管你去到哪里都需要地图为你保驾护航,这次整理了下调用腾讯地图 API 时的一些有用的东西,不为别的只为让看到的人节省点时间,时间无价,但我愿意把浪费了自己时间的一些东西分享出来,让“前人种树后人乘凉”的美好品质传承下去。 资料整理 在项目中如果我们是通过 requirejs 来管理 js 。那么你肯定会遇到这样的问题。 看这里 require.config({ ...

2017
08-05

angularjs 自定义指令(directive)

前言 一个指令(directive)就相当一个模块,可以把它当作一个功能的模块。把一个功能做成指令后,你就可以反复重用它,而不需要写多份代码。 基本用法 基本用法就直接上码了: HTML 代码 <!DOCTYPE html> <html lang="en" ng-app="yunkus"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

2017
08-02

AngularJS 事件传播($broadcast() || $emit())

前言 由于某种原因我们需要在不同的 controller 之间进行通信,以达到一些特别的需要。那么我们就可以用AngularJS 给我们提供的两个方法配合使用来达到预期效果。这两个方法就是$broadcast() 和 $emit()。 费话少说 $broadcast() $broadcast() 翻译成中文就是广播。也就是上级向下级推送信息。类似于原生 JavaScript 中的事件捕获。 $emit() $emit() 与$broadcast() 正好相反。$emit() 方法向上推...

2017
07-30