一、頁面制作：

　　1、圖像處理部分：

　　　　● 可以用“魔棒工具”判斷背景是否為線性漸變。

　　　　● 需要切出的圖片分為兩類：

　　　　　　1.修飾性圖片（一般用在background屬性）：圖標(biāo)、Logo；有特殊效果的按鈕、文字等；非純色的背景等。

　　　　　　2.內(nèi)容性圖片（一般用在img標(biāo)簽）：Banner、廣告圖片；文章中的配圖等。

　　　　● 從服務(wù)器拉取數(shù)據(jù)的圖片，需要先使用img標(biāo)簽占位。

　　　　● 修飾性圖片一般存為PNG格式，內(nèi)容性圖片一般保存為JPG格式；其中PNG一般使用PNG8和PNG24兩種，PNG24支持半透明，但在IE6中不支持。

　　　　● 帶背景切不規(guī)則小圖標(biāo)可以使用魔棒工具和選區(qū)工具結(jié)合來操作。

　　　　● 圖片保存類型：

　　　　　　1.當(dāng)圖片色彩豐富且無透明要求時(shí)，建議保存為JPG格式并選擇合適的品質(zhì)。

　　　　　　2.當(dāng)圖片色彩不太豐富時(shí)無論有沒有透明要求，建議保存為PNG8格式（RGB顏色，無仿色，無雜邊）。

　　　　　　3.當(dāng)圖片有半透明要求時(shí)，建議保存為PNG24格式。

　　　　　　4.為了保證圖片質(zhì)量的情況，要保留一份PSD源文件以便修改。

　　　　● 添加圖標(biāo)但需要改變畫布大小時(shí)，以左上角為中心點(diǎn)擴(kuò)展后，不會影響已使用圖標(biāo)在頁面中的位置。

　　　　● 合并圖片分類：

　　　　　　1.同屬于一個(gè)模塊的圖片，或同一個(gè)頁面用到的圖片合并。

　　　　　　2.大小相近的圖片合并。

　　　　　　3.色彩相近合并。

　　　　　　4.有狀態(tài)的圖標(biāo)合并。

　　　　　　5.綜合以上，視情況優(yōu)化。

　　2、開發(fā)、調(diào)試工具部分：

　　　　● 常用的Sublime Text插件有：Package Control（插件管理）、Emmet（快速編寫）、DocBlockr（函數(shù)注釋）、SideBarEnhancements（右鍵增強(qiáng)）、Terminal（快捷終端）等等。

　　3、HTML部分：

　　　　● 通過設(shè)置a標(biāo)簽的href屬性，除了URL跳轉(zhuǎn)或錨鏈接外，還可以實(shí)現(xiàn)跳轉(zhuǎn)至郵箱（例如：href="mailto:123@abc.cn"）或在移動端撥打手機(jī)（例如：href="tel:13500008888"）等功能。

　　　　● 強(qiáng)調(diào)類的標(biāo)簽中，strong標(biāo)簽的語義比em標(biāo)簽要強(qiáng)烈，比如商品價(jià)格可以使用strong標(biāo)簽。

　　　　● 使用iframe嵌入的頁面和當(dāng)前的頁面是在不同的上下文中，兩者之間是隔離的，在嵌入頁面的操作不會影響當(dāng)前頁面（例如網(wǎng)頁播放器和頁面內(nèi)容之間的關(guān)系）。

　　　　● 在頁面中插入插件用object標(biāo)簽或embad標(biāo)簽引入需要的插件，例如嵌入Flash插件或PDF閱讀插件。

　　　　● 使用map標(biāo)簽和area標(biāo)簽可以實(shí)現(xiàn)熱點(diǎn)區(qū)域的連接，例如經(jīng)常見到的明星寫真中的穿戴的各種“同款推薦”。

　　　　● 在form表單中的內(nèi)容過多，需要分區(qū)時(shí)，可使用fieldset標(biāo)簽來分隔，在fieldset標(biāo)簽下使用legend標(biāo)簽展示這個(gè)分隔區(qū)域的標(biāo)題。

　　4、CSS部分：

　　　　● 使用屬性選擇器時(shí)，如果屬性值是符號或帶有空格的，又或者是使用屬性包含選擇器時(shí)，需要把屬性值用引號引起來；例如a[href^="#"] {}或a[href*="www.abc.com"] {}等。

　　　　● 在CSS3中，偽類選擇器用一個(gè)冒號 : 開始，而偽元素選擇器則用兩個(gè)冒號 :: 開始。

　　　　● 使用偽元素選擇器可以實(shí)現(xiàn)諸如改變第一個(gè)文字樣式或第一行文字樣式等操作；例如：::first-letter {color: red;}或::after {content: "";}等。

　　　　● 選擇器權(quán)重分四層：行內(nèi)樣式最高，權(quán)重值1000；其次是ID選擇器，權(quán)重值100；再次是類、偽類和屬性選擇器，權(quán)重值10；最后是標(biāo)簽選擇器和偽元素選擇器，權(quán)重值1。

　　　　● 通過給某段文字設(shè)置text-indent值為一個(gè)負(fù)極大值，可以達(dá)到隱藏文字的效果，比如有時(shí)某些文字想寫在代碼里但又不讓它出現(xiàn)在網(wǎng)頁中的情況。

　　　　● 要求文字截?cái)嗖⒃谀┪灿惺÷蕴?#xff0c;可以添加text-overflow屬性并設(shè)置為ellipsis。同時(shí)，overflow屬性設(shè)置為hidden，white-space屬性設(shè)置為nowrap，三種屬性同時(shí)設(shè)置才能實(shí)現(xiàn)。

