前端培训-初级阶段（13、18）

YorkChen 发布于2019-08-23 16:22 / 1052人阅读

摘要：年月欧洲计算机制造商协会发表了标准，它是的一个扩延，它也被称为年月首版年月日截止发布日期，的官方名称是，国际意在更频繁地发布包含小规模增量更新的新版本，下一版本将于年发布，命名为。

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

先来说一下为什么这节课跳课了，不是说中间的我们不讲了，而且上节课主讲人讲了 18，没办法我这节课补一下。

收集上几周的反馈，普遍觉得内容多的超乎想象，所以之后的培训计划会根据内容适当调整。

我们要讲什么

上下左右居中的几种实现。

ECMAScript核心语法结构

上下左右居中的几种实现

这个问题比较常见，咱们也简单说说吧。其实分为两种，一种行内结构，一种块结构。

行内结构居中

行内结构可以理解为文本，文本居中可以通过设置父元素的属性来实现。

text-align: center 水平居中

line-height: height; 垂直居中。行高和高设置为一样的值。

vertical-align: middle; 垂直居中。这个属性是用来设置对齐方式的，通过伪元素构建一个 height:100% 然后设置居中就ok了。

块级结构居中

块结构的特点，占满整行，所以设置要点是设置自己的属性来实现。2019年6月24日10:15:41-补个demo

margin: auto; 水平居中，自动分配剩余空间，但是正常情况下，只有水平方向有剩余空间。

position:fixed;top:0;right:0;bottom:0;left:0; 垂直水平居中，这个方法有个要点，就是定宽定高，不然就占满了。当然还有要 margin:auto 来分配剩余空间才可以。

position:absolute;left:50%;margin-left:负一半宽度;top:50%;margin-top:负一半宽度 垂直水平居中，left 是基于父级来设置的，所以需要用 margin 再拉回来，也需要定宽高。

position:absolute;left:50%;top:50%;transform: translate(-50%,-50%); 垂直水平居中,这个方案是上一个方案的优化版本，translate是基于自己的宽高来现实，所以可以用 -50% 来拉回。

特殊的盒子实现居中

这个东西就是说一个特殊模型，所以他自身就支持完成水平垂直居中

table-cell vertical-align: middle;text-align:center

flex 就不用多说了吧，不懂的去看看上节课。还不懂就要挨锤了。

grid margin: auto;

ECMAScript 核心语法结构

ECMAScript 是一种由 Ecma国际（前身为欧洲计算机制造商协会，英文名称是 European Computer Manufacturers Association）通过 ECMA-262 标准化的脚本程序设计语言。可以理解为是JavaScript的一个标准，但实际上 JS 是 ECMA-262 标准的实现和扩展。

版本	时间	简述
ECMAScript 1	1997年06月	首版
ECMAScript 2	1998年06月	格式修正，以使得其形式与ISO/IEC16262国际标准一致
ECMAScript 3	1999年12月	强大的正则表达式，更好的文字链处理，新的控制指令，异常处理，错误定义更加明确，数输出的格式化及其它改变
ECMAScript 4	未完成	更明确的类的定义，命名空间等等。2004年6月欧洲计算机制造商协会发表了ECMA-357标准，它是ECMAScript的一个扩延，它也被称为E4X（ECMAScript for XML）
ECMAScript 5	2009年12月	首版
ECMAScript 2015 (ES6/ES2015)	2015年6月17日	截止发布日期，JavaScript的官方名称是ECMAScript 2015，Ecma国际意在更频繁地发布包含小规模增量更新的新版本，下一版本将于2016年发布，命名为ECMAScript 2016。从现在开始，新版本将按照ECMAScript+年份的形式发布。
ECMAScript 2016 (ES7/ES2016)	2016年
ECMAScript 2017 (ES8/ES2017)	2017年
ECMAScript 2018 (ES9/ES2018)	2018年
ECMAScript 2019	2019年

这一课我真的觉得 ruanyifeng大佬的就很棒，这里我先大体介绍一下，之后有时间会开单张来介绍一些常规用法。如：Array数组对象的forEach、map、filter、reduce --之前写的一篇，这样的章节。

下面的介绍不全，只是其中的一部分

let/var/const 的区别

关键字	绑定到顶层对象（特殊情况）	变量提升	块级作用域(if、for)	描述
var	yes	yes	no	会变量提升，可多次赋值，无块级概念（function、try 的块有）
let	no	no	yes	只可声明一次，可多次赋值
const	no	no	yes	只可以赋值一次

