Web前端開發高級前端技術（高級開發程序篇）

本文轉載自查看原文 2020-01-27 01:56 959

（給達達前端加星標，提升前端技能）

內容有點多，也請你靜下來，慢閱讀，今后多多關照。

說到web前端開發高級，必須要掌握的是HTML和css代碼的優化，前端優化很重要，這是成功你進階的道路上需要重視的知識點，面對代碼優化，首先我們要學習的就是前端命名規范，HTML代碼優化，和css代碼優化。

前端命名規范是很重要的，一直說很重要，當你用過別人的代碼進行重構時，你會知道，如果你看到一長串代碼，不了解之前的人是怎么寫的，開局全靠猜，結局就是不斷地浪費時間。

掌握前端優化目錄的學習

前端命名規范，前端結構的組織，文件的命名規范，在一個項目中代碼的組織結構要清晰易懂，同類型文件可以歸類到到相同的文件夾中，文件命名規則需要統一且命名要有意義。這里要有意義是指命名要通俗易懂，英文單詞可以寫縮寫，不必故步自封，寫那么長的單詞。

命名規范在前端領域，涉及HTML，css，JavaScript，在HTML代碼所有的標簽名和屬性應該都為小寫，屬性值應該用引號括起來。元素的id和class都要按照規定命名，代碼縮進時要縮進，進行格式化，讓代碼美觀，有時可以給HTML代碼添加必要注解。

對於css命名的規范，盡量使用class選擇器進行樣式的定義，類命名時取父元素的class名作為前綴，使用-符號進行連接。類名與樣式之間以空格進行分割。

對於JavaScript命名規范，變量名是區分大小寫，第一個字符是不允許為數字的，不允許是空格，不允許其他標簽符號，盡量使用有意義的命名，不要使用JavaScript的關鍵詞，或者是保留字。

進行前端代碼的優化，優化HTML代碼為了能夠使網站更好的搜索，讓用戶更快速搜索到我們的網站，寫好HTML代碼使用正確的閉合HTML標簽，進行HTML代碼層級間的合理縮進，屬性值需要使用雙引號，結構與樣式進行有效的分離，結構與行為進行有效的分離。

進行HTML語義化標簽，HTML5提供的一些新的語義化元素來明確一個web頁面的不同部分，有：

優化前端效果，可以刪除多余容器元素，讓代碼層次少，避免使用table進行頁面的布局，換成用div+css的樣式布局。

css代碼優化，在各個瀏覽器中，相同元素解析的結果不同，就需要手動重置一些樣式。

去除標簽的默認樣式，如p，li，input等。

HTML5新標簽設置為display:block。

重置一些元素的樣式如超鏈接，字號等樣式。

css樣式選擇器的優先級

對於css樣式選擇器，優先級高的會覆蓋優先級低的。

第一，id選擇器的權重為100，第二，類選擇器的權重為10，第三，標簽選擇器的權重為1。

注意，css樣式中盡量不要使用id選擇器，會降低代碼的復用性，盡量不要使用!important，會降低代碼的復用性，盡量減少子選擇器的層級。

css樣式多余樣式去除，和結構優化

定義簡潔的css樣式規則，合並相關css樣式規則，定義簡潔的屬性值，合並相同的，刪除無效的。

sprite拼合圖

css sprite，也叫 css 精靈，雪碧圖。

是一種將雪散的背景圖合並成一張大圖，再次利用css的background-position屬性進行背景的定位從而達到減少圖片請求數量達到加快加載速度的網頁應用處理方式。

background屬性

background-color，描述規定要使用的背景顏色
background-position，描述規定背景圖片的位置
background-size，描述規定背景圖片的尺寸
background-repeat，描述規定如何重復背景圖像
background-origin，描述規定背景圖片的定位區域
background-clip，描述規定背景的繪制區域
background-attachment，描述規定背景圖片是否固定或者隨着頁面的其余部分滾動
background-image，描述規定要使用的背景圖像

background-position屬性

top，left，center，right，center等等，top表示垂直位置最頭部，bottom表示垂直位置最底部，left表示水平位置最左邊，center表示水平位置居中，right表示為水平位置最右邊。

x% y%


