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

前言 这其实没什么好说的,本文章只作记录。各位看官可以作选择性阅读。 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

《ES6 标准入门》学习笔记(第二十章:Class 的继承)

《ES6 标准入门》的第二十章主要是讲 Class 的继承,在 ES6 中的继承跟其它语言的继承一样,通过 extends 关键字实现子类 继承父类。而在 ES6 之前,我们一般都是通过 call 来改变 this 的指向实现“另类”的继承。在 ES6 里我们就可以光明正大的跟原汁原味的继承谈恋爱了。 继承中讲到的 prototype 可能会比较绕一点,但它不难,只要你愿意把泡妞的心思贡献出那么千万份之一就足以把这个问题弄得一清二楚了...

2017
12-15

《ES6 标准入门》学习笔记(第十四章:Promise 对象)

《ES6 标准入门》的第十四章讲 Promise 对象,Promise 对象就是用来处理异步操作的。比如:ajax 请求。在实践的项目开发中我们也总是会用到异步请求,在不久的将来,我们就可以放心地使用这个对象了。 Promise 对象没有什么神秘的地方,能过上面的脑图,你可以很方便的知道 Promise 对象的基本用法以及 Promise 对象的一些方法是如何使用的。更详细的可以网上查看相关资料,或者查阅本书,毕竟这里只是在...

2017
12-11