　　　　● 使用cursor設(shè)置光標(biāo)形狀時(shí)，可以使用自定義的.cur文件，在自定義文件后面再添加一個(gè)默認(rèn)形狀，為無法訪問自定義文件時(shí)的替代方案。例如：.elem {cursor: url(cur.cur), pointer;}。

　　　　● 默認(rèn)情況下，盒子寬和高的設(shè)置作用于盒子的內(nèi)容，如果要設(shè)置整個(gè)盒子的寬和高，就需要利用將box-sizing屬性設(shè)置為border-box來實(shí)現(xiàn)；深刻理解二者的寬高作用范圍是不同的。

　　　　● 設(shè)置padding值為百分比時(shí)，參照的是父盒子的寬度，父盒子沒寬度便繼續(xù)參照最近的祖先元素；此時(shí)子盒子沒有寬度時(shí)，會擁有拋去padding值以外的不超過參照盒子寬的寬度。

　　　　● 陰影效果只是裝飾，不會占用空間。

　　　　● 使用outline形成的“邊框”與border的主要區(qū)別是：outline是裝飾性的，不占用空間，而且它將出現(xiàn)在border的外圍；而border是盒子模型的元素之一，是占用空間的。

　　　　● 簡寫background屬性時(shí)，position屬性和size屬性之間要用/隔開；如果有兩個(gè)以上的背景圖片層，那么背景顏色需要設(shè)置在最后一個(gè)背景圖片所在的定義語句中。

　　　　● 當(dāng)一個(gè)塊級元素沒有設(shè)置寬高時(shí)，同時(shí)對這個(gè)元素設(shè)置了top、left、right和bottom屬性，這個(gè)元素會自動撐開以符合這四個(gè)屬性的值；利用這一特性可以實(shí)現(xiàn)三行自適應(yīng)布局。

　　　　● 設(shè)置了絕對定位absolute屬性、固定定位fixed屬性或浮動的元素的默認(rèn)寬度是內(nèi)容寬度。

　　　　● 遮罩效果是通過固定定位fixed屬性和z-index屬性的設(shè)置來實(shí)現(xiàn)的。

　　　　● 在彈性盒子中，只有盒子的子元素符合在文檔流中的條件，才是彈性元素，其中包括float元素，因?yàn)閒loat只是半脫離文檔流，而不包括完全脫離文檔流的絕對定位和固定定位的元素。

　　　　● 在彈性布局中，order屬性是一個(gè)相對值，數(shù)值大的元素在主軸的位置排在數(shù)值小的元素之后。

　　　　● 使用flex-basis屬性，可以設(shè)置彈性元素在主軸方向的默認(rèn)長度。

　　　　● 使用flex-grow屬性設(shè)置的是彈性元素在主軸上分配到的多余空間的比例，數(shù)值越大，分配越多，自身越大。

　　　　● 使用flex-shrink屬性設(shè)置的是彈性元素在主軸上承擔(dān)超出范圍空間的比例，數(shù)值越大，承擔(dān)越多，意味著自身越小。

　　　　● 在彈性布局中，justify-content屬性設(shè)置的是彈性元素在主軸的對齊方式，align-items屬性設(shè)置的是彈性元素在副軸的對齊方式。

　　　　● 與align-items屬性可以設(shè)置彈性盒子內(nèi)所有彈性元素的作用不同的是，align-self屬性設(shè)置的是某個(gè)單獨(dú)彈性元素自身在副軸的對齊方式。

　　　　● 在transform屬性中，各種變形方法稱為transform-function，實(shí)際就是函數(shù)，括號中的參數(shù)就是在給這個(gè)函數(shù)傳參。

二、程序設(shè)計(jì)：

　　1、內(nèi)置對象部分：

　　　　● Object類：

Object.create(proto[, propertiesObject]);//ES5中創(chuàng)建新對象的另一種方法,可以為新對象指定原型對象；例如：var obj1 = Object.create({a:1, b:2});var obj2 = Object.create(ClassName);//ClassName是指定的原型對象的構(gòu)造器，繼承性上與obj2.prototype = new ClassName()類似；

　　　　● Number類：

numObj.toFixed(num);//將數(shù)字四舍五入為指定小數(shù)位數(shù)的數(shù)字；例如：var num = 13.37;num = num.toFixed(1);alert(num);//13.4；

　　　　● Array類：

arrObj.forEach(callback[, thisArg]);//遍歷數(shù)組元素并調(diào)用回調(diào)函數(shù)；callback回調(diào)函數(shù)規(guī)則如下： function callback(value, index, arrObj);//value是當(dāng)前元素值，index是當(dāng)前元素下標(biāo)，arrObj是數(shù)組本身；例如：function test(value, index, array) {console.log(value);console.log(value === array[index]); }[2, 3, , 5].forEach(test);//循環(huán)打印分別為2、true、3、true、5、true，空元素會跳過不打印；

　　　　● JSON類：

JSON.stringify(jsonObj);//將json對象序列化為字符串；例如：var jsonObj = {a:1, b:2, C:'3', D:{aa:"abc", bb:true}};var str = JSON.stringify(jsonObj);alert(str);//'{"a":1,"b":2,"C":"3","D":{"aa":"abc","bb":true}}'； JSON.parse(str);//將json字符串轉(zhuǎn)化為json對象，相當(dāng)于stringify的逆向操作；

