linong
  • 10.7k

前端培训-初级阶段(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了。

块级结构居中

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

  1. margin: auto; 水平居中,自动分配剩余空间,但是正常情况下,只有水平方向有剩余空间。
  2. position:fixed;top:0;right:0;bottom:0;left:0; 垂直水平居中,这个方法有个要点,就是定宽定高,不然就占满了。当然还有要 margin:auto 来分配剩余空间才可以。
  3. position:absolute;left:50%;margin-left:负一半宽度;top:50%;margin-top:负一半宽度 垂直水平居中,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 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 --之前写的一篇,这样的章节。

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

  1. let/var/const 的区别

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

    clipboard.png
    clipboard.png
    clipboard.png

  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)

后记

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

clipboard.png

参考资料

  1. ECMAScript --百度百科
    介绍了一些历史
  2. JavaScript 实现 --w3school.com.cn
    介绍了JS由什么构成,值得一看
  3. JavaScript 高级教程 --w3school.com.cn
    一些语法基础
  4. ECMAScript 6 入门 --ruanyifeng
    如果你想学 ES6,这本书一定不要错过
阅读 933更新于 6月24日
推荐阅读
javascript-lNong
用户专栏

只此一生,何必从众

750 人关注
62 篇文章
专栏主页
目录