最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

2016年07月的内容

ES6

ES6第二十节:一个缺失已久的特性 — module模块

rockyxia 2年前 (2016-07-28) 3143浏览

写在前面 在ES6之前,Javascript还不支持原生的模块化。如果要实现模块化,我们要借助一些框架,比如:requireJS或者seaJS等;什么?没用过也没听过这些框架?没关系,它们不是我们今天要讲的重点。 今天的主角是:ES6自带的模块化。 模块化的初衷 也许你要问了,好端端的,为什么要模块化? 现在的web系统越来越庞大、复杂,需要团队分工,多人协作,大型系统的javascript文件经常存在复...

ES6

ES6第十九节:终于,JavaScript也有了类(class)的概念

rockyxia 2年前 (2016-07-28) 3346浏览

写在前面 类class这个概念,在其他编程语言中很早就实现了,而JavaScript语言并没有实现,一直以来,开发者都是使用函数function和原型prototype来模拟类class实现面向对象的编程。 接下来的学习,前端君默认大家都了解传统的模拟类的写法,如果你已经忘记了,ES6系列的第九节有介绍JavaScript的面向对象,点击可以查看。 现在,ES6给我们带来了好消息,它给JavaScript...

ES6

ES6第十八节:教你如何使用ES6的Promise对象

rockyxia 2年前 (2016-07-28) 3805浏览

写在前面 Promise对象,ES6新增的一个全新特性,今天我们要好好学习一下它。 Promise的设计初衷 首先,我们先一起了解一下,为什么要设计出这么一个玩意儿,用它是为了解决什么问题? 带着这个问题,我们来回想一下日常开发中,经常需要用到ajax请求数据,拿到数据后,再进行一些处理。 可有一次,你需要用ajax进行多次请求,而且,每次请求都依赖上一次请求返回的数据来作为参数,然后继续发出请求,你把代...

ES6

ES6第十七节:ES6新增的Map和WeakMap 又是什么东西?

rockyxia 2年前 (2016-07-27) 3264浏览

写在前面 上节介绍了Set和WeakSet,这节咱就讲Map和WeakMap是什么?当然,两者之前并没什么必然的联系,仅仅是用法类似。 什么是Map 介绍什么是Map,就不得不说起Object对象,我们都知道Object对象是键值对的集合: //Object对象 {"name":"前端君","gender":1} ES5中的key键名的类型要求一定是字符串,当然,ES6已经允许属性名的类型是Sy...

ES6

ES6第十六节:ES6新增的 Set 和 WeakSet 是什么东西?

rockyxia 2年前 (2016-07-25) 3175浏览

写在前面 题外话:往后的章节,跟前面的章节联系越来越紧密,很多知识的讲解建立在前面章节的学习基础上,如果是新来的同学,建议从第一节学起。如果是忘记了前面的内容,前端君也会在适当的时候,加上跳转链接。 什么是Set结构 Set是ES6给开发者带来的一种新的数据结构,你可以理解为值的集合。我们平时见到的数组Array也是一种数据结构,但是Set跟其他数据结构不同的地方就在于:它的值不会有重复项。 基本用法 我...

ES6

ES6第十五节:有一种特殊的函数叫:Generator函数

rockyxia 2年前 (2016-07-22) 2886浏览

写在前面 今天我们来学习ES6给我们带来的一种新函数,在学习它之前,前端君希望你已经阅读并初步了解了上一节的内容:iterator遍历器。因为本节的内容,是建立在iterator遍历器知识的基础上。 如果是新来的童鞋,或者您还未了解iterator遍历器,我希望你可以先学习上一节的内容,点击可查看:第十四节iterator遍历器的介绍。 既然你都看到这里来了,就咱们就接着往下讲… 声明Gene...

ES6

ES6第十四节:ES6的 Iterator 遍历器到底是什么?

rockyxia 2年前 (2016-07-22) 3687浏览

写在前面 第十三节我们讲了简单又实用的for…of,我们可以使用它来遍历数组,字符串,Set和Map结构,但是有没有发现,我们并没有说它可以遍历Object对象,为什么不试试用它来遍历Object对象呢? for…of为啥不遍历Object对象 我们试试看: //定义一个的Object对象 let obj = {"name":"前端君"}; //咱们来for...of一...

ES6

ES6第十三节:易学又实用的新特性:for…of

rockyxia 2年前 (2016-07-21) 3397浏览

