2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

一：從網(wǎng)頁重構(gòu)說起

1. web標(biāo)準(zhǔn)： 機(jī)構(gòu)標(biāo)準(zhǔn)，樣式標(biāo)準(zhǔn)，行為標(biāo)準(zhǔn)

2.樣式和行為應(yīng)該從標(biāo)簽中分離

精簡(jiǎn)，重用，有序

好的代碼，注釋要占1/3

前期構(gòu)思，先慢后快

先確定Html，確定語義的標(biāo)簽，再來選用合適的CSS

去掉樣式后，網(wǎng)頁還是組織良好有序，并具有很好的可讀性

必要的h1,h2標(biāo)簽對(duì)搜索引擎有用

當(dāng)頁面內(nèi)標(biāo)簽無法滿足設(shè)計(jì)時(shí)，才適當(dāng)添加div和span無語義標(biāo)簽

3. 原生js，js類庫和Ajax（是利用js和XMLHttpRequest對(duì)象在客戶端和服務(wù)器端傳輸數(shù)據(jù)的技術(shù)）

4.了解后臺(tái)語言：了解頁面如何輸出，以編寫出他們套腳本的模板

??????????????????????????? 在寫ajax時(shí)可以自己模擬服務(wù)器端輸出

5.語義化注意點(diǎn)：

?????? 少用div ，span，能用p則用p,

?????? 不要用純樣式標(biāo)簽，b改用strong

四：高質(zhì)量的CSS

1要用DTD檢驗(yàn) (漏寫DTD聲明,firefox會(huì)標(biāo)準(zhǔn)模式解析，ie則怪誕模式)

2 組織CSS:

?????? CSS的API(如何用css控制頁面樣式)

?????? css的框架（如何對(duì)css進(jìn)行組織）

????????????? base.css為最低層，被所有也引用

????????????? common.css為中間層，模塊中的重復(fù)視為一個(gè)組件（實(shí)現(xiàn)封裝，對(duì)經(jīng)常變化的部分提供靈活的接口）

????????????? page.css 位于最高層，提供頁面級(jí)樣式

CSS reset?????? (取消默認(rèn)樣式)

base.css

1.避免用*通用選擇符，而是改為所有標(biāo)簽，{margin:0; padding:0}

2.通用原子類（文字，定位，長(zhǎng)度，邊距）

?????? .fl{float:left;} .fr{float:right}還應(yīng)設(shè)display：inline防止ie6雙邊距bug

?????? .bc{margin-left:auto;margin-right:auto }使塊級(jí)元素居中，還應(yīng)該設(shè)置寬度

?????? .clearfix{clear:both}

????????????? 三種方法讓浮動(dòng)的父元素能根據(jù)浮動(dòng)元素的高度自動(dòng)適用高度

??????????????????????????? 1.父元素也浮動(dòng)

??????????????????????????? 2.添加清除空標(biāo)簽

??????????????????????????? 3.直接從父容器清除浮動(dòng)元素的浮動(dòng)（好方法）

?

?

?????? .zoom{zoom:1}觸發(fā)ie的hasLayout

3.模塊化css（讓代碼高度重用）

封裝，多用組合少有繼承原則

模塊和模塊之間盡量不要包含相同內(nèi)容，相同部分應(yīng)該提取出來，單獨(dú)建立模塊

拆分模塊時(shí)應(yīng)該在“數(shù)量少”和“結(jié)構(gòu)簡(jiǎn)單”提高重用性

4.css命名

使用英文

避免濫用子選擇器

運(yùn)用駱駝命名法和劃線命名法

5.繼承的缺點(diǎn)：任何一個(gè)小的變化也需重新設(shè)定一個(gè)類，很容易引起類的暴漲，產(chǎn)生大量細(xì)微不同的類

多用組合，少用繼承

margin問題：

1. 在不確定模塊上下margin不是很穩(wěn)定的時(shí)候，最好不要將margin寫在類里，而是單獨(dú)掛用邊距的原子類（mt10,mt20）

2. 不要混合上下margin-top和margin-bottom ，要單獨(dú)使用，防止重疊

?

低權(quán)重原則——避免濫用子選擇器

6. 權(quán)重相同，采用最后定義的選擇器

7.為了樣式容易覆蓋，采用權(quán)重低的選擇器

少用子選擇器，多添加類

8. css sprite：就是一張圖片然后position定位，減少http請(qǐng)求數(shù)

?????? 缺點(diǎn)：降低開發(fā)效率，增大維護(hù)難度（只適應(yīng)于流量大的網(wǎng)站）

9.使用一行式的編輯風(fēng)格

10.盡量使用class，少用id

11.css hack

?????? 1) ie 條件注釋法

