前端培訓-初級階段（13、18）

YorkChen 發(fā)布于2019-08-23 16:22 / 1228人閱讀

摘要：年月歐洲計算機制造商協(xié)會發(fā)表了標準，它是的一個擴延，它也被稱為年月首版年月日截止發(fā)布日期，的官方名稱是，國際意在更頻繁地發(fā)布包含小規(guī)模增量更新的新版本，下一版本將于年發(fā)布，命名為。

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每周四）。

先來說一下為什么這節(jié)課跳課了，不是說中間的我們不講了，而且上節(jié)課主講人講了 18，沒辦法我這節(jié)課補一下。

收集上幾周的反饋，普遍覺得內(nèi)容多的超乎想象，所以之后的培訓計劃會根據(jù)內(nèi)容適當調(diào)整。

我們要講什么

上下左右居中的幾種實現(xiàn)。

ECMAScript核心語法結構

上下左右居中的幾種實現(xiàn)

這個問題比較常見，咱們也簡單說說吧。其實分為兩種，一種行內(nèi)結構，一種塊結構。

行內(nèi)結構居中

行內(nèi)結構可以理解為文本，文本居中可以通過設置父元素的屬性來實現(xiàn)。

text-align: center 水平居中

line-height: height; 垂直居中。行高和高設置為一樣的值。

vertical-align: middle; 垂直居中。這個屬性是用來設置對齊方式的，通過偽元素構建一個 height:100% 然后設置居中就ok了。

塊級結構居中

塊結構的特點，占滿整行，所以設置要點是設置自己的屬性來實現(xiàn)。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%); 垂直水平居中,這個方案是上一個方案的優(yōu)化版本，translate是基于自己的寬高來現(xiàn)實，所以可以用 -50% 來拉回。

特殊的盒子實現(xiàn)居中

這個東西就是說一個特殊模型，所以他自身就支持完成水平垂直居中

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

flex 就不用多說了吧，不懂的去看看上節(jié)課。還不懂就要挨錘了。

grid margin: auto;

ECMAScript 核心語法結構

ECMAScript 是一種由 Ecma國際（前身為歐洲計算機制造商協(xié)會，英文名稱是 European Computer Manufacturers Association）通過 ECMA-262 標準化的腳本程序設計語言?？梢岳斫鉃槭荍avaScript的一個標準，但實際上 JS 是 ECMA-262 標準的實現(xiàn)和擴展。

版本	時間	簡述
ECMAScript 1	1997年06月	首版
ECMAScript 2	1998年06月	格式修正，以使得其形式與ISO/IEC16262國際標準一致
ECMAScript 3	1999年12月	強大的正則表達式，更好的文字鏈處理，新的控制指令，異常處理，錯誤定義更加明確，數(shù)輸出的格式化及其它改變
ECMAScript 4	未完成	更明確的類的定義，命名空間等等。2004年6月歐洲計算機制造商協(xié)會發(fā)表了ECMA-357標準，它是ECMAScript的一個擴延，它也被稱為E4X（ECMAScript for XML）
ECMAScript 5	2009年12月	首版
ECMAScript 2015 (ES6/ES2015)	2015年6月17日	截止發(fā)布日期，JavaScript的官方名稱是ECMAScript 2015，Ecma國際意在更頻繁地發(fā)布包含小規(guī)模增量更新的新版本，下一版本將于2016年發(fā)布，命名為ECMAScript 2016。從現(xiàn)在開始，新版本將按照ECMAScript+年份的形式發(fā)布。
ECMAScript 2016 (ES7/ES2016)	2016年
ECMAScript 2017 (ES8/ES2017)	2017年
ECMAScript 2018 (ES9/ES2018)	2018年
ECMAScript 2019	2019年

這一課我真的覺得 ruanyifeng大佬的就很棒，這里我先大體介紹一下，之后有時間會開單張來介紹一些常規(guī)用法。如：Array數(shù)組對象的forEach、map、filter、reduce --之前寫的一篇，這樣的章節(jié)。

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

let/var/const 的區(qū)別

