web前端學(xué)習(xí)方案

imccl 發(fā)布于2019-08-29 17:01 / 980人閱讀

摘要：學(xué)習(xí)計(jì)劃認(rèn)識(shí)語(yǔ)義化的意義。這意味著可以在編程語(yǔ)言中很方便地表達(dá)靜態(tài)或動(dòng)態(tài)的數(shù)據(jù)流，而相關(guān)的計(jì)算模型會(huì)自動(dòng)將變化的值通過(guò)數(shù)據(jù)流進(jìn)行傳播。熟悉，理解響應(yīng)式編程思想在根據(jù)官方文檔學(xué)習(xí)的時(shí)候請(qǐng)優(yōu)先理解它的思想。

學(xué)習(xí)計(jì)劃

HTML5

認(rèn)識(shí)HTML5語(yǔ)義化的意義。
熟悉HTML5新特性
了解如何快速的加載HTML頁(yè)面，以及完善用戶體驗(yàn)如：閱讀模式、無(wú)障礙設(shè)置，
了解Canvas、Svg

CSS3

熟悉css3新特性，如：transform、transtion等等。
了解Css重繪是什么？
熟悉Css繪制順序，Css在繪制的過(guò)程中也是有順序的，熟悉Css繪制順序，CSS會(huì)優(yōu)先繪制元素的定位、大小然后才是其他的修飾，包括顏色、透明度等等，所以在css的編寫順序以位置、大小優(yōu)先。
熟悉Sass、Less（css擴(kuò)展語(yǔ)法），項(xiàng)目越大Css也就越難維護(hù)，而Sass、Less的出現(xiàn)就是為了解決這種問(wèn)題，當(dāng)然還有其他的方案例如：css-in-js，組件化css等等
熟悉Css的優(yōu)先級(jí)，并了解什么是硬件加速。

JS

熟悉JS的基礎(chǔ)語(yǔ)法
熟悉JS和客戶端的交互，例如DOM操作，節(jié)點(diǎn)的操作，ajax請(qǐng)求等等
JS是弱對(duì)象語(yǔ)言，那么JS中如何實(shí)現(xiàn)一個(gè)類？請(qǐng)學(xué)習(xí)原型構(gòu)造函數(shù)，并理解原型鏈的作用。
熟悉TypeScript語(yǔ)言，TypeScript是一個(gè)JS的超集，它的出現(xiàn)讓JS更加的像一門面向?qū)ο笳Z(yǔ)言，TypeScript支持動(dòng)態(tài)類型，兼容ES6以及其他的原生語(yǔ)法。
了解polyfills和bable。在前端加速發(fā)展的進(jìn)程中他們充當(dāng)了很重要的角色，目前JS版本草案已經(jīng)到了ES8，目前主流是ES6，但是目前主流瀏覽器大多全面兼容Es5，那么在使用高級(jí)語(yǔ)法的同時(shí)，你得需要向下兼容，這就是它們存在的意義。
了解模塊化規(guī)范（CommonJS、AMD），了解它們帶來(lái)的作用。
了解webPack等打包工具，打包工具的出現(xiàn)讓前端項(xiàng)目的開(kāi)發(fā)趨向于自動(dòng)化、工程化。包括文件大小的壓縮，Css自動(dòng)前綴的處理等等。
了解JsLint、EsLint、TsLint 代碼規(guī)范檢查工具

Angular(Js MVVM框架)

Angular的基礎(chǔ)語(yǔ)言采用TypeScipt，TypeScript得益于靜態(tài)類型的檢查以及強(qiáng)類型特性，在開(kāi)發(fā)過(guò)程中可以加強(qiáng)相互協(xié)作，大大的減少代碼錯(cuò)誤，目前已經(jīng)逐漸成為了趨勢(shì)。

Angular的底層嵌入了了Rxjs，什么是Rxjs? RxJS 是使用 Observables 的響應(yīng)式編程的庫(kù)。

響應(yīng)式編程是一種面向數(shù)據(jù)流和變化傳播的編程范式。這意味著可以在編程語(yǔ)言中很方便地表達(dá)靜態(tài)或動(dòng)態(tài)的數(shù)據(jù)流，而相關(guān)的計(jì)算模型會(huì)自動(dòng)將變化的值通過(guò)數(shù)據(jù)流進(jìn)行傳播。

響應(yīng)式編程可以加深你代碼抽象的程度，讓你可以更專注于定義與事件相互依賴的業(yè)務(wù)邏輯，而不是把大量精力放在實(shí)現(xiàn)細(xì)節(jié)上，同時(shí)，使用響應(yīng)式編程還能讓你的代碼變得更加簡(jiǎn)潔。

熟悉Angular的語(yǔ)法。
熟悉Angular路由機(jī)制。
熟悉組件交互，熟悉表單操作。
熟悉Rxjs，理解響應(yīng)式編程思想
在根據(jù)官方文檔學(xué)習(xí)的時(shí)候請(qǐng)優(yōu)先理解它的思想。
請(qǐng)著重理解DI(依賴注入)
了解什么是組件化？什么是模塊化？
以上理解之后請(qǐng)了解Zone.js，它為Angular做了些什么事情？
了解什么是自定義組件。
了解什么是影子DOM。
熟悉HTML5 history，并參照Angular路由，并思考Angular的路由實(shí)現(xiàn)的機(jī)制。
去了解Angular如何優(yōu)化性能的方案。

代碼規(guī)范

HTML、Css規(guī)范請(qǐng)參照：https://codeguide.bootcss.com/

JS代碼規(guī)范請(qǐng)參照：https://google.github.io/styl...

TypeScript 規(guī)范請(qǐng)參照Tslint規(guī)范，Angular內(nèi)置了一套
Angular 代碼風(fēng)格請(qǐng)參照 https://angular.io/guide/styl...