JavaScript 做一个照片墙效果(三)

前言 这是第三个照片墙效果,这个跟之前的两个不同,这个效果是把图片做成旋转,类似于轮播,但比轮播效果要炫一些. 这个示例基本实现了: 1.可以沿着 translateX 和 translateY 两个方向旋转.不过在translateX方向作了一个范围的限制 2.只有当动画运动完后,才可以进行下次动画 3.在指定的区域内按下鼠标并滑动后可触发动画效果 在线示例:http://yunkus.com/demo/photo-wall/photo-wall-3/ HTML 代码 <!D...

2018
10-07

Canvas 实现炫丽的粒子运动效果(粒子跟随鼠标)

前言 关于粒子效果之前也做过一个可让粒子生成文字并带有一些动画的效果.相对来说现在要分享的这个效果会容易一些,代码量也会少一些,但效果也绝不会逊色于第一个。 效果: 在线示例:http://yunkus.com/demo/canvas/canvas-granule-animation-and-mouse-follow/ 简单归简单,其中 canvas 的一些用法我们要记牢.这个效果也是从网上看到的,然后就又按自己的理解并用ES6撸了一个相似的效果.话不多说,上码: ...

2018
09-27

JavaScript 做一个照片墙效果(二)

前言 之前也写过一个照片墙效果,只不过,那个相对来说比较普通,只有拖拽图片才会有动画效果,而现在这个效果会更炫一些,至于效果如果,看到示例你自有定夺.这个效果是在网上看到的,感觉还不错,所以就自己就撸了一个出来。 在线示例:http://yunkus.com/demo/javascript-photo-wall/javascript-photo-wall-2/ 样式 #imgBox{ width: 800px; height: 400px; margin: 80px auto; perspect...

2018
09-25

发布-订阅模式:一呼百应

前言 网上关于发布-订阅模式的文章已经有很多,但雷同的数不胜数,没有意思,再者我觉得网上很多文章说得不够形象生动,让人看得云里雾里的,为此我想分享下我对发布-订阅模式的理解。 发布-订阅模式之旅 发布-订阅这个在很多模式中都很常见,比如 VUE。条条道路通罗马,可能实现的方法不同,但效果是差不多的。在一些异步请求中发布-订阅模式也大有用处。我觉得这个发布-订阅模式其实作用就相当于 VUE...

2018
09-10

策略模式:以不变应万变

前言 不管什么书,你有没有发现它们都有一个共同点,就是不管一个知识点有多容易懂,作者都会用尽量多的文字来描述。我认为其中一个重要的原因就是从不同的角度来给你展现这个知识点,让你对所学知识点更加深刻,但有时候我并不这么认为,我觉得更好的做法是我给你讲完了一个套路,你可以自己去慢慢体会,理解透彻,然后再结合自己的实践工作进行尝试。我觉得把书写厚是体力活,把书写薄才是脑力活,不费...

2018
09-07

单例模式:一个人的寂寞

前言 单例模式(Singleton)说白了就是一山不能容二虎。只允许实例化一个实例对象。 原理 那单例模式的原理是什么呢?它的套路也很简单,在创建对象之前先判断下实例对象是否已经存在,如果实例对象不存在,那么就创建它,否则直接返回已有的实例对象。那创建的这个实例要保存到哪里呢?放在全局对象?No,一般的实现是通过立即执行函数和闭包实现实例的存储,然后通过对外方法来访问这个实例对象。 这...

2018
09-03

JavaScript 技巧大全

前言 这篇文章不会分享很高深的问题,只是把平时在前端开发中很常用到的东西整理出来,让经历过的东西有个家。 类型判断 console.log(Object.prototype.toString.call([1,2])); // [object Array] console.log(Object.prototype.toString.call({})); // [object Object] console.log(Object.prototype.toString.call("Hellow")); // [object String] console.log(Object.prototype...

2018
07-02