第一個值是水平位置，第二個值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您僅規定了一個值，另一個值將是 50%。

xpos ypos


第一個值是水平位置，第二個值是垂直位置。
左上角是 0 0。
單位是像素 (0px 0px) 或任何其他的 CSS 單位。
如果您僅規定了一個值，另一個值將是50%。
您可以混合使用 % 和 position 值。

css sprite的制作工具

css sprite制作工具，photoshop和打包工具webpack來制作。

打包工具，現在流行的很多前端打包工具都有支持css sprite的集成，如

webpack中只要安裝webpack-spritesmith依賴，然后在配置文件中引用依賴var SpritesmithPlugin = require('webpack-spritesmith'),最后在配置文件中添加代碼。

代碼壓縮，打包工具

前端優化，壓縮JavaScript和css是非常重要的。目前最常用的壓縮JavaScript代碼的工具之一有UglifyJS，它會分析JavaScript代碼語法樹，理解代碼含義，從而能做到諸如去掉無效代碼，去掉日志輸出代碼，縮短變量名等優化。

在webpack中接入UglifyJS需要通過插件的形式，UgllifyJsPlugin是比較常用的插件，通過在webpack的配置文件webpack.config.js中加入以下代碼即可。

壓縮css代碼常用的是CSSNANO，是基於PostCSS的，可以讓我們的代碼達到提升加載速度和代碼混淆的作用。

圖片的預加載

預加載簡單來說就是將所有所需的資源提前請求加載到本地，這樣需要用到時就可以直接從緩存中取資源了。

圖片的懶加載

首屏的加載，就是用圖片懶加載技術，即是到可視區域再加載。

圖片懶加載，使用jquery.lazyload.js，該js是一個基於Jquery的懶加載插件，里面封裝了懶加載用到的方法以及實現，第二種是echo.js，它是一款非常簡單實用輕量級的圖片延時加載插件。

JavaScript代碼優化

JavaScript代碼可維護性

什么是代碼與結構分離呢

代碼與結構分離，就是把HTML代碼和JavaScript代碼進行分離，第一在HTML中分離JavaScript，第二，在JavaScript中分離HTML。

什么是樣式與結構分離呢

樣式與結構分離，就是把css代碼和HTML代碼進行有效分離。

什么是數據與代碼分離呢

數據與代碼分離，也可以認為是前后端分離的表現，后端接口只負責返回json格式的數據，不會返回帶標簽甚至是帶樣式或者帶JavaScript的組合數據。

JavaScript的代碼可調式性

代碼可調式性，可以用console.log，debugger，alert，try...catch捕獲異常來進行JavaScript的調試。

console.log，即通過在JavaScript中添加console.log(msg)

msg為需要打印的信息，可以是變量，字符串，變量類型可以是數組，對象，數字等等。

debugger關鍵字用於停止執行JavaScript，並調式函數，這個關鍵字與調式工具中設置斷點的效果是一樣的。

alert和console.log一樣，alert通過在JavaScript中添加alert(msg)，Msg為需要彈窗的信息，值得一提的是這個彈框是強制阻塞的，只要關閉該彈窗才能解除阻塞，所以要謹慎使用。

try...catch，用於try...catch...finally來進行異常的捕獲，try代碼塊表示可能發生異常的代碼，catch表示捕獲異常對象，finally無論是否發生異常都執行。

evalError，typeError，syntaxError
referenceError，rangeError，URLError

JavaScript dom的優化

提升文件的加載速度，合並JavaScript代碼，盡量少用script標簽，無堵塞加載JavaScript，通過給script標簽增加defer屬性或者是async屬性來實現

<script src="file.js" defer></script>

動態創建script標簽來加載，JavaScript dom操作優化，dom訪問和修改，都說訪問dom耗性能，用循環訪問也是如此，所以要減少dom的訪問。

重排和重繪

用cssText改變樣式，批量修改dom。

JavaScript dom 腳本加載優化

學習前端高級層次，掌握webpack入門

modules with dependencies webpack static assets

webpack是一個module bundler模塊構建工具，由於JavaScript應用程序的復雜性不斷增加，構建工具已經成為web開發中不可或缺的一部分。