????????????? <!- -[if IE]> 或者（特定）<!- -[if IE 6]>或者(大于) <!- - [if gt IE6]>

????????????? <link rel=”stylesheet” href=”name.css” type=”text/css” />

????????????? <![endif]- ->

?????? lte(小于等于) lt(小于) gte（大于等于）gt（大于）！（不等于）

?????? 缺點(diǎn)：雖然向后兼容性是最好的，但是都是集中在各自的文件中，加大維護(hù)成本

?????? 2）選擇器前綴法

????????????? .test{} /*IE6 ,IE7,IE8*/

?????? ?????? *html .test{} /*only for ie6*/

????????????? *+html .test{} /*only for ie7*/

?????? 缺點(diǎn)：不能保證ie9 ie10 不識(shí)別這些，像后兼容存在問題

?????? 3）樣式屬性前綴法

12. 鏈接樣式的:link :visited :hover :active順序不要弄錯(cuò)

13.hasLayout[用于塊級(jí)元素] 設(shè)置border時(shí)有時(shí)候會(huì)斷開,滾動(dòng)條滾動(dòng)又會(huì)出現(xiàn)

?????? 需要出發(fā)hasLayout （以前用height:1%, 現(xiàn)在用zoom:1）

?????? zoom無法觸發(fā)時(shí)則需要使用position:relative;

15塊級(jí)元素和行內(nèi)元素

?????? 1）行內(nèi)元素設(shè)置margin和padding，左右有作用，上下不起作用（padding的背景有反應(yīng)，但是上下間距沒有作用）

2）display的屬性：block， inline，none，

inline-block（用于行內(nèi)元素觸發(fā)hasLayout，才有效）（還有l(wèi)ist-item和 table-cell???? IE6和IE7不支持）

16. inline-block（ie6和ie7不支持） 和hasLayout

?????? 觸發(fā)行內(nèi)的hasLayout可以使行內(nèi)元素具有塊級(jí)屬性并在同一行，或者也可用zoom：1

?????? 文字對(duì)齊的時(shí)候ie8和firefox是頂對(duì)齊，使用*vertical-align

?????? 缺點(diǎn)：只能觸發(fā)行內(nèi)的hasLayout，還有css hack應(yīng)盡量少用

17. relative ，absolute 和float

文檔流 position:relative表示z-index:0; left top right bottom相對(duì)各自在z-index:0的位置

脫離文檔流 position:absolute

float會(huì)仍然在z-index:0的文檔流中，會(huì)改變文檔排列

注意：absolute和float會(huì)隱式的改變display: inline-block

(可設(shè)長(zhǎng)寬，還有雙邊距bug使用display：inline解決)

18.水平居中

1）文本和圖片的行內(nèi)居中用text-align：center

2）確定寬度的塊級(jí)元素居中用 margin-left:auto; margin-right:auto

3)不確定寬度的塊級(jí)元素（如分頁）居中

　　　　? 方法一：用table包圍ul(table的寬隨內(nèi)容變化，直接margin兩邊auto就可居中， ul 間接可居中)

??????????????????????????? 缺點(diǎn)：無意義標(biāo)簽

????????????? 方法二：將display：inline，再用text-align：center

??????????????????????????? 缺點(diǎn)：不能設(shè)寬高

????????????? 方法三：給父元素設(shè)float，然后父元素設(shè)置position：relative和left：50%

??????????????????????????? 子元素position：relative；left：-50%

????????????????????????????????????????? 缺點(diǎn)：給子元素設(shè)了position：relative不好

19.豎直居中

????????????? 1）父元素高度不確定的文本，圖片，塊級(jí)元素

???????????????????? 可給父元素設(shè)置相同上下邊距實(shí)現(xiàn)

????????????? 2）父元素高度確定的單行文本

???????????????????? 可用line-height: 父高 實(shí)現(xiàn)

????????????? 3）父元素高度確定的多行文本，圖片，塊級(jí)元素

???????????????????? 方法一：在td和th時(shí)，vertical-align可實(shí)現(xiàn)（div，p這些不支持）

?????????????????????????????????? 但是在ie8和firefox中可以用display：table-cell來模擬表格（ie6和ie7不支持，只能直接用表格）

???????????????????? 方法二：對(duì)ie6和ie8使用css hack 設(shè)置父和子元素的position為absolute和relative，在分別設(shè)置top：50%；top：-50%

?

20. 網(wǎng)格布局

?????? 兩欄式布局

?????? 1.main比sidebar更重要，所以代碼中main一定要提前sidebar

?????? 2.多用組合原則（有些類經(jīng)常變化就單獨(dú)放，如把float抽離，添加組合類.fr 和.fl）

????????????? 缺點(diǎn)：仍然不能靈活修改

?????? 3.利用子選擇器 .content-xx-xxxx .main衍生類提供布局樣式，.main則其他小樣式