字符串扩展

repeat(n)，重复字符串多少次，

padStart(n,s)，padEnd(n,s)，字符串补全长度的功能,比如前面补 0

模板字符串 反引号标识

标签模板，其实也是一个偶然机会碰到这个东西的。有个prompt(1) to win，做这个题的时候发现了这种办法。

     alert`123`
     // 等同于
     alert(123)

正则的扩展

数值的扩展

isNaN() ，NaN是唯一一个自己不等于自己的。

函数的扩展

默认值，fucntion(a = 1){}

默认值解构，

// 写法一
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 写法二
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

rest 参数，代替 arguments 对象

=> 函数

()=>console.log(1) 等同于 function(){return console.log(1)}

()=>{console.log(1)} 等同于 function(){console.log(1)}

this对象绑定为定义时候的对象

不可以当作构造函数

不可以使用arguments对象

数组的扩展

扩展运算符，...[1,2,3]分开插入，可以用来替代 apply()

Array.from()，将类数组转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

Array.of() 用来修复new Array(3)的异常

find() 和 findIndex()，查找元素或者下标

fill() 填充一个数组

entries()，keys() 和 values() 遍历

includes() 判断是否存在，用来替代~indexOf

flat()，flatMap() 将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。还可以传入深度

对象的扩展

Proxy

Promise 对象

async 函数

课后作业（能写几种写几种，越多越好）

一行居中，多行居左，怎么实现？（水平居中）

一行居中，多行居中，怎么实现？（垂直居中）

实现一个重复字符串的函数。

往期内容

前端培训-初级阶段（1 - 4）

前端培训-初级阶段（5 - 8）

前端培训-初级阶段（9 - 12）

后记

这里记录一下主讲人文章，这周有点忙，文章补的晚了。顺便补一下大哥给的目录。

参考资料

ECMAScript --百度百科
介绍了一些历史

JavaScript 实现 --w3school.com.cn
介绍了JS由什么构成，值得一看

JavaScript 高级教程 --w3school.com.cn
一些语法基础

ECMAScript 6 入门 --ruanyifeng
如果你想学 ES6，这本书一定不要错过

云服务器服务器托管初级前端工程师初级前端开发工程师简历前端培训前端前端前端培训

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102949.html

前端培训-中级阶段（6）- jQuery元素节点操作（2019-07-18期）

摘要：已存在节点是移动，新节点是新增。链式操作对象为。将他们的父节点移除。从中删除所有匹配的元素。一个布尔值或者指示事件处理函数是否会被复制。以上版本默认值是一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/...

tigerZH 2019-08-23 18:22 评论0 收藏0
前端培训-中级阶段（6）- jQuery元素节点操作（2019-07-18期）

摘要：已存在节点是移动，新节点是新增。链式操作对象为。将他们的父节点移除。从中删除所有匹配的元素。一个布尔值或者指示事件处理函数是否会被复制。以上版本默认值是一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/...

taoszu 2019-08-02 15:24 评论0 收藏0
前端培训-中级阶段（8）- jQuery元素属性样式操作（2019-08-01期）

摘要：前端最基础的就是。对应，是标签的属性。获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性和。一组包含作为动画属性和终值的样式属性和及其值的集合动画的额外选项。指示是否在效果队列中放置动画。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，...

james 2019-08-23 18:34 评论0 收藏0
前端培训-中级阶段（8）- jQuery元素属性样式操作（2019-08-01期）

摘要：前端最基础的就是。对应，是标签的属性。获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性和。一组包含作为动画属性和终值的样式属性和及其值的集合动画的额外选项。指示是否在效果队列中放置动画。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，...

everfly 2019-08-02 15:30 评论0 收藏0
前端培训-中级阶段（8）- jQuery元素属性样式操作（2019-08-01期）

摘要：前端最基础的就是。对应，是标签的属性。获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性和。一组包含作为动画属性和终值的样式属性和及其值的集合动画的额外选项。指示是否在效果队列中放置动画。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，...

bang590 2019-08-30 11:21 评论0 收藏0
前端培训-中级阶段（11、12）- 跨域请求原理以及实现（2019-08-22期）

摘要：上节我们讲了同源策略，这节我们讲讲如何跨域。当这些从的脚本执行出错，因为违背了同源策略为了保证用户信息不被泄露，错误信息不会显示出来，取而代之只会返回一个。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每...

binaryTree 2019-08-26 10:21 评论0 收藏0