它幫助我們去打包，編譯和管理項目需要的眾多資源文件和依賴庫。webpack支持CommoonJS,AMD和ES6模塊系統，並且兼容多種JS書寫規范，可以處理模塊間的依賴關系，所以具有更強大的JS模塊化的功能，它能壓縮圖片，對css, js 文件進行語法檢查，壓縮，編譯打包。

構建工具沒有標准

現在開發者可以用的構造構建工具有

webpack,gulp,bowserify,npm scripts,grunt等。

缺點有，不適合web開發的初學者，對於css，圖片，以及其他非Js資源文件時，需要先混淆處理，文檔不夠完善，變化很大，不同版本的使用方法存在較大的差異。

安裝

全局安裝，用於全局使用命令行打包文件

//安裝全局webpack
npm install webpack -g


//安裝全局webpack-cli
npm install webpack-cli -g

新建項目文件夾

進入項目文件夾，打開cmd命令行窗口

webpack -v
顯示版本號，說明webpack安裝成功，可以在全局任何目錄下使用

基本應用

SPA是什么，它是單頁應用程序。

single page web application，是webpack打包的典型應用，一個典型的SPA應用，主要由以下幾個部分組成。

index.html主文件，js文件，有多個js文件，可以通過webpack合並打包為一個文件，css文件，可以多個css文件，可以通過webpack合並打包為一個文件。圖片可以通過webpack壓縮優化。

新建src文件夾，該文件夾存放開發用的文件，在src目錄下創建文件。

新建dist文件夾

該文件存放打包后的文件，可以先不創建，打包時可以自動創建。

打包，webpack-mode development，經過打包后，已經根據三個js依賴關系，打包合並為dist/main.js。

webpack --output文件名，輸出文件路徑

webpack --config文件名，用於指定其他配置文

默認為webpack.config.js

webpack --mode模式，打包模式 production，生成模式，developement開發模式。

webpack --watch 監聽文件變化並自動打包

webpack -p 壓縮混淆腳本

webpack -d 生成Map映射文件

webpack --progress 顯示進度，打印出編譯進度的百分比值

webpack --color 用不同顏色標記不同的信息

webpack --profile 顯示每一步編譯的具體時間，可幫助優化構建性能

webpack --hot 熱替換

webpack --bail 如果編譯過程出現error，立馬停止編譯

配置文件入門

通過定義配置文件進行復雜操作，文件名webpack.config.js

一個配置文件的基本結構：

entry，入口定義入口文件，默認文件./src/index.js

output，輸出定義出口文件，默認文件./dist/main.js

resolve，解析路徑映射，省略后綴名等

module，模塊定義不同loader，讓webpack能夠處理非JavaScript模塊

plugins，插件擴展webpack功能

devServer，開發服務器用於配置webpack-dev-server選項

簡單的配置文件

hello wrold例子：

修改webpack.json文件

配置詳細entry和output

entry入口配置是指頁面中的入口文件，默認入口文件./src/index.js

output出口配置是指生成的文件輸出到哪個地方去，./dist/main.js

path，輸出路徑，filename，輸出文件名

module，webpack只能打包js文件，無法識別其他語法的文件，如果要讓webpack打包其他文件，首先需要讓webpack識別不同的文件。

loader分類

分類	說明
轉換編譯	script-loader，babel-loader，ts-loader，coffee-loader
處理樣式	style-loader，css-loader，less-loader，sass-loader，postcss-loader
處理文件	raw--loader，url-loader，file-loader
處理數據	csv-loader，xml-loader
處理模板語言	html-loader，pug-loader，jade-loader，markdown-loader
清理和測試	mocha-loader，eslint-loader

常用loader

loader	說明
css-loader	解析css語句
style-loader	將css-loader解析后的文本，添加<style>標簽
babel-loader	將ES6+、JSX語法轉成ES5低版本語法
url-loader	url-loader對未設置或者小於limit byte設置的圖片以base64的格式進行轉換<br />對於大於limit byte的圖片用file-loader進行解析
file-loader	解析項目中的url引入（包括img的src和background的url）<br />修改打包后文件引用路徑，使之指向正確的文件
less-loader	less編譯器
vue-loader	Vue也推出了自己的vue-loader，可以方便的打包 .vue文件的代碼。<br />在vue-cli（快速構建單頁應用的腳手架）中得到應用。