写在前面 前面几节的内容稍微偏长,代码也不少,估计有基础的同学才会跟得上,不知道大家有没有看懵了。这节来点简单但又很实用的知识,没错,就是for…of。 for…of 是什么 for…of 一种用于遍历数据结构的方法。它可遍历的对象包括数组,对象,字符串,set和map结构等具有iterator 接口的数据结构。 (上面这句话如果有看不懂的地方,自动忽略即可,后续会有章...

ES6

ES6第十二节:ES6 Proxy代理 和 去银行存款有什么关系?

rockyxia 2年前 (2016-07-20) 3225浏览

写在前面 ES6给开发者提供了一个新特性:Proxy,就是代理的意思。也就是我们这一节要介绍的知识点。 以前,ATM还没有那么流行的时候(暴露年纪),我们去银行存款或者取款的时候,需要在柜台前排队,等柜台工作人员帮我们办理业务,这也是一种代理,我们自己无法修改我们银行账户上的数据,需要代理给柜员,帮我们办理存钱或者取现业务,而Proxy也是这样的一种机制。 Proxy的实现 我们先来看看Proxy的实现:...

CSS居中问题的各种解决方案(水平、垂直)
CSS

CSS居中问题的各种解决方案(水平、垂直)

rockyxia 2年前 (2016-07-19) 5177浏览

写在前面 页面中CSS居中的问题我们经常能遇到,有简单的行内元素水平居中、块级元素水平居中,也有较为复杂的未知高度宽度的垂直居中问题,下面我们来把所有有关CSS居中的情况都总结一下,欢迎补充。 曾经的一篇文章:DIV未知高度垂直居中的CSS解决方法(2011-09-29) 水平居中 行内元素 把行内元素嵌套在一个DIV中,并且在DIV中设置以下样式 div { text-align: cen...

ES6

ES6第十一节:JavaScript有了一种全新的数据类型:Symbol

rockyxia 2年前 (2016-07-19) 3231浏览

写在前面 连续连载了几篇《ES6对xxx的扩展》,本节咱们换换口味,介绍一种全新的数据类型:Symbol,中文意思为:标志,记号。音标:[ˈsɪmbəl]。 数据类型 在介绍Symbol之前,我们简单介绍一下JavaScript的数据类型: JavaScript有6中数据类型,分别是: String 字符串类型 Number 数字类型 Object 对象类型 Boolean 布尔值类型 Null 空值 ...

ES6

ES6第十节:ES6为函数做了哪些扩展?

rockyxia 2年前 (2016-07-18) 3396浏览

写在前面 ES6一路扩展,字符串、数组、数值、对象无一“幸免”,ES6说要雨露均沾,函数也不能落下,今天,就来讲解ES6对函数的扩展。 姿势准备好了吗?前方高能,第10节开讲…… 参数的默认值 在开发中,给函数的参数指定默认值,是很普遍很常见的一个需求,我们先来回顾一下传统的实现方式,对比着看更好理解: function person(n,a){ var name =...

ES6第九节:ES6为对象做了哪些扩展?
ES6

ES6第九节:ES6为对象做了哪些扩展?

rockyxia 2年前 (2016-07-15) 3152浏览

写在前面 ES6不仅为字符串、数值和数组带来了扩展,也为对象带来了很多新特性。这一节,我们来一起学习一下对象的扩展。 对象的传统表示法 我们回顾一下,对象的传统表示法: let person = { "name":"张三", "say":function(){ alert("你好吗?"); } } 上面的案例很简单,变量person就是一个对象,对...

ES6第八节:ES6为数组做了哪些扩展?
ES6

ES6第八节:ES6为数组做了哪些扩展?

rockyxia 2年前 (2016-07-15) 3055浏览

写在前面 前面讲了字符串和数值的扩展,今天要讲的是:数组的扩展。不知道大家能否跟得上这个节奏,你们在阅读中对讲解有存在疑惑,记得留言提出来,要真正地理解,否则白白浪费阅读时间就得不偿失了。 写过javascript代码的同学都知道数组是一个很常用的数据结构,能给我们带来很多方便。如今,ES6对数组进行进一步的扩展,为我们带来更多的特性,开发者都很期待。 第八节,开始学习吧….. 我们先来学几个...

ES6第七节:ES6为数值做了哪些扩展?
ES6

ES6第七节:ES6为数值做了哪些扩展?

rockyxia 2年前 (2016-07-13) 3207浏览

写在前面 上一节和大家学习了字符串的扩展,这一节轮到了数值,我们一起来学习数值的扩展。 这几天公众号都收到了很多同学问,什么时候出下一节,大家的期待和学习热情如此高涨,前端君也不会怠慢,继续更新。剧透一下,这一节并不会很烧脑,都是介绍类的知识讲解,理解性的东西不多,初学者们也可以愉快地看完。 传统的写法 在介绍数值的扩展之前我们来看看旧的规范和使用方式,有对比才能看出不同之处。 在ES5中,我们存在几个全...

ES6第六节:ES6为字符串String带来哪些好玩的特性?
ES6

ES6第六节:ES6为字符串String带来哪些好玩的特性?

rockyxia 2年前 (2016-07-12) 3217浏览

写在前面 工作日的推送尝试一下在晚上发,一个是考虑大家下班了放学了,心情轻松愉悦,适合阅读;另一个是上班时间情绪紧绷,没有心思也没有时间去完整地读完这种技术类的文章。(即便通俗易懂) 第六节,开讲啦…… 学过上一节的解构赋值就知道,ES6确实给我们带来不少方便,但是ES6的方便之处远不止这些,今天又带来一个很实用的东西:字符串的扩展。 字符串的扩展 简答说,ES6对字符串新增了一些...

ES6

ES6第五节:一个令人兴奋的ES6新特性:解构赋值

rockyxia 2年前 (2016-07-06) 2825浏览

写在前面 学完了前4节,今天我给大家带来的是一个令人兴奋的特性:解构赋值。这个章节代码片段有点偏多,不过可以放心,一点都不烧脑,还是老样子:简单易懂。 什么是解构赋值 按照一贯的套路,接下来的内容是解释:什么是解构赋值? 来看看官方的解释: ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 这句话也不难理解,但是前端君怎么会这么敷衍了事,随便贴一...

ES6

ES6第四节:教你如何快速让浏览器兼容ES6特性

rockyxia 2年前 (2016-07-03) 10777浏览

写在前面 写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例。 为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性进行兼容,那么浏览器肯定无法识别我们的...

我的知识库

我的常用命令记录本(git/sass/node)

rockyxia 2年前 (2016-06-30) 3398浏览

写在前面 自从使用git和sass等需要命令行的工具之后,经常在使用的时候忘记具体的命令是怎么写的,需要百度才能搞好,但其实经常使用的并不多,所以在此建立一个记录本,方便自己下次使用。 SASS命令 sass //sass命令 --style //生成文件格式,一下四种方式 nested: 嵌套缩进的css代码,它是默认值。 expanded: 没有缩进的、扩展...