前端培训-初级阶段(13、18)

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

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

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

我们要讲什么

  1. 上下左右居中的几种实现。
  2. ECMAScript核心语法结构

上下左右居中的几种实现

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

行内结构居中

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

  1. text-align: center 水平居中
  2. line-height: height; 垂直居中。行高和高设置为一样的值。
  3. vertical-align: middle; 垂直居中。这个属性是用来设置对齐方式的,通过伪元素构建一个 height:100% 然后设置居中就ok了。

块级结构居中

块结构的特点,占满整行,所以设置要点是设置自己的属性来实现

  1. margin: auto; 水平居中,自动分配剩余空间,但是正常情况下,只有水平方向有剩余空间。
  2. position:fixed;top:0;right:0;bottom:0;left:0; 垂直水平居中,这个方法有个要点,就是定宽定高,不然就占满了。当然还有要 margin:auto 来分配剩余空间才可以。
  3. position:absolute;left:50%;margin-left:一半宽度 垂直水平居中,left 是基于父级来设置的,所以需要用 margin 再拉回来,也需要定宽高
  4. position:absolute;left:50%;top:50%;transform: translate(-50%,-50%); 垂直水平居中,这个方案是上一个方案的优化版本,translate是基于自己的宽高来现实,所以可以用 -50% 来拉回。

特殊的盒子实现居中

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

  1. table-cell vertical-align: middle;text-align:center
  2. flex 就不用多说了吧,不懂的去看看上节课。还不懂就要挨锤了。
  3. grid margin: auto;

ECMAScript 核心语法结构

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

版本时间简述
ECMAScript 11997年06月首版
ECMAScript 21998年06月格式修正,以使得其形式与ISO/IEC16262国际标准一致
ECMAScript 31999年12月强大的正则表达式,更好的文字链处理,新的控制指令,异常处理,错误定义更加明确,数输出的格式化及其它改变
ECMAScript 4未完成更明确的类的定义,命名空间等等。2004年6月欧洲计算机制造商协会发表了ECMA-357标准,它是ECMAScript的一个扩延,它也被称为E4X(ECMAScript for XML)
ECMAScript 52009年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 20192019年

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

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

  1. let/var/const 的区别

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

    前端培训-初级阶段(13、18)
    前端培训-初级阶段(13、18)
    前端培训-初级阶段(13、18)

  2. 字符串扩展

    1. repeat(n),重复字符串多少次,
    2. padStart(n,s),padEnd(n,s),字符串补全长度的功能,比如前面补 0
    3. 模板字符串 反引号标识
    4. 标签模板,其实也是一个偶然机会碰到这个东西的。有个prompt(1) to win,做这个题的时候发现了这种办法。

      alert`123`
           // 等同于
           alert(123)
  3. 正则的扩展
  4. 数值的扩展

    1. isNaN() ,NaN是唯一一个自己不等于自己的。
  5. 函数的扩展

    1. 默认值 ,fucntion(a = 1){}
    2. 默认值解构,

      // 写法一
      function m1({x = 0, y = 0} = {}) {
        return [x, y];
      }
      
      // 写法二
      function m2({x, y} = { x: 0, y: 0 }) {
        return [x, y];
      }
    3. rest 参数 ,代替 arguments 对象
    4. => 函数

      1. ()=>console.log(1) 等同于 function(){return console.log(1)}
      2. ()=>{console.log(1)} 等同于 function(){console.log(1)}
      3. this对象绑定为定义时候的对象
      4. 不可以当作构造函数
      5. 不可以使用arguments对象
  6. 数组的扩展

    1. 扩展运算符,...[1,2,3]分开插入,可以用来替代 apply()
    2. Array.from(),将类数组转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
    3. Array.of() 用来修复new Array(3)的异常
    4. find() 和 findIndex(),查找元素或者下标
    5. fill() 填充一个数组
    6. entries(),keys() 和 values() 遍历
    7. includes() 判断是否存在,用来替代~indexOf
    8. flat(),flatMap() 将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。还可以传入深度
  7. 对象的扩展
  8. Proxy
  9. Promise 对象
  10. async 函数

课后作业(能写几种写几种,越多越好)

  1. 一行居中,多行居左,怎么实现?(水平居中)
  2. 一行居中,多行居中,怎么实现?(垂直居中)
  3. 实现一个重复字符串的函数。

往期内容

  1. 前端培训-初级阶段(1 - 4)
  2. 前端培训-初级阶段(5 - 8)
  3. 前端培训-初级阶段(9 - 12)

后记

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

前端培训-初级阶段(13、18)

参考资料

  1. ECMAScript --百度百科
    介绍了一些历史
  2. JavaScript 实现 --w3school.com.cn
    介绍了JS由什么构成,值得一看
  3. JavaScript 高级教程 --w3school.com.cn
    一些语法基础
  4. ECMAScript 6 入门 --ruanyifeng
    如果你想学 ES6,这本书一定不要错过

相关推荐