babel loader

babel是一個js編譯器，它是通過語法轉換器支持最新版本的JavaScript，這插件允許你使用新語法，無需等待瀏覽器支持。

使用babel首先要配置.babelrc文件，該文件用來設置轉碼規則和插件，存放在項目的根目錄下。

在linux系統中，rc結尾的文件通常代表運行時自動加載的文件、配置等等。

在.babelrc配置文件中，主要是對預設和插件進行配置。

配置項	說明
presets	預設對js最新的語法糖進行編譯，並不負責轉譯新增的api和全局對象。例如：let/const可以被編譯，而String.includes、Object.assign等對象新增方法並不能被編譯。<br />常用轉譯器：babel-preset-env、babel-preset-es2015（2016、2017）、babel-preset-latest等
plugins	插件控制如何轉換代碼，babel默認只轉換新的js語法，而不轉換新的API，比如 Set,，Maps，Symbol，Promise 等全局對象，transform-runtime 用來解決以上問題

插件可以擴展webpack的功能，Loader不能做的處理都能交給plugin來做。

resolve配置webpack如何尋找模塊對應的文件，webpack在啟動后會從配置的入口模塊觸發，找出所有依賴的模塊，默認會采用模塊化標准里約定號的規則去尋找。

屬性	說明
alias	（譯：別名）通過別名將原來導入路徑映射成一個新的導入路徑
extensions	（譯：擴展）數組導入模塊時，可以省略的文件后綴名

其他配置

配置項	說明
devtool	是否生成以及如何生成sourcemap
devserver	開啟一個本地開發服務器
watch	監聽文件變化並自動打包
watchoption	用來定制watch模式的選項
performance	打包后命令行如何展示性能提示，如果超過某個大小是警告還是報錯

webpack-dev-server

它是一個小型的web服務器，可以自動監視項目文件的變化，自動刷新瀏覽器，其HMR方式只替換更新的部分，而不是重載頁面，大大提高了刷新效率

配置項	說明	默認值
inline	自動刷新<br />當我們對業務代碼做了一些修改，保存（ctrl+s）后，頁面會自動刷新，所做的修改會直接同步到頁面上，不需要手動刷新頁面或重啟服務	true
hot	熱模塊替換<br /> 不用配置（通常是通過命令行 --hot 選項啟動，會自動加載webpack.HotModuleReplacementPlugin插件）	true
host	主機地址
open	自動打開瀏覽器，可以指定瀏覽器，例如：--open 'Chrome'	false
port	端口	默認8080
overlay	編譯出錯的時候，在瀏覽器頁面上顯示錯誤	false
stats	用來控制編譯的時候shell上的輸出內容<br />stats: "errors-only" 只打印錯誤<br /> 還有"minimal"，"normal"，"verbose"
compress	true：對所有服務器資源采用gzip壓縮	false
contentBase	指定了服務器資源的根目錄，<br />如果不寫入contentBase的值，那么contentBase默認是項目的目錄	"./"
historyApiFallback	它使用的是HTML5 History Api，任意的跳轉或404響應可以指向 index.html 頁面	true

例子：

運行

npm start

運行后，webpack-dev-server將開始運行，打開瀏覽器，直接輸入127.0.0.1:8080/index.html，打包后的頁面已經可以使用了

注意：

index.html內無需引入main.js文件，打包后的index.html文件中會自動引入該文件。

webpack-dev-server運行后，瀏覽器中輸出的頁面，都是運行在內存中的，只有build以后，才會在dist目錄中得到最終的結果文件。

ES6基礎

ECMAScript和JavaScript到底是什么關系？

ECMAScript是JavaScript語言的國際標准，JavaScript是ECMAScript的實現。ESMAScript6的簡稱為es6是JavaScript語言的下一代標准。

symbol數據類型，Symbol是一種唯一標識符，可以用作對象的唯一屬性名，這樣就不會有人改寫或覆蓋你設置的屬性值了。

Symbol作為對象屬性名