????????????????????????????????????????? xx為lr或rl， xxxx中分別是main 和sidebar的寬度

????????????? 缺點(diǎn)：不易于擴(kuò)展，不輕便（但是main和sidebar的寬度有限制，所以可以）

????????????? 注意：寬度用100%，可以嵌套使用，提高重用性

21.?? position：relative和absolute和float都將觸發(fā)z-index事件

z-index （越大越靠前，值相同，后定義的將在上邊）

?????? z-index：-1 在最低層（但在body下面，無法觸發(fā)點(diǎn)擊事件）

?????? 注意：負(fù)邊距也能發(fā)生位置重疊（后出現(xiàn)的在上面）

22. flash和select問題

?????? flash默認(rèn)為窗口模式，會(huì)在前面（屬性wmode設(shè)置的window, opaque和transparent）

????????????? 注意：flash在ie和firefox里是以不同方式嵌入的（object和embed）

?????? select在IE6下是以窗口模式顯示的，永遠(yuǎn)在第一層 IE6 bug

???????????????????? 解決方法用<iframe></iframe>設(shè)置在要提前元素的后面層來遮住select

23 IE6不支持透明圖png

?????? 方法：用ie6專用濾鏡配合js解決

?????? 缺點(diǎn)：加載完前仍然有色，執(zhí)行效率不高，當(dāng)png為背景時(shí)，濾鏡不支持background-position和background-repeat

?

五：高質(zhì)量的javascript

1.避免JS沖突（設(shè)計(jì)者有同名的全局變量定義在window下）

????? 方法：用匿名函數(shù)包圍（function（）{}）（）；

2. 兩個(gè)匿名函數(shù)之間有通訊（功能C需要功能A中的b變量值）

?????? 嚴(yán)格控制js的全局變量

?????? 方法1：在全局變量中設(shè)var str；在A功能中將 var b=str(需要更多通信就設(shè)立更多變量，這樣不好)

?????? 方法2：用全局對(duì)象類型的變量GLOBAL{}

?????? 方法3：為了防止通信之間還受影響(a和b都命名了str，c調(diào)用a的，d調(diào)用b的，會(huì)被覆蓋)，需要使用命名空間來解決

???????????????????? var 變量名=GLOBAL.A.str(指定空間名A的str)

???????????????????? 也可生成二級(jí)命名空間

?????? 進(jìn)一步將命名空間定義為一個(gè)函數(shù)

??????

?????? 給GLOBAL對(duì)象添加方法namespace，然后在需要空間的匿名函數(shù)中調(diào)用（先調(diào)用，再設(shè)值）

?

3.添加各自的注釋（功能，負(fù)責(zé)人，聯(lián)系方式，時(shí)間）

4.js從功能上分為 框架部分（組織作用，全局變量，定義命名空間）和應(yīng)用部分（功能邏輯）

?????? 將應(yīng)用部分的代碼組織起來function init（）{}

?????? 方法1：再在文檔加載完后調(diào)用 window.οnlοad=init; （但是window的onload要全部包括圖片在內(nèi)的全部下載完）

?????? 方法2：可以用JQuery中的監(jiān)聽DOMReady的$(dicument).ready(init) （但是復(fù)雜且瀏覽器不同將不同）

?????? 方法3：在頁面的最后調(diào)用init 模擬DOMReady

5. 一般網(wǎng)頁的頭尾中會(huì)單獨(dú)放置三個(gè)文件

?????? 頭部：框架部分

?????? 尾部：調(diào)用init（當(dāng)中部沒有init時(shí)則會(huì)報(bào)錯(cuò)）

???????????????????? 可以用if(init){ init()}

?????? 中部：為應(yīng)用部分

6. CSS放頭部，JS放尾部

7.JS文件壓縮（刪空格，刪注釋，變量名簡(jiǎn)單化，所以要保留原文件）

8. JS 分層（與css一樣 base， common， page）

????????????? base層：作用1（封裝不同瀏覽器下的JS差異，提供統(tǒng)一接口）

??????????????????????????? 作用2（擴(kuò)展JS底層提供的接口）

??????????????????????????? 即給common和page層提供接口

????????????? common層：給page層提供組件

????????????? page層：具體功能

9.base層：封裝（即ie與firefox的差異）

???????????????????? 1）firefox的節(jié)點(diǎn)包括空格，換行，等文本信息P180-P184

???????????????????? 2）event對(duì)象作為window的屬性作用于全局作用域的，在firefox中event作為事件參數(shù)存在

轉(zhuǎn)載于:https://my.oschina.net/changeme/blog/264638

總結(jié)

以上是生活随笔為你收集整理的【读书笔记】编写高质量的代码Web前端开发修炼之道——曹刘阳的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。