《使用ES6優(yōu)化Web頁(yè)面》教學(xué)大綱一、課程性質(zhì)與任務(wù)1．課程性質(zhì)：本課程是計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)的理論與實(shí)踐課。2．課程任務(wù)：本課程的主要任務(wù)是通過(guò)原生JavaScript，來(lái)講授ECMAscript課程，需要了解ES6的基本原理，了解MVVM的開發(fā)模式。掌握MVVM之間的關(guān)系，let和const命令、變量的解構(gòu)賦值、字符串的擴(kuò)展、正則的擴(kuò)展、函數(shù)的擴(kuò)展、Symbol、set和map數(shù)據(jù)結(jié)構(gòu)等。重點(diǎn)掌握數(shù)值、數(shù)組、函數(shù)的擴(kuò)展。課程在重視傳授理論知識(shí)同時(shí)，重視培養(yǎng)學(xué)生的實(shí)際動(dòng)手能力。教學(xué)過(guò)程中，設(shè)計(jì)了大量的程序設(shè)計(jì)案例，使學(xué)生在學(xué)習(xí)枯燥的語(yǔ)法知識(shí)的同時(shí)，體會(huì)到MVVM模式的魅力，加深對(duì)語(yǔ)言知識(shí)的理解。二、課程教學(xué)基本要求理論課時(shí)：48節(jié)上機(jī)課時(shí)：48節(jié)考核形式：考查三、課程教學(xué)內(nèi)容第一章了解ES6背景教學(xué)內(nèi)容：本章主要介紹ES6的背景和主要概念，MVVM的理解，ES6是如何來(lái)的？講解ES6的背景，近年來(lái)TC39（TechnicalCommittee39）是推進(jìn)ECMAScript發(fā)展的委員會(huì)。TC39定期召開會(huì)議，會(huì)議由會(huì)員公司的代表與特邀專家出席。ES6的版本變動(dòng)內(nèi)容最多，具有里程碑意義、ES6加入許多新的語(yǔ)法特性，編程實(shí)現(xiàn)更簡(jiǎn)單、高效，ES6是前端發(fā)展趨勢(shì)，就業(yè)必備技能※第二章let命令教學(xué)內(nèi)容：本章主要掌握l(shuí)et命令，掌握l(shuí)et命令的基本用法、代碼塊使用區(qū)域、不能重復(fù)聲明以及不存在變量提升。Es6只有全局作用域和函數(shù)作用域，沒有塊級(jí)作用域，這帶來(lái)很多不合理的場(chǎng)景。講述兩種場(chǎng)景：內(nèi)層變量可能會(huì)覆蓋外層變量、用來(lái)技術(shù)的玄幻變量泄露為全局變量※第三章const命令教學(xué)內(nèi)容：本章主要掌握使用const命令，掌握使用const命令聲明常量，掌握使用const命令的基本用法，掌握使用const命令的本質(zhì)，掌握使用ES6聲明變量的六種方法，掌握使用頂層對(duì)象的屬性?！谒恼伦兞康慕鈽?gòu)賦值教學(xué)內(nèi)容：本章主要掌握ES6允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值的方式，掌握解構(gòu)賦值允許指定默認(rèn)值，掌握對(duì)象的解構(gòu)賦值，掌握字符串的解構(gòu)賦值，掌握數(shù)值和布爾值的解構(gòu)賦值?！谖逭履０遄址虒W(xué)內(nèi)容：本章主要掌握模板字符串的基本語(yǔ)法，掌握反引號(hào)（`）標(biāo)識(shí)，掌握變量名寫在${}之中，掌握大括號(hào)內(nèi)部可以放入任意的JavaScript表達(dá)式，掌握模板字符串之中還能調(diào)用函數(shù)，掌握模板字符串之中的嵌套使用。第六章對(duì)象的擴(kuò)展教學(xué)內(nèi)容：本章主要掌握屬性的簡(jiǎn)潔表示法，掌握屬性名表達(dá)式，掌握方法的name屬性，掌握屬性的可枚舉性和遍歷，掌握super關(guān)鍵字，掌握對(duì)象的擴(kuò)展運(yùn)算符。第七章箭頭函數(shù)教學(xué)內(nèi)容：本章主要掌握ES6允許使用“箭頭”（=>）定義函數(shù)，掌握定義對(duì)象中，如果該方法包含this就不能使用箭頭函數(shù)，掌握嵌套函數(shù)?！诎苏聄est參數(shù)教學(xué)內(nèi)容：本章主要掌握用于獲取函數(shù)的多余參數(shù)，這樣就不需要使用arguments對(duì)象了，掌握add函數(shù)是一個(gè)求和函數(shù)，掌握push方法改寫數(shù)組?！诰耪聅ymbol教學(xué)內(nèi)容：ES5的對(duì)象屬性名都是字符串，這容易造成屬性名的沖突。比如，你使用了一個(gè)他人提供的對(duì)象，但又想為這個(gè)對(duì)象添加新的方法（mixin模式），新方法的名字就有可能與現(xiàn)有方法產(chǎn)生沖突。如果有一種機(jī)制，保證每個(gè)屬性的名字都是獨(dú)一無(wú)二的就好了，這樣就從根本上防止屬性名的沖突?！谑翴terator遍歷器教學(xué)內(nèi)容：本章主要掌握遍歷器（Iterator）就是一種機(jī)制。它是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問(wèn)機(jī)制。任何數(shù)據(jù)結(jié)構(gòu)只要部署Iterator接口，就可以完成遍歷操作（即依次處理該數(shù)據(jù)結(jié)構(gòu)的所有成員）。Iterator的作用有三個(gè)：一是為各種數(shù)據(jù)結(jié)構(gòu)，提供一個(gè)統(tǒng)一的、簡(jiǎn)便的訪問(wèn)接口；二是使得數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排列；三是ES6創(chuàng)造了一種新的遍歷命令for...of循環(huán)，Iterator接口主要供for...of消費(fèi)?！谑徽耂et和map教學(xué)內(nèi)容：本章主要掌握Set和map新的數(shù)據(jù)結(jié)構(gòu)，類似數(shù)組，掌握Set函數(shù)可以接受一個(gè)數(shù)組（或者具有iterable接口的其他數(shù)據(jù)結(jié)構(gòu)）作為參數(shù)，用來(lái)初始化，掌握使用本質(zhì)上是鍵值對(duì)的集合（Hash結(jié)構(gòu)），但是傳統(tǒng)上只能用字符串當(dāng)作鍵。四、學(xué)時(shí)分配表章序內(nèi)容課時(shí)備注1了解ES6的背景42Let命令43Const命令44變量的解構(gòu)賦值45模板字符串46對(duì)象的擴(kuò)展47箭頭函數(shù)48Rest參數(shù)49Symbol810Iterator遍歷器411Set和map4五、教材及參考書教材：《Web前端開發(fā)高級(jí)（下冊(cè)）》