AngularJS 指令实现自定义下拉框

前言 AngularJS 的时代已经接近尾,但依然使用它的项目还是不计其数,下面就来做一个自定义的下拉框。 效果走一波: 这个下拉框可以实现: 禁用下拉框 禁用指定下拉项 选中高亮 是否默认选中第一个 是否要显示“全部”一项 自定义下拉框 样式代码 ul{ padding: 0; margin:0; list-style:none; } .dj-select-box{ position: relative; width: 200px; cursor: pointe...

2018
06-30

判断对象是否含有某个属性

前言 这其实没什么好说的,本文章只作记录。各位看官可以作选择性阅读。 hasOwnProperty() 方法 const obj = { name:"前端技术", age:"3年2月20日" } console.log(obj.hasOwnProperty("name")); // true 不管对象的属性是否可枚举,hasOwnProperty() 方法都能检测到。 注意: 如果我们使用的话,有一种情况是不可用的,就是当我们像下面通过 Object.create(null,{……}) 这...

2018
06-06

JavaScript 中的可枚举属性与继承的可枚举属性解密

前言 这篇文章主要是分享一下什么是可枚举属性和继承属性,可枚举属性和继承属性这两个词估计你已经在网上看到无数次了,但网上对于这两个东西的解释很多都不是很详细,一笔带过的居多,特别是继承属性的介绍。基本都是只见【继承属性】这四个字眼,却极少看到有关这个名词的相关介绍,所以才有了这篇文章。 可枚举属性 什么才算是可枚举属性?我们不妨回想一下,在平时的开发中我们是如何定义一个对象...

2018
06-05

原生 JavaScript 做一个接地气的富文本编辑器

前言 这里不分享富文本编辑器都有哪些,哪些富文本编辑好用,而是简单地分享一下如何做一个比较接地气的而已很简单但很实用的富文本编辑器。当然这里也不是把这个富文本编辑器做很多强大,因为也没必要,并且也不是一天两天可以做得完的,为此是这里只是想通过一个简单的例子来说明如何做一个更加贴心的富文本编辑器。 在开始之前我们先来看一看效果图: 富文本编辑器之旅 这里我先把代码贴出来,是好...

2018
05-30

字符串和数组方法整理

前言 字符串和数组两个所涉及的方法也不是很多,但不知道为什么,需要用某些方法的时候脑子里竟然不知道对应的方法叫什么,或者知道这个方法怎么写,但里面的参数,以及返回值,还是是很清楚。所在对于我自己来说,有必要整理出来。 字符串方法 startsWith() endsWith() includes() 这三个方法用法简单: const str = "hello yunkus.com!" const res = str.startsWith("hello"); // true con...

2018
05-25

pasition.js 一个很炫酷的 path 过渡动画类库

前言 动画过渡给我们带来的视觉冲击不用我多说,最近无意中发现了一个 path 过渡动画的类库 pasition.js ,pasition.js 由腾讯AlloyTeam正式发布,在学习这个类库过程中发现网上的文章绝大多数都是一个样,只是官方的一个拷贝,为此,我觉得有必会把一些东西说明白。 在这里就不把官方的介绍文章拷贝一份了,毕竟时间宝贵,不过你可以通过这个网址https://github.com/AlloyTeam/pasition#usage欣赏一下,...

2018
05-08

moment.js 一个近乎完美的日期类库

前言 其实这篇文章没什么可分享的,不是写给前端大牛,当然本博客也没有这种魅力能引来前端大牛。所以这篇文章是写给前端小白的。 怎么定义小白,其实像这种也不好说,我们不能拿在前端的工作年限来划分,因为很多人虽然在前端打拼了好多年,但水平依旧一般般,比如:我。 差点又跑题了,还是回到 momentjs 的介绍上来吧! 官方网址:http://momentjs.com/ 为了让这篇文章看起来不那么寒酸,在这里截个图...

2018
05-07

JavaScript 事件循环运行机制解密

前言 JavaScript 是单线程,这个地球人都知道,但 JavaScript 却可以做到类似多线程的感觉,这是怎么实现的呢,比如:你的程序中通过 ajax 发起了一个请求,此时你会发现,即使请求还没有返回结果,程序竟然继续往下执行了,JavaScript 的魅力就在于此,虽然我是单线程,但我可以让你有“多线程”的感觉。 上面说到的“多线程”的感觉其实就是通过 JavaScript 的事件循环机制实现的。这也就是事件循环在 Java...

2018
05-03

ejs+Egg.js+MongoDB 搭建极简版个人博客(增删改查)

前言 上一篇博文中分享了Vue+Express+MongoDB 搭建极简版个人博客(增删改查),从中接触到了 Egg.js 所以也顺便把 Egg.js 也先简单地玩一下,同样的,接下来要展示的示例也是数据的增删改查,非常地简单,只是想通过这些简单的过程来粗略地认识下 Egg.js。 个人博客搭建之旅 这个也没什么好说的,直接进入主题。 涉及到的技术栈: Egg.js MongoDB mongoose ejs 文件结构 ├── app │ ├── controll...

2018
04-10

《ES6 标准入门》查缺补漏

前言 这篇文章主要是对第一次阅读 《ES6 标准入门》 完了之后一些疏漏或者遗忘的知识点进行查缺补漏,尽管这一次也不可能把所有的知识都都补上,那至少补上了一些。本文不会一次更新完,时间也不允许,只能在空闲的琐碎时间一章一章地回味。并且像这种也不可以操作之过急,得一步一个脚印。 第2章:let 和 const 命令 1、关于 let , 在 for 循环中,循环变量部分为一个父作用域,循环体内部是一个单独...

2018
03-15

JavaScript 中的 Math.max() 和 Math.min()

前言 在 JS 中,求最大值或者最小值在平时的前端开发中极其地常见,所以这个技能我们不能没有,除了在平时撸码中很常用,在面试中也是时有出现。那么下面我们就来看看怎么求,本文主要是分享 JavaScript 中原生的方法 Math.max() 和 Math.min() ,除此之面的其它方法在这里就不说了,比如:第三方框架提示的方法,毕竟原生有的方法,我们为什么不用? 首先我们先来看看 Math.max() 和 Math.min() 的定义...

2018
03-11

ES6 中的 super 关键字

前言 关于 ES6 中的 super 关键字估计大家跟我一样还见得比较少,不过没关键,在文我们就来初探下 super 关键字。 super 关键字 在讲 super 关键字之前,我们先来看一段超简单的代码: class parent{ constructor(){} } class children extends parent{ constructor(){} } 其实在上面什么都没有做的类中的 constructor 构造方法我们也可以不写,因为类中如果没有显式地定义构造函数的话...

2018
02-01

ES6 中的构造函数(constructor)详解

前言 ES6 中的构造函数详解,在 ES5 中也已经有类似的实现了,只是在 ES6 这里换了一种方式来实现而已。 构造函数之旅 ES6 之前 在 ES6 以前我们会像下面这样定义构造函数并生成实例的: function Person(p){ this.name = p.name; this.age = p.age; } person.prototype.say = function(){ console.log(this.name,this.age); } // 并通过 new 来创建一个实例 var xiaoming =...

2018
01-30

JavaScript 中的定时器执行机制大解密

前言 JavaScript 中的定时器你一定用了不少,比如 setTimeout、setInterval 等。但我们对他的了解又有多少呢?我承认我以前一直用它只是因为他能为我延迟几秒执行某些操作,它确确实实为我解决了不少问题,还有一些比较“奇葩”(由于技术水平有限,未能找出原来)的问题也是通过定时器来解决的。但我慢慢地发现,我对定时器的了解也只是表面上的,而它的运行机制我却不闻不问,也就是我只看到了它成功的一...

2018
01-28

前端开发中的各种宽高获取整理

获取可视区的宽高 document.documentElement.clientWidth document.documentElement.clientHeight 获致滚动条滚动距离 // 主流浏览器中,用下面的代码获取值 document.documentElement.scrollTop document.documentElement.scrollLeft // 搜狗浏览器、360 浏览器、IE 浏览器中,用下面的代码获取值 document.body.scrollTop document.body.scrollLeft // 兼容写法 document.documentElemen...

2017
12-28

Echarts+百度地图实战大解密

数据展示有很多种方式,在前端里常用的就是通过 Echarts 实现数据的多种展示方式 ,因为 Echarts 它是完全免费的,还有它的强大,好用还真的让人无话可说,虽然用得不多,但感觉跟其它收费的都是那么好用,贴心。 首先我把官方的一个例子贴出来,原汁原味的代码:http://yunkus.com/demo/echarts/echarts-and-baidu-map-story/ 下面就是这个示例的效果图: 这个图都是官方的示例图,一点都没变,如果说有...

2017
12-25

对象(Object)的遍历方法整理

前言 对象的遍历与我们形影不离,不管是数组还是一个形如{ key:value} 的对象,很多时候我们都得遍历一个对象。为此有必要把遍历对象的方法整理成章,以备必时之需。 数组遍历 for 循环 for 循环可以说是最原始的遍历方法,常常被用来遍历数组。 let arr = [1,2,3,4,5,6,7]; for(var i=0;i<arr.length;i++){ console.log(i,arr[i]); } forEach() forEach() 方法是用来遍历数组的,它可以...

2017
12-20

数组(Array)的属性和方法

平时数组使用得比较多,但常常会有些方法没记住它的用法,比如:某些方法眼熟但具体的用法却不太清楚。这样的情况在我身体已经发生了很多次,所以我有必要把数组的一些属性和方法整理出来,即使自己忘记了也可以有更加直接的查阅入口。说走就走的旅程,数组可以大致分成两块属性和方法。 Array 属性 Array 的属性其实也不多,那那么两三个,具体如下: Array.length 返回数组成员个数。 Array.prototy...

2017
12-17

《ES6 标准入门》学习笔记(第二十五章:读懂 ECMAScript 规格)

《ES6 标准入门》的第二十五章主要内容也不多,但信息量可以却不少。 上面的脑图只是把书中的向个大标题摘抄下来而已也没有什么很有用的信息,通过本章我们只需要知道一点就可以了,如果要想对 JavaScript 的某些特性不了解,那么就可以到官方查看规格文件。这也是你学习 JavaScript 最基本最全面的资料。http://www.ecma-international.org/。我们不妨来感受一下,就拿上面的相等运算符为例: 首先规格对...

2017
12-16

《ES6 标准入门》学习笔记(第二十四章:编程风格)

《ES6 标准入门》的第二十四章主要讲的是编程风格。这一章跟实践就很接近了,如果你此时可以写代码的话,那么这就可以说是一个实践了。 你还可以参考这个网站:http://jscs.info/ ,来学习更多的风格规范。 上面的脑图其实可以看作是对前面章节的一个简单的总结,让你看完这章后有豁然开朗的感觉。

2017
12-16

《ES6 标准入门》学习笔记(第二十二章:Module 的语法)

《ES6 标准入门》的第二十二章主要讲了 Module 的语法和基本套路。这章内容对于日后学习 angular 2+ 很有帮助。把这篇文章号透了,在 angular 的模块导入导出就如鱼得水了。 严格模式的一些限制: 变量必须声明后再使用 函数的参数不能有同名属性,否则报错 不能使用 with 语句 不能对只读属性赋值,否则报错 不能使用前缀 0 表示八进制,否则报错 不能删除不可删除的属性,否则报错 不能删除变量 delete...

2017
12-15