Symbol永遠不相等，創建它們的時候傳入相同值的參數，也不相等，因此，可借助此特性解決屬性名的沖突問題，也是該數據類型存在的主要用途。

Symbol 值不能與其他類型的值進行運算，可以顯式轉為字符串。

使用場景

為某個對象添加屬性，新添加屬性與原有屬性重名，新添加的屬性僅作為標記使用，不需要用遍歷器遍歷處理。

let與const

用var聲明的變量會造成全局污染。

let用來聲明變量，要先聲明后使用

const

const聲明一個只讀的常量，一旦聲明，常量的值就不能改變。

特性	var	let	const
作用域級別	函數級	塊級	塊級
初始值	否	否	聲明時必須賦值
變量提升	是	否	否
重復聲明	是	否	否

變量的解構賦值

set與Map

js原有的2種數據結構，array和object；es6新增兩種數據結構，set和map

set數據結構

set類似於數組，成員的值都是唯一的，沒有重復的值。

主要用於數據的去重。

set本身就是一個構造函數，用來生成set數據結構。set實例時一個類數組的對象。

方法	說明
add(value)	添加某個值，返回：Set結構本身
delete(value）	刪除某個值，返回：bool（刪除是否成功）
has(value)	表示該值是否為Set的成員返回：bool
clear()	清除所有成員，返回：無

map數據結構，map也是一個數據集合，與數據類似。

它是對object的一個補充，map的key可以是任意類型，而傳統對象的key必須是字符串。

遍歷object得到的結果是無序的，遍歷Map得到的結果是有序的

方法	說明
clear	從Map中移除所有元素
delete	從Map中移除指定的元素
forEach	對Map中的每個元素執行指定操作
get	返回Map中的指定元素
has	如果Map包含指定元素，則返回 true
set	添加一個新建元素到Map
toString	返回Map的字符串表示形式（序列化）
valueOf	返回指定對象的原始值

array set map

類別	Array	Set	Map
長度	arr.length	set.size	map.size
增	arr.push(新增值)	set.add(4)	map.set('t', 1)
刪	arr.splice(索引,刪除數量)	set.delete(2)	map.delete('t')
改	arr.splice(索引,刪除數量,[新增值])	遍歷	map.set('t',2)
查	遍歷	set.has(1)	map.has('t')
清空	arr = []	set.clear()	map.clear()

共同變量方法

方法	說明
keys()	返回鍵名的遍歷器
values()	返回鍵值的遍歷器
entries()	返回鍵值對的遍歷器
forEach()	使用回調函數遍歷每個成員

箭頭函數，匿名函數

參數格式

箭頭函數中的this

函數的擴展

對象的擴展

在es6中允許向對象直接寫入變量和函數，作為對象的屬性和方法。

es6中允許使用表達式作為對象屬性，並且函數名稱定義也可以采用相同的方法。

setter和getter。

方法名稱	方法描述
Object.is()	比較兩個值是否相等
Object.assign()	用於將對象進行合並
Object.getOwnPropertyDescriptor	返回對象屬性的描述
Object.keys()	返回一個數組，包括對象自身的所有的可枚舉屬性

數組的擴展

方法	方法描述
copyWithin(target，start，end)	在當前數組內部，將指定位置的成員復制到其他位置（會覆蓋原有成員），然后返回當前數組。也就是說，使用這個方法，會修改當前數組。參數說明：<br />target（必需）：從該位置開始替換數據。負值:倒數。<br />start（可選）：從該位置開始讀取數據，默認:0。負值:倒數。<br /> end（可選）：到該位置前停止讀取數據，默認等於數組長度。負值:倒數。
find()	數組實例的find方法，用於找出第一個符合條件的數組成員。它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值為true的成員，然后返回該成員。如果沒有符合條件的成員，則返回undefined。
findIndex()	findIndex方法的用法與find方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。
fill()	fill方法使用給定值，填充一個數組,fill方法用於空數組的初始化非常方便。數組中已有的元素，會被全部抹去，如果填充的類型為對象，那么被賦值的是同一個內存地址的對象，而不是深拷貝對象。
includes()	該方法返回一個布爾值，表示某個數組是否包含給定的值，與字符串的includes方法類似。