　　2、作用域部分：

　　　　● 在JS中，沒有塊級作用域，只有函數(shù)作用域，if塊、for塊或with塊都不會產(chǎn)生作用域。

　　　　● 使用new Function創(chuàng)建的函數(shù)，不管在什么位置，都屬于全局函數(shù)，內(nèi)部的this指向的都是全局對象（window）。

　　3、練習(xí)題有感：

　　　　● 加強(qiáng)對函數(shù)表達(dá)式的認(rèn)知，以及了解函數(shù)表達(dá)式和函數(shù)聲明兩者之間的作用域的不同：

　　(function () {a = 5;//后面經(jīng)過聲明的變量將其覆蓋并轉(zhuǎn)化為局部變量；alert(window.a);//undefined，如果沒有后面的代碼，才會彈出是5；相同作用域中有聲明的變量會替代沒有聲明的變量；var a = 20;alert(a);//20})();

　　　　● 再次提醒，函數(shù)不經(jīng)過調(diào)用里面的代碼和結(jié)果是不會執(zhí)行和確定的：

　　var a = 6;function fn1() {var a =7;function fn2() {var a = 8;alert(a);//看書面題目不要總把可執(zhí)行代碼看做是在定義的位置執(zhí)行，而是調(diào)用函數(shù)的時(shí)候執(zhí)行；}fn2();alert(a);}fn1();alert(a);//彈出結(jié)果依次為8、7、6；

　　　　● 再次加深記憶：++i是先賦值，后使用，先執(zhí)行i=i+1，再使用i賦值給其他變量或進(jìn)行計(jì)算；i++是先使用，后賦值，先使用i賦值給其他變量或進(jìn)行計(jì)算，再執(zhí)行i=i+1：

　　var i = 0;var j = true && i++;alert(i + ',' + j);//1,0;var m = 0;var n = false || ++m;alert(m + ',' + n);//1,1;

　　　　●

三、編程藝術(shù)：

　　1、節(jié)點(diǎn)操作部分：

　　　　● 通過節(jié)點(diǎn)關(guān)系（父子、兄弟）獲取節(jié)點(diǎn)的可維護(hù)性較差，一般通過接口獲取節(jié)點(diǎn)。

　　elem.querySelector(selector);//獲取第一個(gè)符合選擇器條件的元素，IE6~7不支持；elem.querySelectorAll(selector);//獲取所有符合選擇器條件的元素，IE6~7不支持；

　　　　● 與“getElements系列方法獲取到的元素集合是動態(tài)的”這一點(diǎn)不同的是，querySelectorAll獲取的元素集合是靜態(tài)的，當(dāng)元素節(jié)點(diǎn)發(fā)生改變后，并不會對獲取到的集合產(chǎn)生影響。

　　elem.textContent;//設(shè)置或返回元素及其后代元素的文本內(nèi)容，IE9不支持；elem.innerText;//設(shè)置或返回元素及其后代元素的文本內(nèi)容，FF不支持；

　　　　● 使用innerHTML增加元素，會使同一目標(biāo)元素下的其他元素的重置而丟失樣式或其他設(shè)置；另外在低版本IE下會內(nèi)存泄露，還會有安全隱患，比如將可運(yùn)行代碼填入網(wǎng)頁中。

　　　　● 由于innerHTML的特性，建議僅用于新元素，而且內(nèi)容要盡量可控，即使要設(shè)置用戶輸入內(nèi)容，也要有嚴(yán)格的驗(yàn)證。

　　　　● 在JS中，設(shè)置label標(biāo)簽的for屬性使用的屬性名是htmlFor，避免與for關(guān)鍵字重名。

　　　　● 獲取或設(shè)置元素屬性的方式有三種：

　　　　　　1.使用屬性訪問器，例如elem.attr或elem[attr]。

　　　　　　2.使用getAttribute和setAttribute方法。

　　　　　　3.使用dataset屬性，這種方法可以在元素上保存數(shù)據(jù)。

　　　　● 使用elem.style.attr的方法修改樣式只能逐條修改，如果需要一條語句修改多個(gè)樣式，可以使用elem.style.cssText屬性，例如：

　　elem.style.cssText = 'bacground-color: red; color=blue;';

　　2、事件部分：

　　　　● 阻止事件傳播（阻止冒泡），就是阻止事件傳播到父節(jié)點(diǎn)。方法如下：

　　event.stopPropagation();//W3C標(biāo)準(zhǔn)；event.stopImmediatePropagation();//W3C標(biāo)準(zhǔn)；與上面的方法不同的是，此方法除了阻止事件傳播到父節(jié)點(diǎn)外，還會阻止當(dāng)前節(jié)點(diǎn)的后續(xù)事件；event.cancelBubble = true;//IE低版本；

　　　　● 阻止默認(rèn)行為的方法：

　　Event.preventDefault();//W3C標(biāo)準(zhǔn)；Event.returnValue = false;//IE低版本；

　　　　● 鼠標(biāo)事件mouseover/out和mouseenter/leave之間的區(qū)別是，后者不會觸發(fā)冒泡，觸發(fā)事件的元素內(nèi)的嵌套元素是不會同時(shí)觸發(fā)事件的。

　　elem.onmousewheel;//鼠標(biāo)滾輪事件句柄；elem.beforeinput;//鍵盤輸入前事件句柄；

　　　　● 多媒體格式兼容性檢查：

　　var a = new Audio();a.canPlayType('audio/nav')；//支持則返回"maybe"、"probably"，不支持則返回空字符串；

　　　　● 控制多媒體播放的方法和屬性：

　　mediaObj.load();//加載媒體內(nèi)容；mediaObj.play();//開始播放；mediaObj.pause();//暫停播放；mediaObj.playbackRate;//設(shè)置或獲取播放速度，取值為非負(fù)數(shù)，默認(rèn)為1，越大越快，反之則反；mediaObj.currentTime;//設(shè)置或獲取播放進(jìn)度；mediaObj.volume;//設(shè)置或獲取播放音量，取值為0~1的浮點(diǎn)數(shù)；mediaObj.muted;//設(shè)置或獲取靜音狀態(tài)，true為靜音，反之則反；mediaObj.paused;//獲取播放是否暫停，true為暫停，反之則反；mediaObj.seeking;//獲取媒體跳轉(zhuǎn)狀態(tài)，true為跳轉(zhuǎn)，反之則反mediaObj.ended;//獲取播放是否完畢，true為完畢，反之則反mediaObj,duration;//獲取媒體時(shí)長；mediaObj.initialTime;//獲取媒體開始時(shí)間；

　　　　● 自定義控件常用的多媒體相關(guān)事件，（更多內(nèi)容參考 http://www.w3school.com.cn/tags/html_ref_eventattributes.asp）：

　　mediaObj.onlodastart;//開始請求媒體內(nèi)容事件句柄；mediaObj.onloadmetadata;//媒體元數(shù)據(jù)加載完成事件句柄；mediaObj.oncanplay;//媒體加載了一部分可開始播放事件句柄；mediaObj.onplay;//媒體就緒，可以開始播放事件句柄；mediaObj.onwaiting;//媒體被迫暫停但條件滿足會繼續(xù)播放（如緩沖數(shù)據(jù)不足）事件句柄；mediaObj.onplaying;//媒體開始播放事件句柄；

　　3、數(shù)據(jù)通信部分：

　　　　● 常用的HTTP方法有：

　　　　　　1.GET：從服務(wù)器獲取一份文檔，不包含主體。

　　　　　　2.POST：向服務(wù)器發(fā)送需要處理的數(shù)據(jù)，包含主體。

　　　　　　3.PUT：將請求的主體部分存儲在服務(wù)器上，包含主體。

　　　　　　4.DELETE：從服務(wù)器上刪除一份文檔，不包含主體。

　　　　● 請求參數(shù)序列化方法：

　　function serialize(data) {if (!data) {return '';}var pairs = [];for (var name in data) {if (!data.hasOwnProperty(name)) {continue;}if (typeof data[name] === 'function') {continue;}var value = data[name].toString();name = encodeURIComponent(name);value = encodeURIComponent(value);pairs.push(name + '=' + value);}return pairs.join('&');}

　　　　● 同源策略：兩個(gè)頁面擁有相同的協(xié)議（protocol），端口（port）和主機(jī)（host），name這兩個(gè)頁面就屬于同一個(gè)源（origin）。

　　　　● 不滿足同源策略的訪問，被稱為跨域資源訪問，要實(shí)現(xiàn)跨域資源訪問，需要借助CORS標(biāo)準(zhǔn)，或者Frame代理，還有JSONP等其他跨域技術(shù)。

　　　　● 通過JSONP技術(shù)訪問跨域資源是利用script標(biāo)簽可以跨域的原理實(shí)現(xiàn)的。

　　4、動畫部分：

　　　　● 定時(shí)器requestAnimationFrame(function)的間隔時(shí)間是由顯示器的刷新頻率控制的。

　　5、表單操作部分：

　　　　● 表單元素form的常用屬性：

　　　　　　1.name：用來獲取表單元素，例如：var formObj = document.forms.formName。

　　　　　　2.autocomplete：自動完成屬性，可設(shè)定的有兩個(gè)值，設(shè)定為on會記錄輸入記錄，off不會保留輸入記錄。

　　　　　　3.elements：包含表單元素的后代表單控件和歸屬于該表單的表單控件（兩種都排除圖片按鈕），第二種優(yōu)先級大于第一種。

　　　　　　4.length：設(shè)置或返回表單元素包含的控件元素的數(shù)量；

　　　　　　5.form[name]：返回name或id為指定名稱的表單控件（排除圖片按鈕）；若結(jié)果為空，則返回id為指定名稱的img元素；若有多個(gè)同名元素，則返回一個(gè)動態(tài)節(jié)點(diǎn)集合；

　　　　　　　一旦用指定名稱獲取過該元素，則不管該元素的id或者name怎么變化，只要節(jié)點(diǎn)還在頁面山均可使用原名稱獲取該元素，而使用form.elements[name]則返回null。

　　　　● 表單的reset方法可重置的元素有：input、keygen、output、select、textarea；觸發(fā)表單reset事件，阻止它的默認(rèn)行為可取消重置；元素重置時(shí)不再觸發(fā)元素上的change和input事件。

　　　　● 使用label元素的htmlFor屬性，可以關(guān)聯(lián)表單控件激活行為；可以使用label的特性完成諸如自定義上傳文件按鈕等特效。

　　　　● 如果要改變表單控件的form屬性關(guān)聯(lián)的歸屬表單，由于該屬性時(shí)只讀屬性，不可在程序中修改，只能使用setAttribute方法。

　　　　● 使用type為file的input控件時(shí)，可設(shè)置accept屬性來篩選預(yù)覽的文件類型，例如：accept = "image/*"（圖片image/*，音頻audio/*，視頻video/*，或者以.號開始的文件后綴名*.jpg等）。

　　　　● 創(chuàng)建一個(gè)select下拉列表中的option選項(xiàng)，除了常見的document.createElement的方法外，還有一種是專門創(chuàng)建option的方法：

　　var option = new Option(text, value);//直接在構(gòu)造函數(shù)中傳入文本值和value值；targetOption.insertAdjacentElement(option, 'beforeBegin');//將新建的option元素插入目標(biāo)元素之前；select.add(option,targetOption);//與上面的插入方法效果相同；select.remove(2);//通過元素在select下的索引值可以刪除指定option元素；

　　　　● 輸入框元素textarea的常用屬性和方法：

　　　　　　1.select()：全選輸入的內(nèi)容，會觸發(fā)select事件。

　　　　　　2.selectionStart：選中內(nèi)容的起始位置，無選中內(nèi)容時(shí)返回光標(biāo)所在位置。

　　　　　　3.selectionEnd：選中內(nèi)容的結(jié)束位置，無選中內(nèi)容時(shí)返回光標(biāo)所在位置。

　　　　　　4.selectionDirection：返回選擇的方向，可以控制鍵盤選中的方向。

　　　　　　5.setRangeText(replacement[, start, end [, mode]])：用來設(shè)置某個(gè)范圍的內(nèi)容。

　　　　● 表單提交的編碼方式（enctype）有三種：

　　　　　　1.application/x-www-form-urlencoded；默認(rèn)的。

　　　　　　2.multipart/form-data；適合閱讀。

　　　　　　3.text/plain；一般用于文件上傳。

　　　　● 使用iframe元素結(jié)合form元素的target屬性也可以實(shí)現(xiàn)無刷新表單提交。

四、頁面架構(gòu)：

　　1、布局方案部分：

　　　　● 水平居中：

　　　　　　1.inline-block + text-align：兼容性好（低版本IE用display:inline + zoom:1兼容），但居中的盒子文字由于繼承了文字居中，不要居中時(shí)需要額外設(shè)置文字對齊方式。

　　　　　　

　　　　　　2.table + margin：代碼簡單。

　　　　　　

　　　　　　3.absolute + transform：居中元素不會影響周圍的元素，但兼容性稍差。

　　　　　　

　　　　　　4.flex + justify-content/margin：效果最好，代碼簡單，但兼容性稍差。

　　　　　　

　　　　● 垂直居中：

　　　　　　1.table-cell + vertical-align：兼容性好。

　　　　　　

　　　　　　2.absolute + transform：與水平居中特性一樣。

　　　　　　

　　　　　　3.flex + align-items：與水平居中特性一樣。

　　　　　　

　　　　● 四周居中：基本上就是水平與垂直居中的方法結(jié)合使用。

　　　　　　

　　　　　　

　　　　　　

　　　　● 一列定寬與一列自適應(yīng)布局：

　　　　　　1.float + margin：簡單易懂，但在IE6中有“3像素”BUG，可以在定寬浮動盒子上加margin:-浮動盒子寬解決。

　　　　　　

　　　　　　2.float + margin + (fix)：上一種方法改進(jìn)，在左浮動盒子外包一層右浮動盒子，寬度撐滿父元素，同時(shí)設(shè)置margin:-左盒子寬即可，但左盒子需要用定位屬性將z-index層級提高。

　　　　　　

　　　　　　3.float + overflow：將自適應(yīng)盒子加上overflow:hidden，觸發(fā)自適應(yīng)盒子BFC模式，隔離與浮動盒子的關(guān)系，樣式簡單但不兼容IE6。

　　　　　　

　　　　　　4.table：父盒子的display為table，兩列子盒子為table-cell，另外父盒子要加table-layout:fixed布局優(yōu)先來加速渲染，由于表格內(nèi)margin無效，需要間隔可以使用padding來實(shí)現(xiàn)。

　　　　　　

　　　　　　5.flex：最簡單的方法，低版本瀏覽器不兼容，性能較差，適合小范圍布局。

　　　　　　

　　　　● 一列不定寬一列自適應(yīng)布局：

　　　　　　1.float + overflow：可以非常好的支持此類布局。

　　　　　　

　　　　　　2.table：需要將table-layout:fixed去掉，因?yàn)楝F(xiàn)在是內(nèi)容決定寬度，而不是布局優(yōu)先；另外在不定寬盒子中要加入width:0.1%設(shè)置，用百分比是要兼容IE8，這個(gè)方法不支持IE6~7。

　　　　　　

　　　　　　3.flex：很強(qiáng)大，但是不支持IE10以下的版本。

　　　　　　

　　　　● 等分布局，用公式“父盒寬+間距寬=(子盒寬+間距寬)×N”可以推導(dǎo)出方法：

　　　　　　1.float：給父盒子設(shè)置margin負(fù)值增加間距寬，子盒子設(shè)置百分比寬度，然后添加相應(yīng)的正padding值，并設(shè)置box-sizing:border-box屬性；此法子盒子數(shù)量改變就需要改變子盒子寬度。

　　　　　　

　　　　　　2.table：要在父盒子外加包裹盒子并設(shè)置margin負(fù)值，父盒子寬度100%，并添加table-layout:fixed屬性加速渲染，更重要的是使子盒子寬度平分而無需設(shè)置寬度，子盒子數(shù)量隨便改。

　　　　　　

　　　　　　3.flex：不需要為父盒子添加寬度，代碼量很少，用子盒子的相鄰選擇器添加間距即可，設(shè)置了flex占比后，瀏覽器會自動算出剩余空間分配，缺點(diǎn)仍然是兼容性問題。

　　　　　　

　　　　● 等高布局：

　　　　　　1.table：有自帶的等高特性，如果有背景色會覆蓋設(shè)置的padding間距部分，需要設(shè)置background-clip:content-box來避免，但是這個(gè)屬性不支持IE8及以下版本。

　　　　　　

　　　　　　2.flex：默認(rèn)的align-items:stretch屬性就是等高屬性。

　　　　　　

　　　　　　3.float + overflow：稱為“偽等高”，子盒子都添加padding-bottom極大值，再用margin-bottom負(fù)極大值抵消，父盒子加overflow:hidden屬性截取最高子盒子高度來模擬出等高，兼容性好。

　　　　　　

　　　　● 基本全屏布局：

　　　　　　

　　　　　　1.position（scroll）：充分利用元素不定寬高與定位屬性之間的填充特性來實(shí)現(xiàn)，在right區(qū)域設(shè)定overflow:auto使?jié)L動條只出現(xiàn)在這里；這個(gè)方法不支持IE6，只有hack方案。

　　　　　　

　　　　　　2.flex（scroll）：先將上中下元素縱向排列，將中間的元素也設(shè)置為一個(gè)彈性父盒子，再將其內(nèi)的左右兩列按要求分配伸縮因子，滾動條與position方式一樣；兼容性和性能一般。

　　　　　　

　　　　● 百分比全屏布局：基本全屏布局中的定寬定高部分改為百分比，實(shí)現(xiàn)方法很簡單，只要把固定寬高修改為想要的百分比即可，下面是position方法的例子，flex方法道理是一樣的：

　　　　　　

　　　　● 內(nèi)容自適應(yīng)全屏布局：基本全屏布局中的定寬定高部分改為內(nèi)容自適應(yīng)，position方法無法完成，只有flex方法可以（Grid方法可以實(shí)現(xiàn)，但還未成熟），只要去掉寬高設(shè)置即可：

　　　　　　

　　2、頁面優(yōu)化部分：

　　　　● 頁面優(yōu)化主要的方式有：

　　　　　　1.減少請求：

　　　　　　　　1.1.圖片合并，如精靈圖的應(yīng)用；

　　　　　　　　1.2.減少CSS文件請求，主要通過合并CSS文件、少量CSS樣式內(nèi)聯(lián)以及避免使用import的方式引入CSS文件等方法。

　　　　　　2.減少文件大小：

　　　　　　　　2.1.減少圖片大小：選擇合適的圖片格式（一般為PNG和JPG），并盡可能壓縮圖片的體積。

　　　　　　　　2.2.減少CSS文件大小：盡量使用縮寫值編寫；省略值為0的單位；設(shè)置顏色時(shí)用最短的代碼表示；將相同選擇器的合并；在上線前將CSS文件壓縮。

　　　　　　3.提升頁面性能：

　　　　　　　　3.1.加載順序：CSS文件=>文檔部分=>JS部分。

　　　　　　　　3.2.減少標(biāo)簽數(shù)量：盡量減少標(biāo)簽之間的嵌套。

　　　　　　　　3.3.縮短選擇器長度：保證優(yōu)先級的前提下，盡量少寫選擇器。

　　　　　　　　3.4.盡量避免耗性能的屬性：如expression、filter、border-radius、box-shadow、gradients等。

　　　　　　　　3.5.圖片設(shè)置寬高：盡量在行內(nèi)設(shè)置好圖片寬高，盡量不拉伸或改變圖片的寬高比。

　　　　　　　　3.6.所有表現(xiàn)用CSS實(shí)現(xiàn)：盡量使用類樣式的增刪來讓JS改變頁面元素的樣式，盡量減少遍歷。

　　　　　　4.提高可讀性和可維護(hù)性：

　　　　　　　　4.1.各類規(guī)范提前設(shè)定。

　　　　　　　　4.2.盡量使用語義化標(biāo)簽編寫代碼；使用內(nèi)容語義設(shè)置類名、id名，以及JS中的變量名和函數(shù)名等。

　　　　　　　　4.3.盡量避免Hack，權(quán)衡利弊再使用；另外要統(tǒng)一相同版本瀏覽器用統(tǒng)一的前綴。

　　　　　　　　4.4.模塊化：將雷同或重復(fù)的功能代碼模塊化，提高代碼的復(fù)用性，減少文件大小。

　　　　　　　　4.5.注釋：在必要的地方添加注釋，方便后期維護(hù)代碼。

　　　　● 項(xiàng)目規(guī)范的制定，一般分為以下幾種：

　　　　　　1.文件規(guī)范：

　　　　　　　　1.1.文件分類：

　　　　　　　　　　1.1.1.通用類：例如樣式文件、類庫文件等等。

　　　　　　　　　　1.1.2.業(yè)務(wù)類：業(yè)務(wù)相關(guān)的資源、圖片、文本等。

　　　　　　　　1.2.文件引入：

　　　　　　　　　　1.2.1.行內(nèi)樣式：不推薦，盡量避免使用；一般在操作節(jié)點(diǎn)樣式時(shí)偶爾使用。

　　　　　　　　　　1.2.2.外聯(lián)引入：推薦，做到樣式與內(nèi)容分離。

　　　　　　　　　　1.2.3.內(nèi)聯(lián)引入：一般的活動頁面等短期頁面使用。

　　　　　　　　　　1.2.4.避免使用@import引入，會引起頁面重新渲染的性能問題。

　　　　　　　　1.3.文件本身：

　　　　　　　　　　1.3.1.文件名：一般推薦使用小寫字母、數(shù)字、中劃線組成。

　　　　　　　　　　1.3.2.編碼：基本都是UTF-8編碼。

　　　　　　2.注釋規(guī)范：

　　　　　　　　2.1.塊狀注釋：統(tǒng)一縮進(jìn)，并寫在被注釋對象之上。

　　　　　　　　2.2.單行注釋：文字兩端需要有空格，避免中文編碼亂碼引起的注釋失效，也要寫在被注釋對象之上。

　　　　　　　　2.3.行內(nèi)注釋：文字兩端需要有空格，并寫在被注釋語句的分號之后。

　　　　　　3.命名規(guī)范：

　　　　　　　　3.1.分類命名：將不同的模塊或區(qū)域的類名加以區(qū)分，避免重名造成樣式污染。

　　　　　　　　3.2.命名格式：

　　　　　　　　　　3.2.1.選擇器盡量都為小寫。

　　　　　　　　　　3.2.2.權(quán)衡長度和可讀性，盡量縮寫。

　　　　　　　　3.3.語義化命名：推薦以內(nèi)容語義命名，盡量避免使用結(jié)構(gòu)命名。

　　　　　　4.書寫規(guī)范：

　　　　　　　　4.1.單行與多行：一般為了可讀性，推薦多行，因?yàn)榭梢哉郫B。

　　　　　　　　4.2.空格與分號：縮進(jìn)不必多談，一般為4個(gè)空格，其他的可以使用IDE的格式化決定；分號都要寫，最后一個(gè)屬性的分號尤為重要。

　　　　　　　　4.3.屬性順序：顯示屬性（display、position、float、list-style等）=>自身屬性（width、border、overflow等）=>文本屬性與其他修飾（font、color、text-align、background等）。

　　　　　　　　4.4.Hack方式：統(tǒng)一各瀏覽器的Hack方式，例如IE6用下劃線開頭，IE6~7用星號開頭；順序上，兼容多的瀏覽器樣式越往前寫。

　　　　　　　　4.5.值格式：統(tǒng)一屬性值，例如顏色值統(tǒng)一為16進(jìn)制表示、URL的引號可以不寫。

　　　　　　5.其他規(guī)范：

　　　　　　　　5.1.HTML規(guī)范：

　　　　　　　　　　5.1.1.文檔聲明：統(tǒng)一為<!DOCTYPE html>并首行頂格開始。

　　　　　　　　　　5.1.2.標(biāo)簽閉合：閉合標(biāo)簽不用多講，自閉合標(biāo)簽可以不寫最后的斜杠。

　　　　　　　　　　5.1.3.屬性：所有標(biāo)簽屬性使用雙引號，form中的驗(yàn)證類屬性需要寫屬性值。

　　　　　　　　　　5.1.4.層級：使用縮進(jìn)體現(xiàn)層級，提高可讀性；標(biāo)簽要正確嵌套，但嵌套不宜太深，太深影響性能。

　　　　　　　　　　5.1.5.注釋：使用頭尾的方式，有注釋開始，也要有注釋結(jié)束。

　　　　　　　　　　5.1.6.大小寫：標(biāo)簽和屬性都時(shí)小寫。

　　　　　　　　5.2.圖片規(guī)范：

　　　　　　　　　　5.2.1.文件名稱：盡量具有語義，名稱長度也需要控制。

　　　　　　　　　　5.2.2.保留源文件：所有修改在源文件上操作，然后重新導(dǎo)出，當(dāng)然可以適時(shí)更新源文件。

　　　　　　　　　　5.2.3.圖片合并：盡可能使用sprite技術(shù)合并圖標(biāo)類圖片；sprite圖片可按模塊、業(yè)務(wù)、頁面來劃分。

　　　　● 頁面中的模塊是指一系列相關(guān)聯(lián)的結(jié)構(gòu)組成的整體，并帶有一定語義，而非表現(xiàn)的結(jié)構(gòu)；例如頁數(shù)按鈕，輪播模塊等。

　　　　● 頁面中的模塊化方法：

　　　　　　1.為模塊分類命名：例如在同一模塊的類名前加上模塊獨(dú)有的前綴，例如.c-box，.n-nav等。

　　　　　　2.以一個(gè)主選擇器開頭作為模塊的根節(jié)點(diǎn)，一個(gè)模塊只能有一個(gè)根節(jié)點(diǎn)；模塊擴(kuò)展時(shí)，可以在根節(jié)點(diǎn)上添加新擴(kuò)展的類名，再使用新類名來控制添加內(nèi)容的樣式。

　　　　　　3.模塊化的益處：利于多人協(xié)同開發(fā)，避免樣式污染；便于擴(kuò)展和重用的同時(shí)，還能增強(qiáng)代碼可讀性和可維護(hù)性。

五、產(chǎn)品前端架構(gòu)

　　1、協(xié)作流程部分：

　　　　● 在典型的MVC架構(gòu)的WEB系統(tǒng)中，分為三個(gè)部分：

　　　　　　1.Model（數(shù)據(jù)）層：主要封裝了數(shù)據(jù)的管理。

　　　　　　2.View（視圖）層：主要展示了數(shù)據(jù)模型，并提供了人機(jī)交互的功能。

　　　　　　3.Controller（控制）層：主要用來處理用戶的請求，委托數(shù)據(jù)層進(jìn)行數(shù)據(jù)相關(guān)的操作，然后選擇合適的視圖返回給用戶。

　　　　● 當(dāng)用戶打開一個(gè)URL地址時(shí)，WEB系統(tǒng)中各層之間的協(xié)作流程如下圖，其中與前端開發(fā)密切相關(guān)的就是視圖層：

　　　　　　

　　　　● 項(xiàng)目開發(fā)以及需求變更的各崗位協(xié)作流程圖如下：

　　　　　　

　　　　　　

　　　　● 頁面工程師職責(zé)：

　　　　　　1.切圖、優(yōu)化圖片。

　　　　　　2.頁面制作、優(yōu)化頁面效果與結(jié)構(gòu)。

　　　　　　3.完成簡單的前端業(yè)務(wù)邏輯開發(fā)。

　　　　● 前端工程師職責(zé)：

　　　　　　1.主導(dǎo)制定前后端分離規(guī)范。

　　　　　　2.主導(dǎo)前后端聯(lián)調(diào)對接測試。

　　　　　　3.系統(tǒng)前端設(shè)計(jì)架構(gòu)、滿足一定的非功能性需求。

　　　　　　4.完成系統(tǒng)前端的業(yè)務(wù)邏輯實(shí)現(xiàn)、優(yōu)化實(shí)現(xiàn)邏輯。

　　　　● 后端工程師職責(zé)：

　　　　　　1.協(xié)助制定前后端分離規(guī)范。

　　　　　　2.協(xié)助前后端聯(lián)調(diào)對接測試。

　　　　　　3.完成后端系統(tǒng)架構(gòu)及業(yè)務(wù)邏輯實(shí)現(xiàn)。

　　2、接口設(shè)計(jì)部分：

　　　　● 接口規(guī)范：

　　　　　　1.頁面入口規(guī)范：定義了URL和視圖模板之間的關(guān)系。

　　　　　　　　1.1.基本信息：頁面的基本信息包括頁面描述和訪問地址，地址可以不帶域名等參數(shù)。

　　　　　　　　1.2.輸入?yún)?shù)：訪問地址上支持?jǐn)y帶的參數(shù)名稱、類型和描述等信息。

　　　　　　　　1.3.模板列表：頁面涉及的相關(guān)視圖模板，包括默認(rèn)頁面、過期頁面及異常頁面的模板。

　　　　　　　　1.4.接口列表：定義頁面要用到的所有異步接口列表。

　　　　　　2.同步數(shù)據(jù)規(guī)范：定義了視圖模板和數(shù)據(jù)模型之間的約定。

　　　　　　　　2.1.基本信息：包括模板文件的地址和模板作用及描述。

　　　　　　　　2.2.預(yù)填數(shù)據(jù)：包括全局和頁面的預(yù)填數(shù)據(jù)的名稱、類型及描述等信息。

　　　　　　　　2.3.注入接口：非必須，指后端注入的接口說明，定義接口的輸入輸出信息，沒有可以不填。

　　　　　　3.異步接口規(guī)范：定義了接口和數(shù)據(jù)模型之間的約定。

　　　　　　　　3.1.基本信息：包括接口的請求方式、接口地址以及接口描述，接口地址不帶查詢參數(shù)。

　　　　　　　　3.2.輸入數(shù)據(jù)：包括REST、查詢參數(shù)等數(shù)據(jù)的名稱、類型及描述。

　　　　　　　　3.3.輸出結(jié)果：主要定義返回給客戶端的數(shù)據(jù)模型結(jié)構(gòu)、包括通用部分和結(jié)果集。

　　　　● 通過項(xiàng)目初期構(gòu)建的接口規(guī)范，可以構(gòu)建項(xiàng)目結(jié)構(gòu)，如通過頁面接口規(guī)范的模板列表導(dǎo)出配置信息，再通過配置信息文件使用自動化工具，構(gòu)建出項(xiàng)目的目錄結(jié)構(gòu)。

　　　　● 前端開發(fā)環(huán)境包括本地模擬服務(wù)器和本地代理，通過本地環(huán)境就可以將前后端的開發(fā)分離。

　　3、版本管理部分：

　　　　● 版本控制系統(tǒng)（Version Control System，簡稱VCS），是一種巨鹿若干文件的修訂記錄的系統(tǒng)，它能幫助我們查閱或回到某個(gè)歷史版本。

　　　　● 版本控制系統(tǒng)有四種：“人肉”VCS、LVCS（本地）、CVCS（集中式）、DVCS（分布式）。

　　　　● 分支是指從目標(biāo)倉庫獲得一份項(xiàng)目拷貝，每條拷貝都有和原倉庫功能一樣的開發(fā)線。

　　　　● 分支模型（又稱為工作流）是指一個(gè)圍繞項(xiàng)目的開發(fā)、部署、測試等工作流程的分支操作（創(chuàng)建、合并等）規(guī)范集合。

　　4、技術(shù)選型部分：

　　　　● 模塊的職責(zé)是什么：封裝實(shí)現(xiàn)；暴露接口；聲明依賴。

　　　　● 模塊系統(tǒng)的職責(zé)是什么：依賴管理（加載/分析/注入/初始化）和決定模塊寫法。

　　　　●?

轉(zhuǎn)載于:https://www.cnblogs.com/battlehawk/p/7588724.html

總結(jié)

以上是生活随笔為你收集整理的笔记 - Front End - 新知识点归纳的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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