前端培訓(xùn)-初級階段（13、18）

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

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

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

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

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

我們要講什么

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

ECMAScript核心語法結(jié)構(gòu)

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

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

行內(nèi)結(jié)構(gòu)居中

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

text-align: center 水平居中

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

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

塊級結(jié)構(gòu)居中

塊結(jié)構(gòu)的特點(diǎn)，占滿整行，所以設(shè)置要點(diǎn)是設(shè)置自己的屬性來實(shí)現(xiàn)。2019年6月24日10:15:41-補(bǔ)個(gè)demo

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

position:fixed;top:0;right:0;bottom:0;left:0; 垂直水平居中，這個(gè)方法有個(gè)要點(diǎn)，就是定寬定高，不然就占滿了。當(dāng)然還有要 margin:auto 來分配剩余空間才可以。

position:absolute;left:50%;margin-left:負(fù)一半寬度;top:50%;margin-top:負(fù)一半寬度 垂直水平居中，left 是基于父級來設(shè)置的，所以需要用 margin 再拉回來，也需要定寬高。

position:absolute;left:50%;top:50%;transform: translate(-50%,-50%); 垂直水平居中,這個(gè)方案是上一個(gè)方案的優(yōu)化版本，translate是基于自己的寬高來現(xiàn)實(shí)，所以可以用 -50% 來拉回。

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

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

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

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

grid margin: auto;

ECMAScript 核心語法結(jié)構(gòu)

ECMAScript 是一種由 Ecma國際（前身為歐洲計(jì)算機(jī)制造商協(xié)會，英文名稱是 European Computer Manufacturers Association）通過 ECMA-262 標(biāo)準(zhǔn)化的腳本程序設(shè)計(jì)語言。可以理解為是JavaScript的一個(gè)標(biāo)準(zhǔn)，但實(shí)際上 JS 是 ECMA-262 標(biāo)準(zhǔn)的實(shí)現(xiàn)和擴(kuò)展。

版本	時(shí)間	簡述
ECMAScript 1	1997年06月	首版
ECMAScript 2	1998年06月	格式修正，以使得其形式與ISO/IEC16262國際標(biāo)準(zhǔn)一致
ECMAScript 3	1999年12月	強(qiáng)大的正則表達(dá)式，更好的文字鏈處理，新的控制指令，異常處理，錯(cuò)誤定義更加明確，數(shù)輸出的格式化及其它改變
ECMAScript 4	未完成	更明確的類的定義，命名空間等等。2004年6月歐洲計(jì)算機(jī)制造商協(xié)會發(fā)表了ECMA-357標(biāo)準(zhǔn)，它是ECMAScript的一個(gè)擴(kuò)延，它也被稱為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大佬的就很棒，這里我先大體介紹一下，之后有時(shí)間會開單張來介紹一些常規(guī)用法。如：Array數(shù)組對象的forEach、map、filter、reduce --之前寫的一篇，這樣的章節(jié)。

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

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

關(guān)鍵字	綁定到頂層對象（特殊情況）	變量提升	塊級作用域(if、for)	描述
var	yes	yes	no	會變量提升，可多次賦值，無塊級概念（function、try 的塊有）
let	no	no	yes	只可聲明一次，可多次賦值
const	no	no	yes	只可以賦值一次

字符串?dāng)U展

repeat(n)，重復(fù)字符串多少次，

padStart(n,s)，padEnd(n,s)，字符串補(bǔ)全長度的功能,比如前面補(bǔ) 0

模板字符串 反引號標(biāo)識

標(biāo)簽?zāi)０?，其?shí)也是一個(gè)偶然機(jī)會碰到這個(gè)東西的。有個(gè)prompt(1) to win，做這個(gè)題的時(shí)候發(fā)現(xiàn)了這種辦法。

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

正則的擴(kuò)展

數(shù)值的擴(kuò)展

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

函數(shù)的擴(kuò)展

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

默認(rèn)值解構(gòu)，

// 寫法一
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í)候的對象

不可以當(dāng)作構(gòu)造函數(shù)

不可以使用arguments對象

數(shù)組的擴(kuò)展

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

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

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

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

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

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

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

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

對象的擴(kuò)展

Proxy

Promise 對象

async 函數(shù)

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

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

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

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

往期內(nèi)容

前端培訓(xùn)-初級階段（1 - 4）

前端培訓(xùn)-初級階段（5 - 8）

前端培訓(xùn)-初級階段（9 - 12）

后記

這里記錄一下主講人文章，這周有點(diǎn)忙，文章補(bǔ)的晚了。順便補(bǔ)一下大哥給的目錄。

參考資料

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

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

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

ECMAScript 6 入門 --ruanyifeng
如果你想學(xué) ES6，這本書一定不要錯(cuò)過

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102949.html

發(fā)表評論

登陸后可評論

0條評論

YorkChen

男|高級講師

我要關(guān)注我要私信

TA的文章

python能做什么軟件？Python到底能干嘛，一文看懂

閱讀 2894·2021-11-24 09:39
騰訊云老用戶如何優(yōu)惠便宜購買云服務(wù)器（首購優(yōu)惠和代金券抵扣）

閱讀 3151·2021-11-19 10:00
抖音系企業(yè)應(yīng)用設(shè)計(jì)系統(tǒng) Semi Design 開源啦

閱讀 1552·2021-10-27 14:17
僅需10道題輕松掌握Matplotlib圖形處理 | Python技能樹征題

閱讀 1821·2021-10-14 09:43
智能家庭安全系統(tǒng)Fortress WiFi爆重大漏洞可遠(yuǎn)程禁用警報(bào)

閱讀 977·2021-09-03 10:30
前端技術(shù)演進(jìn)（一）：Web前端技術(shù)基礎(chǔ)

閱讀 3421·2019-08-30 15:54
IOS中彈出鍵盤后出現(xiàn)fixed失效現(xiàn)象的解決方案

閱讀 2748·2019-08-30 13:05
CSS3實(shí)現(xiàn)柱狀圖的3D立體動畫效果

閱讀 2021·2019-08-30 11:02

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端培訓(xùn)-初級階段（13、18）

相關(guān)文章

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

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

**前端培訓(xùn)-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）**

**前端培訓(xùn)-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）**

**前端培訓(xùn)-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）**

**前端培訓(xùn)-中級階段（11、12）- 跨域請求原理以及實(shí)現(xiàn)（2019-08-22期）**

發(fā)表評論

0條評論

YorkChen

男|高級講師

TA的文章

python能做什么軟件？Python到底能干嘛，一文看懂

騰訊云老用戶如何優(yōu)惠便宜購買云服務(wù)器（首購優(yōu)惠和代金券抵扣）

抖音系企業(yè)應(yīng)用設(shè)計(jì)系統(tǒng) Semi Design 開源啦

僅需10道題輕松掌握Matplotlib圖形處理 | Python技能樹征題

智能家庭安全系統(tǒng)Fortress WiFi爆重大漏洞可遠(yuǎn)程禁用警報(bào)

前端技術(shù)演進(jìn)（一）：Web前端技術(shù)基礎(chǔ)

IOS中彈出鍵盤后出現(xiàn)fixed失效現(xiàn)象的解決方案

CSS3實(shí)現(xiàn)柱狀圖的3D立體動畫效果

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端培訓(xùn)-初級階段（13、18）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！