關鍵字	綁定到頂層對象（特殊情況）	變量提升	塊級作用域(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，做這個題的時候發(fā)現(xiàn)了這種辦法。

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

正則的擴展

數(shù)值的擴展

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

函數(shù)的擴展

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

默認值解構，

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

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

rest 參數(shù) ，代替 arguments 對象

=> 函數(shù)

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

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

this對象綁定為定義時候的對象

不可以當作構造函數(shù)

不可以使用arguments對象

數(shù)組的擴展

擴展運算符，...[1,2,3]分開插入，可以用來替代 apply()

Array.from()，將類數(shù)組轉為真正的數(shù)組：類似數(shù)組的對象（array-like object）和可遍歷（iterable）的對象（包括 ES6 新增的數(shù)據(jù)結構 Set 和 Map）。

Array.of() 用來修復new Array(3)的異常

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

fill() 填充一個數(shù)組

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

includes() 判斷是否存在，用來替代~indexOf

flat()，flatMap() 將嵌套的數(shù)組“拉平”，變成一維的數(shù)組。該方法返回一個新數(shù)組，對原數(shù)據(jù)沒有影響。還可以傳入深度

對象的擴展

Proxy

Promise 對象

async 函數(shù)

課后作業(yè)（能寫幾種寫幾種，越多越好）

一行居中，多行居左，怎么實現(xiàn)？（水平居中）

一行居中，多行居中，怎么實現(xiàn)？（垂直居中）

實現(xiàn)一個重復字符串的函數(shù)。

往期內(nèi)容

前端培訓-初級階段（1 - 4）

前端培訓-初級階段（5 - 8）

前端培訓-初級階段（9 - 12）

后記

這里記錄一下主講人文章，這周有點忙，文章補的晚了。順便補一下大哥給的目錄。

參考資料

ECMAScript --百度百科
介紹了一些歷史

JavaScript 實現(xiàn) --w3school.com.cn
介紹了JS由什么構成，值得一看

JavaScript 高級教程 --w3school.com.cn
一些語法基礎

ECMAScript 6 入門 --ruanyifeng
如果你想學 ES6，這本書一定不要錯過

GPU云服務器云服務器初級前端工程師初級前端開發(fā)工程師簡歷前端培訓前端前端前端培訓

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/102949.html

前端培訓-中級階段（6）- jQuery元素節(jié)點操作（2019-07-18期）

摘要：已存在節(jié)點是移動，新節(jié)點是新增。鏈式操作對象為。將他們的父節(jié)點移除。從中刪除所有匹配的元素。一個布爾值或者指示事件處理函數(shù)是否會被復制。以上版本默認值是一個布爾值，指示是否對事件處理程序和克隆的元素的所有子元素的數(shù)據(jù)應該被復制。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/...

taoszu 2019-08-02 15:24 評論0 收藏0
前端培訓-中級階段（6）- jQuery元素節(jié)點操作（2019-07-18期）

摘要：已存在節(jié)點是移動，新節(jié)點是新增。鏈式操作對象為。將他們的父節(jié)點移除。從中刪除所有匹配的元素。一個布爾值或者指示事件處理函數(shù)是否會被復制。以上版本默認值是一個布爾值，指示是否對事件處理程序和克隆的元素的所有子元素的數(shù)據(jù)應該被復制。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/...

tigerZH 2019-08-23 18:22 評論0 收藏0
前端培訓-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

摘要：前端最基礎的就是。對應，是標簽的屬性。獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性和。一組包含作為動畫屬性和終值的樣式屬性和及其值的集合動畫的額外選項。指示是否在效果隊列中放置動畫。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，...

everfly 2019-08-02 15:30 評論0 收藏0
前端培訓-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

摘要：前端最基礎的就是。對應，是標簽的屬性。獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性和。一組包含作為動畫屬性和終值的樣式屬性和及其值的集合動畫的額外選項。指示是否在效果隊列中放置動畫。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，...

bang590 2019-08-30 11:21 評論0 收藏0
前端培訓-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

摘要：前端最基礎的就是。對應，是標簽的屬性。獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性和。一組包含作為動畫屬性和終值的樣式屬性和及其值的集合動畫的額外選項。指示是否在效果隊列中放置動畫。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，...

james 2019-08-23 18:34 評論0 收藏0
前端培訓-中級階段（11、12）- 跨域請求原理以及實現(xiàn)（2019-08-22期）

摘要：上節(jié)我們講了同源策略，這節(jié)我們講講如何跨域。當這些從的腳本執(zhí)行出錯，因為違背了同源策略為了保證用戶信息不被泄露，錯誤信息不會顯示出來，取而代之只會返回一個。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每...

binaryTree 2019-08-26 10:21 評論0 收藏0