笔记 - Front End - 新知识点归纳
一、頁面制作:
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 转载:分布式Session共享:tomc
- 下一篇: TDengine 在IT运维监控领域的应