前端学习分享

大前端的概念

developer

在软件系统中，通俗意义上来说，和用户直接打交道的那部分叫”前端（front-end）“，而用户看不到的那部分就叫”后端（back-end）“。

“大前端”，最近几年国内比较火的一个词。这个词，也延伸了“前端”在“端”这个概念上的边界，不在局限于传统前端Web端，而是有更多的终端加入进来，移动端、PC端、TV端等，都可以算在“大前端”的范畴内。

正如简书卓同学在《大前端时代下App开发者的生存之道》一文所讲，在这样一种大前端的时代下，一个合格的开发者显然是 js + iOS/Android，可以是一个熟练的前端学习一点 native，或者是 native 程序员会 js。

也正如阮一峰大牛在《前端开发的历史和趋势》一文中所提到的，“未来只有两种软件工程师，端工程师（手机端，PC 端，TV 端，VR 端等）和云工程师。”

前端学习路线

下面我将从以下几个方面介绍前端的学习路线：

1）前端三剑客：HTML，CSS，JS

html_css_js

（1）HTML（超文本标记语言——HyperText Markup Language）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

相关概念：元素（Element），属性（Attribute）

（2）CSS（层叠样式表——Cascading Style Sheets）

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}
p {
  color: red;
}

相关概念：属性（Property），属性值（Value）

CSS样式的优先级：

ID选择器(#) > 类选择器(.) > 类型选择器(元素) > 行内样式表 > 内部样式表 > 外部样式表 > 浏览器默认设置

Flex 弹性布局：

flex container（Flex 容器），flex item（Flex 项目），main axis（主轴），cross axis（交叉轴）等

Grid 网格布局：

grid container（网格容器），grid item（网格项目），grid line（网格线），grid track（网格轨道），grid cell（网格单元格），grid area（网格区域）

（3）JavaScript

JavaScript 的标准是 ECMAScript 。2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”。

I. 基础语法

七种数据类型：number，string，boolean，object，undefined，null，symbol（ES6）。
对象是最复杂的数据类型，又可以分成三个子类型：狭义的对象（object），数组（array），函数（function）。
JavaScript 内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。所以，1与1.0是相同的，是同一个数。
由于 HTML 语言的属性值使用双引号，所以很多项目约定 JavaScript 语言的字符串只使用单引号。
对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。对象的所有键名都是字符串（ES6 又引入了 Symbol 值也可以作为键值），所以加不加引号都可以。
数组的特殊性体现在，它的键名是按次序排列的一组整数（0，1，2…），其实也是字符串。
在 JavaScript 语言中又称函数为第一等公民。

II. ES6 语法

ES5 只有两种声明变量的方法：var命令和function命令。ES6 新增了let，const命令，import命令和class命令，一共有 6 种声明变量的方法。
变量的解构赋值用途很多:（1）交换变量的值（2）从函数返回多个值（3）函数参数的定义（4）提取 JSON 数据（5）函数参数的默认值（6）遍历 Map 结构（7）输入模块的指定方法
ES6 允许为函数的参数设置默认值。
ES6 允许使用“箭头”（=>）定义函数。
ES6 一共有 5 种方法可以遍历对象的属性：（1）for…in（2）Object.keys(obj)（3）Object.getOwnPropertyNames(obj)（4）Object.getOwnPropertySymbols(obj)（5）Reflect.ownKeys(obj)
Promise对象有以下两个特点。
（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。
ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

III. 重难点理解

箭头函数
箭头函数有几个使用注意点。
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。
另外，由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。
原型
大部分面向对象的编程语言，都是通过“类”（class）来实现对象的继承。JavaScript 语言的继承则是通过“原型对象”（prototype）。
原型对象的作用，就是定义所有实例对象共享的属性和方法。
JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型……
闭包
闭包即能够读取其他函数内部变量的函数。
闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。闭包的另一个用处，是封装对象的私有属性和私有方法。
this，super
this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。注意，super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。