rockyxia 7年前 (2016-07-28) 5837浏览
写在前面 在ES6之前，Javascript还不支持原生的模块化。如果要实现模块化，我们要借助一些框架，比如：requireJS或者seaJS等；什么？没用过也没听过这些框架？没关系，它们不是我们今天要讲的重点。 今天的主角是：ES6自带的模块化。 模块化的初衷 也许你要问了，好端端的，为什么要模块化？ 现在的web系统越来越庞大、复杂，需要团队分工，多人协作，大型系统的javascript文件经常存在复...
rockyxia 7年前 (2016-07-28) 5864浏览
写在前面 类class这个概念，在其他编程语言中很早就实现了，而JavaScript语言并没有实现，一直以来，开发者都是使用函数function和原型prototype来模拟类class实现面向对象的编程。 接下来的学习，前端君默认大家都了解传统的模拟类的写法，如果你已经忘记了，ES6系列的第九节有介绍JavaScript的面向对象，点击可以查看。 现在，ES6给我们带来了好消息，它给JavaScript...
rockyxia 7年前 (2016-07-28) 6383浏览
写在前面 Promise对象，ES6新增的一个全新特性，今天我们要好好学习一下它。 Promise的设计初衷 首先，我们先一起了解一下，为什么要设计出这么一个玩意儿，用它是为了解决什么问题？ 带着这个问题，我们来回想一下日常开发中，经常需要用到ajax请求数据，拿到数据后，再进行一些处理。 可有一次，你需要用ajax进行多次请求，而且，每次请求都依赖上一次请求返回的数据来作为参数，然后继续发出请求，你把代...
rockyxia 7年前 (2016-07-27) 5848浏览
写在前面 上节介绍了Set和WeakSet，这节咱就讲Map和WeakMap是什么？当然，两者之前并没什么必然的联系，仅仅是用法类似。 什么是Map 介绍什么是Map，就不得不说起Object对象，我们都知道Object对象是键值对的集合： //Object对象 {"name":"前端君","gender":1} ES5中的key键名的类型要求一定是字符串，当然，ES6已经允许属性名的类型是Sy...
rockyxia 7年前 (2016-07-25) 5861浏览
写在前面 题外话：往后的章节，跟前面的章节联系越来越紧密，很多知识的讲解建立在前面章节的学习基础上，如果是新来的同学，建议从第一节学起。如果是忘记了前面的内容，前端君也会在适当的时候，加上跳转链接。 什么是Set结构 Set是ES6给开发者带来的一种新的数据结构，你可以理解为值的集合。我们平时见到的数组Array也是一种数据结构，但是Set跟其他数据结构不同的地方就在于：它的值不会有重复项。 基本用法 我...
rockyxia 7年前 (2016-07-22) 5860浏览
写在前面 今天我们来学习ES6给我们带来的一种新函数，在学习它之前，前端君希望你已经阅读并初步了解了上一节的内容：iterator遍历器。因为本节的内容，是建立在iterator遍历器知识的基础上。 如果是新来的童鞋，或者您还未了解iterator遍历器，我希望你可以先学习上一节的内容，点击可查看：第十四节iterator遍历器的介绍。 既然你都看到这里来了，就咱们就接着往下讲… 声明Gene...
rockyxia 7年前 (2016-07-22) 6183浏览
写在前面 第十三节我们讲了简单又实用的for…of，我们可以使用它来遍历数组，字符串，Set和Map结构，但是有没有发现，我们并没有说它可以遍历Object对象，为什么不试试用它来遍历Object对象呢？ for…of为啥不遍历Object对象 我们试试看： //定义一个的Object对象 let obj = {"name":"前端君"}; //咱们来for...of一...
rockyxia 7年前 (2016-07-21) 5843浏览
写在前面 前面几节的内容稍微偏长，代码也不少，估计有基础的同学才会跟得上，不知道大家有没有看懵了。这节来点简单但又很实用的知识，没错，就是for…of。 for…of 是什么 for…of 一种用于遍历数据结构的方法。它可遍历的对象包括数组，对象，字符串，set和map结构等具有iterator 接口的数据结构。 （上面这句话如果有看不懂的地方，自动忽略即可，后续会有章...
rockyxia 7年前 (2016-07-20) 5861浏览
写在前面 ES6给开发者提供了一个新特性:Proxy，就是代理的意思。也就是我们这一节要介绍的知识点。 以前，ATM还没有那么流行的时候（暴露年纪），我们去银行存款或者取款的时候，需要在柜台前排队，等柜台工作人员帮我们办理业务，这也是一种代理，我们自己无法修改我们银行账户上的数据，需要代理给柜员，帮我们办理存钱或者取现业务，而Proxy也是这样的一种机制。 Proxy的实现 我们先来看看Proxy的实现：...
rockyxia 7年前 (2016-07-19) 9959浏览
写在前面 页面中CSS居中的问题我们经常能遇到，有简单的行内元素水平居中、块级元素水平居中，也有较为复杂的未知高度宽度的垂直居中问题，下面我们来把所有有关CSS居中的情况都总结一下，欢迎补充。 曾经的一篇文章：DIV未知高度垂直居中的CSS解决方法（2011-09-29） 水平居中 行内元素 把行内元素嵌套在一个DIV中，并且在DIV中设置以下样式 div { text-align: cen...
rockyxia 7年前 (2016-07-19) 5851浏览
写在前面 连续连载了几篇《ES6对xxx的扩展》，本节咱们换换口味，介绍一种全新的数据类型：Symbol，中文意思为：标志，记号。音标：[ˈsɪmbəl]。 数据类型 在介绍Symbol之前，我们简单介绍一下JavaScript的数据类型： JavaScript有6中数据类型，分别是： String 字符串类型 Number 数字类型 Object 对象类型 Boolean 布尔值类型 Null 空值 ...
rockyxia 7年前 (2016-07-18) 5848浏览
写在前面 ES6一路扩展，字符串、数组、数值、对象无一“幸免”，ES6说要雨露均沾，函数也不能落下，今天，就来讲解ES6对函数的扩展。 姿势准备好了吗？前方高能，第10节开讲…… 参数的默认值 在开发中，给函数的参数指定默认值，是很普遍很常见的一个需求，我们先来回顾一下传统的实现方式，对比着看更好理解： function person(n,a){ var name =...
rockyxia 7年前 (2016-07-15) 5850浏览
写在前面 ES6不仅为字符串、数值和数组带来了扩展，也为对象带来了很多新特性。这一节，我们来一起学习一下对象的扩展。 对象的传统表示法 我们回顾一下，对象的传统表示法： let person = { "name":"张三", "say":function(){ alert("你好吗？"); } } 上面的案例很简单，变量person就是一个对象，对...
rockyxia 7年前 (2016-07-15) 5917浏览
写在前面 前面讲了字符串和数值的扩展，今天要讲的是：数组的扩展。不知道大家能否跟得上这个节奏，你们在阅读中对讲解有存在疑惑，记得留言提出来，要真正地理解，否则白白浪费阅读时间就得不偿失了。 写过javascript代码的同学都知道数组是一个很常用的数据结构，能给我们带来很多方便。如今，ES6对数组进行进一步的扩展，为我们带来更多的特性，开发者都很期待。 第八节，开始学习吧….. 我们先来学几个...
rockyxia 7年前 (2016-07-13) 5875浏览
写在前面 上一节和大家学习了字符串的扩展，这一节轮到了数值，我们一起来学习数值的扩展。 这几天公众号都收到了很多同学问，什么时候出下一节，大家的期待和学习热情如此高涨，前端君也不会怠慢，继续更新。剧透一下，这一节并不会很烧脑，都是介绍类的知识讲解，理解性的东西不多，初学者们也可以愉快地看完。 传统的写法 在介绍数值的扩展之前我们来看看旧的规范和使用方式，有对比才能看出不同之处。 在ES5中，我们存在几个全...
rockyxia 7年前 (2016-07-12) 5861浏览
写在前面 工作日的推送尝试一下在晚上发，一个是考虑大家下班了放学了，心情轻松愉悦，适合阅读；另一个是上班时间情绪紧绷，没有心思也没有时间去完整地读完这种技术类的文章。（即便通俗易懂） 第六节，开讲啦…… 学过上一节的解构赋值就知道，ES6确实给我们带来不少方便，但是ES6的方便之处远不止这些，今天又带来一个很实用的东西：字符串的扩展。 字符串的扩展 简答说，ES6对字符串新增了一些...
rockyxia 7年前 (2016-07-06) 5845浏览
写在前面 学完了前4节，今天我给大家带来的是一个令人兴奋的特性：解构赋值。这个章节代码片段有点偏多，不过可以放心，一点都不烧脑，还是老样子：简单易懂。 什么是解构赋值 按照一贯的套路，接下来的内容是解释：什么是解构赋值？ 来看看官方的解释： ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。 这句话也不难理解，但是前端君怎么会这么敷衍了事，随便贴一...
rockyxia 7年前 (2016-07-03) 14375浏览
写在前面 写在正文前，本来这一节的内容应该放在第二节更合适，因为当时就有同学问ES6的兼容性如何，如何在浏览器兼容ES6的特性，这节前端君会介绍一个抱砖引玉的操作案例。 为什么ES6会有兼容性问题？ 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布，而到了今天，我们在编程中如果使用了ES6的新特性，浏览器若没有更新版本，或者新版本中没有对ES6的特性进行兼容，那么浏览器肯定无法识别我们的...
rockyxia 7年前 (2016-06-30) 5914浏览
写在前面 自从使用git和sass等需要命令行的工具之后，经常在使用的时候忘记具体的命令是怎么写的，需要百度才能搞好，但其实经常使用的并不多，所以在此建立一个记录本，方便自己下次使用。 SASS命令 sass //sass命令 --style //生成文件格式，一下四种方式 nested： 嵌套缩进的css代码，它是默认值。 expanded： 没有缩进的、扩展...