【读书笔记】编写高质量的代码Web前端开发修炼之道——曹刘阳
2019獨角獸企業重金招聘Python工程師標準>>>
一：從網頁重構說起
1. web標準： 機構標準，樣式標準，行為標準
2.樣式和行為應該從標簽中分離
精簡，重用，有序
好的代碼，注釋要占1/3
前期構思，先慢后快
先確定Html，確定語義的標簽，再來選用合適的CSS
去掉樣式后，網頁還是組織良好有序，并具有很好的可讀性
必要的h1,h2標簽對搜索引擎有用
當頁面內標簽無法滿足設計時，才適當添加div和span無語義標簽
3. 原生js，js類庫和Ajax（是利用js和XMLHttpRequest對象在客戶端和服務器端傳輸數據的技術）
4.了解后臺語言：了解頁面如何輸出，以編寫出他們套腳本的模板
??????????????????????????? 在寫ajax時可以自己模擬服務器端輸出
5.語義化注意點：
?????? 少用div ，span，能用p則用p,
?????? 不要用純樣式標簽，b改用strong
四：高質量的CSS
1要用DTD檢驗 (漏寫DTD聲明,firefox會標準模式解析，ie則怪誕模式)
2 組織CSS:
?????? CSS的API(如何用css控制頁面樣式)
?????? css的框架（如何對css進行組織）
????????????? base.css為最低層，被所有也引用
????????????? common.css為中間層，模塊中的重復視為一個組件（實現封裝，對經常變化的部分提供靈活的接口）
????????????? page.css 位于最高層，提供頁面級樣式
CSS reset?????? (取消默認樣式)
base.css
1.避免用*通用選擇符，而是改為所有標簽，{margin:0; padding:0}
2.通用原子類（文字，定位，長度，邊距）
?????? .fl{float:left;} .fr{float:right}還應設display：inline防止ie6雙邊距bug
?????? .bc{margin-left:auto;margin-right:auto }使塊級元素居中，還應該設置寬度
?????? .clearfix{clear:both}
????????????? 三種方法讓浮動的父元素能根據浮動元素的高度自動適用高度
??????????????????????????? 1.父元素也浮動
??????????????????????????? 2.添加清除空標簽
??????????????????????????? 3.直接從父容器清除浮動元素的浮動（好方法）
?
?
?????? .zoom{zoom:1}觸發ie的hasLayout
3.模塊化css（讓代碼高度重用）
封裝，多用組合少有繼承原則
模塊和模塊之間盡量不要包含相同內容，相同部分應該提取出來，單獨建立模塊
拆分模塊時應該在“數量少”和“結構簡單”提高重用性
4.css命名
使用英文
避免濫用子選擇器
運用駱駝命名法和劃線命名法
5.繼承的缺點：任何一個小的變化也需重新設定一個類，很容易引起類的暴漲，產生大量細微不同的類
多用組合，少用繼承
margin問題：
1. 在不確定模塊上下margin不是很穩定的時候，最好不要將margin寫在類里，而是單獨掛用邊距的原子類（mt10,mt20）
2. 不要混合上下margin-top和margin-bottom ，要單獨使用，防止重疊
?
低權重原則——避免濫用子選擇器
6. 權重相同，采用最后定義的選擇器
7.為了樣式容易覆蓋，采用權重低的選擇器
少用子選擇器，多添加類
8. css sprite：就是一張圖片然后position定位，減少http請求數
?????? 缺點：降低開發效率，增大維護難度（只適應于流量大的網站）
9.使用一行式的編輯風格
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（大于）！（不等于）
?????? 缺點：雖然向后兼容性是最好的，但是都是集中在各自的文件中，加大維護成本
?????? 2）選擇器前綴法
????????????? .test{} /*IE6 ,IE7,IE8*/
?????? ?????? *html .test{} /*only for ie6*/
????????????? *+html .test{} /*only for ie7*/
?????? 缺點：不能保證ie9 ie10 不識別這些，像后兼容存在問題
?????? 3）樣式屬性前綴法
12. 鏈接樣式的:link :visited :hover :active順序不要弄錯
13.hasLayout[用于塊級元素] 設置border時有時候會斷開,滾動條滾動又會出現
?????? 需要出發hasLayout （以前用height:1%, 現在用zoom:1）
?????? zoom無法觸發時則需要使用position:relative;
15塊級元素和行內元素
?????? 1）行內元素設置margin和padding，左右有作用，上下不起作用（padding的背景有反應，但是上下間距沒有作用）
2）display的屬性：block， inline，none，
inline-block（用于行內元素觸發hasLayout，才有效）（還有list-item和 table-cell???? IE6和IE7不支持）
16. inline-block（ie6和ie7不支持） 和hasLayout
?????? 觸發行內的hasLayout可以使行內元素具有塊級屬性并在同一行，或者也可用zoom：1
?????? 文字對齊的時候ie8和firefox是頂對齊，使用*vertical-align
?????? 缺點：只能觸發行內的hasLayout，還有css hack應盡量少用
17. relative ，absolute 和float
文檔流 position:relative表示z-index:0; left top right bottom相對各自在z-index:0的位置
脫離文檔流 position:absolute
float會仍然在z-index:0的文檔流中，會改變文檔排列
注意：absolute和float會隱式的改變display: inline-block
(可設長寬，還有雙邊距bug使用display：inline解決)
18.水平居中
1）文本和圖片的行內居中用text-align：center
2）確定寬度的塊級元素居中用 margin-left:auto; margin-right:auto
3)不確定寬度的塊級元素（如分頁）居中
? 方法一：用table包圍ul(table的寬隨內容變化，直接margin兩邊auto就可居中， ul 間接可居中)
??????????????????????????? 缺點：無意義標簽
????????????? 方法二：將display：inline，再用text-align：center
??????????????????????????? 缺點：不能設寬高
????????????? 方法三：給父元素設float，然后父元素設置position：relative和left：50%
??????????????????????????? 子元素position：relative；left：-50%
????????????????????????????????????????? 缺點：給子元素設了position：relative不好
19.豎直居中
????????????? 1）父元素高度不確定的文本，圖片，塊級元素
???????????????????? 可給父元素設置相同上下邊距實現
????????????? 2）父元素高度確定的單行文本
???????????????????? 可用line-height: 父高 實現
????????????? 3）父元素高度確定的多行文本，圖片，塊級元素
???????????????????? 方法一：在td和th時，vertical-align可實現（div，p這些不支持）
?????????????????????????????????? 但是在ie8和firefox中可以用display：table-cell來模擬表格（ie6和ie7不支持，只能直接用表格）
???????????????????? 方法二：對ie6和ie8使用css hack 設置父和子元素的position為absolute和relative，在分別設置top：50%；top：-50%
?
20. 網格布局
?????? 兩欄式布局
?????? 1.main比sidebar更重要，所以代碼中main一定要提前sidebar
?????? 2.多用組合原則（有些類經常變化就單獨放，如把float抽離，添加組合類.fr 和.fl）
????????????? 缺點：仍然不能靈活修改
?????? 3.利用子選擇器 .content-xx-xxxx .main衍生類提供布局樣式，.main則其他小樣式
????????????????????????????????????????? xx為lr或rl， xxxx中分別是main 和sidebar的寬度
????????????? 缺點：不易于擴展，不輕便（但是main和sidebar的寬度有限制，所以可以）
????????????? 注意：寬度用100%，可以嵌套使用，提高重用性
21.?? position：relative和absolute和float都將觸發z-index事件
z-index （越大越靠前，值相同，后定義的將在上邊）
?????? z-index：-1 在最低層（但在body下面，無法觸發點擊事件）
?????? 注意：負邊距也能發生位置重疊（后出現的在上面）
22. flash和select問題
?????? flash默認為窗口模式，會在前面（屬性wmode設置的window, opaque和transparent）
????????????? 注意：flash在ie和firefox里是以不同方式嵌入的（object和embed）
?????? select在IE6下是以窗口模式顯示的，永遠在第一層 IE6 bug
???????????????????? 解決方法用<iframe></iframe>設置在要提前元素的后面層來遮住select
23 IE6不支持透明圖png
?????? 方法：用ie6專用濾鏡配合js解決
?????? 缺點：加載完前仍然有色，執行效率不高，當png為背景時，濾鏡不支持background-position和background-repeat
?
五：高質量的javascript
1.避免JS沖突（設計者有同名的全局變量定義在window下）
????? 方法：用匿名函數包圍（function（）{}）（）；
2. 兩個匿名函數之間有通訊（功能C需要功能A中的b變量值）
?????? 嚴格控制js的全局變量
?????? 方法1：在全局變量中設var str；在A功能中將 var b=str(需要更多通信就設立更多變量，這樣不好)
?????? 方法2：用全局對象類型的變量GLOBAL{}
?????? 方法3：為了防止通信之間還受影響(a和b都命名了str，c調用a的，d調用b的，會被覆蓋)，需要使用命名空間來解決
???????????????????? var 變量名=GLOBAL.A.str(指定空間名A的str)
???????????????????? 也可生成二級命名空間
?????? 進一步將命名空間定義為一個函數
??????
?????? 給GLOBAL對象添加方法namespace，然后在需要空間的匿名函數中調用（先調用，再設值）
?
3.添加各自的注釋（功能，負責人，聯系方式，時間）
4.js從功能上分為 框架部分（組織作用，全局變量，定義命名空間）和應用部分（功能邏輯）
?????? 將應用部分的代碼組織起來function init（）{}
?????? 方法1：再在文檔加載完后調用 window.οnlοad=init; （但是window的onload要全部包括圖片在內的全部下載完）
?????? 方法2：可以用JQuery中的監聽DOMReady的$(dicument).ready(init) （但是復雜且瀏覽器不同將不同）
?????? 方法3：在頁面的最后調用init 模擬DOMReady
5. 一般網頁的頭尾中會單獨放置三個文件
?????? 頭部：框架部分
?????? 尾部：調用init（當中部沒有init時則會報錯）
???????????????????? 可以用if(init){ init()}
?????? 中部：為應用部分
6. CSS放頭部，JS放尾部
7.JS文件壓縮（刪空格，刪注釋，變量名簡單化，所以要保留原文件）
8. JS 分層（與css一樣 base， common， page）
????????????? base層：作用1（封裝不同瀏覽器下的JS差異，提供統一接口）
??????????????????????????? 作用2（擴展JS底層提供的接口）
??????????????????????????? 即給common和page層提供接口
????????????? common層：給page層提供組件
????????????? page層：具體功能
9.base層：封裝（即ie與firefox的差異）
???????????????????? 1）firefox的節點包括空格，換行，等文本信息P180-P184
???????????????????? 2）event對象作為window的屬性作用于全局作用域的，在firefox中event作為事件參數存在
轉載于:https://my.oschina.net/changeme/blog/264638
總結
以上是生活随笔為你收集整理的【读书笔记】编写高质量的代码Web前端开发修炼之道——曹刘阳的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android：简易单词本（三）
- 下一篇： DOCTYPE html PUBLIC