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

時間 2020-01-30

標籤 web 前端開發高級技術程序欄目 HTML 简体版

原文原文鏈接

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

內容有點多，也請你靜下來，慢閱讀，從此多多關照。css

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

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

掌握前端優化目錄的學習vue

前端命名規範，前端結構的組織，文件的命名規範，在一個項目中代碼的組織結構要清晰易懂，同類型文件能夠歸類到到相同的文件夾中，文件命名規則須要統一且命名要有意義。這裏要有意義是指命名要通俗易懂，英文單詞能夠寫縮寫，沒必要故步自封，寫那麼長的單詞。java

命名規範在前端領域，涉及HTML，css，JavaScript，在HTML代碼全部的標籤名和屬性應該都爲小寫，屬性值應該用引號括起來。元素的id和class都要按照規定命名，代碼縮進時要縮進，進行格式化，讓代碼美觀，有時能夠給HTML代碼添加必要註解。jquery

對於css命名的規範，儘可能使用class選擇器進行樣式的定義，類命名時取父元素的class名做爲前綴，使用-符號進行鏈接。類名與樣式之間以空格進行分割。linux

對於JavaScript命名規範，變量名是區分大小寫，第一個字符是不容許爲數字的，不容許是空格，不容許其餘標籤符號，儘可能使用有意義的命名，不要使用JavaScript的關鍵詞，或者是保留字。webpack

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

進行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的格式進行轉換
對於大於limit byte的圖片用file-loader進行解析

file-loader

解析項目中的url引入（包括img的src和background的url）
修改打包後文件引用路徑，使之指向正確的文件

less-loader

less編譯器

vue-loader

Vue也推出了本身的vue-loader，能夠方便的打包 .vue文件的代碼。
在vue-cli（快速構建單頁應用的腳手架）中獲得應用。

babel loader

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

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

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

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

配置項

說明

presets

預設對js最新的語法糖進行編譯，並不負責轉譯新增的api和全局對象。例如：let/const能夠被編譯，而String.includes、Object.assign等對象新增方法並不能被編譯。
經常使用轉譯器：babel-preset-env、babel-preset-es2015（201六、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

自動刷新
當咱們對業務代碼作了一些修改，保存（ctrl+s）後，頁面會自動刷新，所作的修改會直接同步到頁面上，不須要手動刷新頁面或重啓服務

true

hot

熱模塊替換
不用配置（一般是經過命令行 --hot 選項啓動，會自動加載webpack.HotModuleReplacementPlugin插件）

true

host

主機地址

open

自動打開瀏覽器，能夠指定瀏覽器，例如：--open 'Chrome'

false

port

端口

默認8080

overlay

編譯出錯的時候，在瀏覽器頁面上顯示錯誤

false

stats

用來控制編譯的時候shell上的輸出內容
stats: "errors-only" 只打印錯誤
還有"minimal"，"normal"，"verbose"

compress

true：對全部服務器資源採用gzip壓縮

false

contentBase

指定了服務器資源的根目錄，
若是不寫入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)

在當前數組內部，將指定位置的成員複製到其餘位置（會覆蓋原有成員），而後返回當前數組。也就是說，使用這個方法，會修改當前數組。參數說明：
target（必需）：從該位置開始替換數據。負值:倒數。
start（可選）：從該位置開始讀取數據，默認:0。負值:倒數。
end（可選）：到該位置前中止讀取數據，默認等於數組長度。負值:倒數。

find()

數組實例的find方法，用於找出第一個符合條件的數組成員。它的參數是一個回調函數，全部數組成員依次執行該回調函數，直到找出第一個返回值爲true的成員，而後返回該成員。若是沒有符合條件的成員，則返回undefined。

findIndex()

findIndex方法的用法與find方法很是相似，返回第一個符合條件的數組成員的位置，若是全部成員都不符合條件，則返回-1。

fill()

fill方法使用給定值，填充一個數組,fill方法用於空數組的初始化很是方便。數組中已有的元素，會被所有抹去，若是填充的類型爲對象，那麼被賦值的是同一個內存地址的對象，而不是深拷貝對象。

includes()

該方法返回一個布爾值，表示某個數組是否包含給定的值，與字符串的includes方法相似。

ES6高級操做

promise對象

JavaScript自己就是單線程的，因此爲了解決單線程帶來的問題，在異步編程中，許多操做都會放在回調函數中，同步與異步的混雜，過多的回調嵌套都會讓代碼變得難以維護。