筆記 - Front End - 新知識點概括

1、頁面製做：

　　一、圖像處理部分：

　　　　● 能夠用「魔棒工具」判斷背景是否爲線性漸變。

　　　　● 須要切出的圖片分爲兩類：

　　　　　　1.修飾性圖片（通常用在background屬性）：圖標、Logo；有特殊效果的按鈕、文字等；非純色的背景等。

　　　　　　2.內容性圖片（通常用在img標籤）：Banner、廣告圖片；文章中的配圖等。

　　　　● 從服務器拉取數據的圖片，須要先使用img標籤佔位。

　　　　● 修飾性圖片通常存爲PNG格式，內容性圖片通常保存爲JPG格式；其中PNG通常使用PNG8和PNG24兩種，PNG24支持半透明，但在IE6中不支持。

　　　　● 帶背景切不規則小圖標可使用魔棒工具和選區工具結合來操做。

　　　　● 圖片保存類型：

　　　　　　1.當圖片色彩豐富且無透明要求時，建議保存爲JPG格式並選擇合適的品質。

　　　　　　2.當圖片色彩不太豐富時不管有沒有透明要求，建議保存爲PNG8格式（RGB顏色，無仿色，無雜邊）。

　　　　　　3.當圖片有半透明要求時，建議保存爲PNG24格式。

　　　　　　4.爲了保證圖片質量的狀況，要保留一份PSD源文件以便修改。

　　　　● 添加圖標但須要改變畫布大小時，以左上角爲中心點擴展後，不會影響已使用圖標在頁面中的位置。

　　　　● 合併圖片分類：

　　　　　　1.同屬於一個模塊的圖片，或同一個頁面用到的圖片合併。

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

　　　　　　3.色彩相近合併。

　　　　　　4.有狀態的圖標合併。

　　　　　　5.綜合以上，視狀況優化。

　　二、開發、調試工具部分：

　　　　● 經常使用的Sublime Text插件有：Package Control（插件管理）、Emmet（快速編寫）、DocBlockr（函數註釋）、SideBarEnhancements（右鍵加強）、Terminal（快捷終端）等等。

　　三、HTML部分：

　　　　● 經過設置a標籤的href屬性，除了URL跳轉或錨連接外，還能夠實現跳轉至郵箱（例如：href="mailto:123@abc.cn"）或在移動端撥打手機（例如：href="tel:13500008888"）等功能。

　　　　● 強調類的標籤中，strong標籤的語義比em標籤要強烈，好比商品價格可使用strong標籤。

　　　　● 使用iframe嵌入的頁面和當前的頁面是在不一樣的上下文中，二者之間是隔離的，在嵌入頁面的操做不會影響當前頁面（例如網頁播放器和頁面內容之間的關係）。

　　　　● 在頁面中插入插件用object標籤或embad標籤引入須要的插件，例如嵌入Flash插件或PDF閱讀插件。

　　　　● 使用map標籤和area標籤能夠實現熱點區域的鏈接，例如常常見到的明星寫真中的穿戴的各類「同款推薦」。

　　　　● 在form表單中的內容過多，須要分區時，可以使用fieldset標籤來分隔，在fieldset標籤下使用legend標籤展現這個分隔區域的標題。

　　四、CSS部分：

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

　　　　● 在CSS3中，僞類選擇器用一個冒號 : 開始，而僞元素選擇器則用兩個冒號 :: 開始。

　　　　● 使用僞元素選擇器能夠實現諸如改變第一個文字樣式或第一行文字樣式等操做；例如：::first-letter {color: red;}或::after {content: "";}等。

　　　　● 選擇器權重分四層：行內樣式最高，權重值1000；其次是ID選擇器，權重值100；再次是類、僞類和屬性選擇器，權重值10；最後是標籤選擇器和僞元素選擇器，權重值1。

　　　　● 經過給某段文字設置text-indent值爲一個負極大值，能夠達到隱藏文字的效果，好比有時某些文字想寫在代碼裏但又不讓它出如今網頁中的狀況。

　　　　● 要求文字截斷並在末尾有省略號，能夠添加text-overflow屬性並設置爲ellipsis。同時，overflow屬性設置爲hidden，white-space屬性設置爲nowrap，三種屬性同時設置才能實現。

　　　　● 使用cursor設置光標形狀時，可使用自定義的.cur文件，在自定義文件後面再添加一個默認形狀，爲沒法訪問自定義文件時的替代方案。例如：.elem {cursor: url(cur.cur), pointer;}。

　　　　● 默認狀況下，盒子寬和高的設置做用於盒子的內容，若是要設置整個盒子的寬和高，就須要利用將box-sizing屬性設置爲border-box來實現；深入理解兩者的寬高做用範圍是不一樣的。

　　　　● 設置padding值爲百分比時，參照的是父盒子的寬度，父盒子沒寬度便繼續參照最近的祖先元素；此時子盒子沒有寬度時，會擁有拋去padding值之外的不超過參照盒子寬的寬度。

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

　　　　● 使用outline造成的「邊框」與border的主要區別是：outline是裝飾性的，不佔用空間，並且它將出如今border的外圍；而border是盒子模型的元素之一，是佔用空間的。

　　　　● 簡寫background屬性時，position屬性和size屬性之間要用/隔開；若是有兩個以上的背景圖片層，那麼背景顏色須要設置在最後一個背景圖片所在的定義語句中。

　　　　● 當一個塊級元素沒有設置寬高時，同時對這個元素設置了top、left、right和bottom屬性，這個元素會自動撐開以符合這四個屬性的值；利用這一特性能夠實現三行自適應佈局。

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

　　　　● 遮罩效果是經過固定定位fixed屬性和z-index屬性的設置來實現的。

　　　　● 在彈性盒子中，只有盒子的子元素符合在文檔流中的條件，纔是彈性元素，其中包括float元素，由於float只是半脫離文檔流，而不包括徹底脫離文檔流的絕對定位和固定定位的元素。

　　　　● 在彈性佈局中，order屬性是一個相對值，數值大的元素在主軸的位置排在數值小的元素以後。

　　　　● 使用flex-basis屬性，能夠設置彈性元素在主軸方向的默認長度。

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

　　　　● 使用flex-shrink屬性設置的是彈性元素在主軸上承擔超出範圍空間的比例，數值越大，承擔越多，意味着自身越小。

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

　　　　● 與align-items屬性能夠設置彈性盒子內全部彈性元素的做用不一樣的是，align-self屬性設置的是某個單獨彈性元素自身在副軸的對齊方式。

　　　　● 在transform屬性中，各類變形方法稱爲transform-function，實際就是函數，括號中的參數就是在給這個函數傳參。

2、程序設計：

　　一、內置對象部分：

　　　　● Object類：

Object.create(proto[, propertiesObject]);//ES5中建立新對象的另外一種方法,能夠爲新對象指定原型對象；例如：
　　var obj1 = Object.create({a:1, b:2});
　　var obj2 = Object.create(ClassName);//ClassName是指定的原型對象的構造器，繼承性上與obj2.prototype = new ClassName()相似；

　　　　● Number類：

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

　　　　● Array類：

arrObj.forEach(callback[, thisArg]);//遍歷數組元素並調用回調函數；callback回調函數規則以下：
function callback(value, index, arrObj);//value是當前元素值，index是當前元素下標，arrObj是數組自己；例如：
　　function test(value, index, array) {
　　　　console.log(value);
　　　　console.log(value === array[index]);  
　　}
　　[2, 3,  , 5].forEach(test);//循環打印分別爲二、true、三、true、五、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字符串轉化爲json對象，至關於stringify的逆向操做；

　　二、做用域部分：

　　　　● 在JS中，沒有塊級做用域，只有函數做用域，if塊、for塊或with塊都不會產生做用域。

　　　　● 使用new Function建立的函數，無論在什麼位置，都屬於全局函數，內部的this指向的都是全局對象（window）。

　　三、練習題有感：

　　　　● 增強對函數表達式的認知，以及瞭解函數表達式和函數聲明二者之間的做用域的不一樣：

　　(function () {
　　　　a = 5;//後面通過聲明的變量將其覆蓋並轉化爲局部變量；
　　　　alert(window.a);//undefined，若是沒有後面的代碼，纔會彈出是5；相同做用域中有聲明的變量會替代沒有聲明的變量；
　　　　var a = 20;
　　　　alert(a);//20
　　})();

　　　　● 再次提醒，函數不通過調用裏面的代碼和結果是不會執行和肯定的：

　　var a = 6;
　　function fn1() {
　　　　var a =7;
　　　　function fn2() {
　　　　　　var a = 8;
　　　　　　alert(a);//看書面題目不要總把可執行代碼看作是在定義的位置執行，而是調用函數的時候執行；
　　　　}
　　　　fn2();
　　　　alert(a);
　　}
　　fn1();
　　alert(a);//彈出結果依次爲八、七、6；

　　　　● 再次加深記憶：++i是先賦值，後使用，先執行i=i+1，再使用i賦值給其餘變量或進行計算；i++是先使用，後賦值，先使用i賦值給其餘變量或進行計算，再執行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;

　　　　●

3、編程藝術：

　　一、節點操做部分：

　　　　● 經過節點關係（父子、兄弟）獲取節點的可維護性較差，通常經過接口獲取節點。

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

　　　　● 與「getElements系列方法獲取到的元素集合是動態的」這一點不一樣的是，querySelectorAll獲取的元素集合是靜態的，當元素節點發生改變後，並不會對獲取到的集合產生影響。

　　elem.textContent;//設置或返回元素及其後代元素的文本內容，IE9不支持；
　　elem.innerText;//設置或返回元素及其後代元素的文本內容，FF不支持；

　　　　● 使用innerHTML增長元素，會使同一目標元素下的其餘元素的重置而丟失樣式或其餘設置；另外在低版本IE下會內存泄露，還會有安全隱患，好比將可運行代碼填入網頁中。

　　　　● 因爲innerHTML的特性，建議僅用於新元素，並且內容要儘可能可控，即便要設置用戶輸入內容，也要有嚴格的驗證。

　　　　● 在JS中，設置label標籤的for屬性使用的屬性名是htmlFor，避免與for關鍵字重名。

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

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

　　　　　　2.使用getAttribute和setAttribute方法。

　　　　　　3.使用dataset屬性，這種方法能夠在元素上保存數據。

　　　　● 使用elem.style.attr的方法修改樣式只能逐條修改，若是須要一條語句修改多個樣式，可使用elem.style.cssText屬性，例如：

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

　　二、事件部分：

　　　　● 阻止事件傳播（阻止冒泡），就是阻止事件傳播到父節點。方法以下：

　　event.stopPropagation();//W3C標準；
　　event.stopImmediatePropagation();//W3C標準；與上面的方法不一樣的是，此方法除了阻止事件傳播到父節點外，還會阻止當前節點的後續事件；
　　event.cancelBubble = true;//IE低版本；

　　　　● 阻止默認行爲的方法：

　　Event.preventDefault();//W3C標準；
　　Event.returnValue = false;//IE低版本；

　　　　● 鼠標事件mouseover/out和mouseenter/leave之間的區別是，後者不會觸發冒泡，觸發事件的元素內的嵌套元素是不會同時觸發事件的。

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

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

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

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

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

　　　　● 自定義控件經常使用的多媒體相關事件，（更多內容參考 http://www.w3school.com.cn/tags/html_ref_eventattributes.asp）：

　　mediaObj.onlodastart;//開始請求媒體內容事件句柄；
　　mediaObj.onloadmetadata;//媒體元數據加載完成事件句柄；
　　mediaObj.oncanplay;//媒體加載了一部分可開始播放事件句柄；
　　mediaObj.onplay;//媒體就緒，能夠開始播放事件句柄；
　　mediaObj.onwaiting;//媒體被迫暫停但條件知足會繼續播放（如緩衝數據不足）事件句柄；
　　mediaObj.onplaying;//媒體開始播放事件句柄；

　　三、數據通訊部分：

　　　　● 經常使用的HTTP方法有：

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

　　　　　　2.POST：向服務器發送須要處理的數據，包含主體。

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

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

　　　　● 請求參數序列化方法：

　　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('&');
　　}

　　　　● 同源策略：兩個頁面擁有相同的協議（protocol），端口（port）和主機（host），name這兩個頁面就屬於同一個源（origin）。

　　　　● 不知足同源策略的訪問，被稱爲跨域資源訪問，要實現跨域資源訪問，須要藉助CORS標準，或者Frame代理，還有JSONP等其餘跨域技術。

　　　　● 經過JSONP技術訪問跨域資源是利用script標籤能夠跨域的原理實現的。

　　四、動畫部分：

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

　　五、表單操做部分：

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

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

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

　　　　　　3.elements：包含表單元素的後表明單控件和歸屬於該表單的表單控件（兩種都排除圖片按鈕），第二種優先級大於第一種。

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

　　　　　　5.form[name]：返回name或id爲指定名稱的表單控件（排除圖片按鈕）；若結果爲空，則返回id爲指定名稱的img元素；如有多個同名元素，則返回一個動態節點集合；

　　　　　　　一旦用指定名稱獲取過該元素，則無論該元素的id或者name怎麼變化，只要節點還在頁面山都可使用原名稱獲取該元素，而使用form.elements[name]則返回null。

　　　　● 表單的reset方法可重置的元素有：input、keygen、output、select、textarea；觸發表單reset事件，阻止它的默認行爲可取消重置；元素重置時再也不觸發元素上的change和input事件。

　　　　● 使用label元素的htmlFor屬性，能夠關聯表單控件激活行爲；可使用label的特性完成諸如自定義上傳文件按鈕等特效。

　　　　● 若是要改變表單控件的form屬性關聯的歸屬表單，因爲該屬性時只讀屬性，不可在程序中修改，只能使用setAttribute方法。

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

　　　　● 建立一個select下拉列表中的option選項，除了常見的document.createElement的方法外，還有一種是專門建立option的方法：

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

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

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

　　　　　　2.selectionStart：選中內容的起始位置，無選中內容時返回光標所在位置。

　　　　　　3.selectionEnd：選中內容的結束位置，無選中內容時返回光標所在位置。

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

　　　　　　5.setRangeText(replacement[, start, end [, mode]])：用來設置某個範圍的內容。

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

　　　　　　1.application/x-www-form-urlencoded；默認的。

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

　　　　　　3.text/plain；通常用於文件上傳。

　　　　● 使用iframe元素結合form元素的target屬性也能夠實現無刷新表單提交。

4、頁面架構：

　　一、佈局方案部分：

　　　　● 水平居中：

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

　　　　　　

　　　　　　2.table + margin：代碼簡單。

　　　　　　

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

　　　　　　

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

　　　　　　

　　　　● 垂直居中：

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

　　　　　　

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

　　　　　　

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

　　　　　　

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

　　　　　　

　　　　　　

　　　　　　

　　　　● 一列定寬與一列自適應佈局：

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

　　　　　　

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

　　　　　　

　　　　　　3.float + overflow：將自適應盒子加上overflow:hidden，觸發自適應盒子BFC模式，隔離與浮動盒子的關係，樣式簡單但不兼容IE6。

　　　　　　

　　　　　　4.table：父盒子的display爲table，兩列子盒子爲table-cell，另外父盒子要加table-layout:fixed佈局優先來加速渲染，因爲表格內margin無效，須要間隔可使用padding來實現。

　　　　　　

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

　　　　　　

　　　　● 一列不定寬一列自適應佈局：

　　　　　　1.float + overflow：能夠很是好的支持此類佈局。

　　　　　　

　　　　　　2.table：須要將table-layout:fixed去掉，由於如今是內容決定寬度，而不是佈局優先；另外在不定寬盒子中要加入width:0.1%設置，用百分比是要兼容IE8，這個方法不支持IE6~7。

　　　　　　

　　　　　　3.flex：很強大，可是不支持IE10如下的版本。

　　　　　　

　　　　● 等分佈局，用公式「父盒寬+間距寬=(子盒寬+間距寬)×N」能夠推導出方法：

　　　　　　1.float：給父盒子設置margin負值增長間距寬，子盒子設置百分比寬度，而後添加相應的正padding值，並設置box-sizing:border-box屬性；此法子盒子數量改變就須要改變子盒子寬度。

　　　　　　

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

　　　　　　

　　　　　　3.flex：不須要爲父盒子添加寬度，代碼量不多，用子盒子的相鄰選擇器添加間距便可，設置了flex佔比後，瀏覽器會自動算出剩餘空間分配，缺點仍然是兼容性問題。

　　　　　　

　　　　● 等高佈局：

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

　　　　　　

　　　　　　2.flex：默認的align-items:stretch屬性就是等高屬性。

　　　　　　

　　　　　　3.float + overflow：稱爲「僞等高」，子盒子都添加padding-bottom極大值，再用margin-bottom負極大值抵消，父盒子加overflow:hidden屬性截取最高子盒子高度來模擬出等高，兼容性好。

　　　　　　

　　　　● 基本全屏佈局：

　　　　　　

　　　　　　1.position（scroll）：充分利用元素不定寬高與定位屬性之間的填充特性來實現，在right區域設定overflow:auto使滾動條只出如今這裏；這個方法不支持IE6，只有hack方案。

　　　　　　

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

　　　　　　

　　　　● 百分比全屏佈局：基本全屏佈局中的定寬定高部分改成百分比，實現方法很簡單，只要把固定寬高修改成想要的百分比便可，下面是position方法的例子，flex方法道理是同樣的：

　　　　　　

　　　　● 內容自適應全屏佈局：基本全屏佈局中的定寬定高部分改成內容自適應，position方法沒法完成，只有flex方法能夠（Grid方法能夠實現，但還未成熟），只要去掉寬高設置便可：

　　　　　　

　　二、頁面優化部分：

　　　　● 頁面優化主要的方式有：

　　　　　　1.減小請求：

　　　　　　　　1.1.圖片合併，如精靈圖的應用；

　　　　　　　　1.2.減小CSS文件請求，主要經過合併CSS文件、少許CSS樣式內聯以及避免使用import的方式引入CSS文件等方法。

　　　　　　2.減小文件大小：

　　　　　　　　2.1.減小圖片大小：選擇合適的圖片格式（通常爲PNG和JPG），並儘量壓縮圖片的體積。

　　　　　　　　2.2.減小CSS文件大小：儘可能使用縮寫值編寫；省略值爲0的單位；設置顏色時用最短的代碼表示；將相同選擇器的合併；在上線前將CSS文件壓縮。

　　　　　　3.提高頁面性能：

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

　　　　　　　　3.2.減小標籤數量：儘可能減小標籤之間的嵌套。

　　　　　　　　3.3.縮短選擇器長度：保證優先級的前提下，儘可能少寫選擇器。

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

　　　　　　　　3.5.圖片設置寬高：儘可能在行內設置好圖片寬高，儘可能不拉伸或改變圖片的寬高比。

　　　　　　　　3.6.全部表現用CSS實現：儘可能使用類樣式的增刪來讓JS改變頁面元素的樣式，儘可能減小遍歷。

　　　　　　4.提升可讀性和可維護性：

　　　　　　　　4.1.各種規範提早設定。

　　　　　　　　4.2.儘可能使用語義化標籤編寫代碼；使用內容語義設置類名、id名，以及JS中的變量名和函數名等。

　　　　　　　　4.3.儘可能避免Hack，權衡利弊再使用；另外要統一相同版本瀏覽器用統一的前綴。

　　　　　　　　4.4.模塊化：將雷同或重複的功能代碼模塊化，提升代碼的複用性，減小文件大小。

　　　　　　　　4.5.註釋：在必要的地方添加註釋，方便後期維護代碼。

　　　　● 項目規範的制定，通常分爲如下幾種：

　　　　　　1.文件規範：

　　　　　　　　1.1.文件分類：

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

　　　　　　　　　　1.1.2.業務類：業務相關的資源、圖片、文本等。

　　　　　　　　1.2.文件引入：

　　　　　　　　　　1.2.1.行內樣式：不推薦，儘可能避免使用；通常在操做節點樣式時偶爾使用。

　　　　　　　　　　1.2.2.外聯引入：推薦，作到樣式與內容分離。

　　　　　　　　　　1.2.3.內聯引入：通常的活動頁面等短時間頁面使用。

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

　　　　　　　　1.3.文件自己：

　　　　　　　　　　1.3.1.文件名：通常推薦使用小寫字母、數字、中劃線組成。

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

　　　　　　2.註釋規範：

　　　　　　　　2.1.塊狀註釋：統一縮進，並寫在被註釋對象之上。

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

　　　　　　　　2.3.行內註釋：文字兩端須要有空格，並寫在被註釋語句的分號以後。

　　　　　　3.命名規範：

　　　　　　　　3.1.分類命名：將不一樣的模塊或區域的類名加以區分，避免重名形成樣式污染。

　　　　　　　　3.2.命名格式：

　　　　　　　　　　3.2.1.選擇器儘可能都爲小寫。

　　　　　　　　　　3.2.2.權衡長度和可讀性，儘可能縮寫。

　　　　　　　　3.3.語義化命名：推薦之內容語義命名，儘可能避免使用結構命名。

　　　　　　4.書寫規範：

　　　　　　　　4.1.單行與多行：通常爲了可讀性，推薦多行，由於能夠摺疊。

　　　　　　　　4.2.空格與分號：縮進沒必要多談，通常爲4個空格，其餘的可使用IDE的格式化決定；分號都要寫，最後一個屬性的分號尤其重要。

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

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

　　　　　　　　4.5.值格式：統一屬性值，例如顏色值統一爲16進製表示、URL的引號能夠不寫。

　　　　　　5.其餘規範：

　　　　　　　　5.1.HTML規範：

　　　　　　　　　　5.1.1.文檔聲明：統一爲<!DOCTYPE html>並首行頂格開始。

　　　　　　　　　　5.1.2.標籤閉合：閉合標籤不用多講，自閉合標籤能夠不寫最後的斜槓。

　　　　　　　　　　5.1.3.屬性：全部標籤屬性使用雙引號，form中的驗證類屬性須要寫屬性值。

　　　　　　　　　　5.1.4.層級：使用縮進體現層級，提升可讀性；標籤要正確嵌套，但嵌套不宜太深，太深影響性能。

　　　　　　　　　　5.1.5.註釋：使用頭尾的方式，有註釋開始，也要有註釋結束。

　　　　　　　　　　5.1.6.大小寫：標籤和屬性都時小寫。

　　　　　　　　5.2.圖片規範：

　　　　　　　　　　5.2.1.文件名稱：儘可能具備語義，名稱長度也須要控制。

　　　　　　　　　　5.2.2.保留源文件：全部修改在源文件上操做，而後從新導出，固然能夠適時更新源文件。

　　　　　　　　　　5.2.3.圖片合併：儘量使用sprite技術合併圖標類圖片；sprite圖片可按模塊、業務、頁面來劃分。

　　　　● 頁面中的模塊是指一系列相關聯的結構組成的總體，並帶有必定語義，而非表現的結構；例如頁數按鈕，輪播模塊等。

　　　　● 頁面中的模塊化方法：

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

　　　　　　2.以一個主選擇器開頭做爲模塊的根節點，一個模塊只能有一個根節點；模塊擴展時，能夠在根節點上添加新擴展的類名，再使用新類名來控制添加內容的樣式。

　　　　　　3.模塊化的益處：利於多人協同開發，避免樣式污染；便於擴展和重用的同時，還能加強代碼可讀性和可維護性。

5、產品前端架構

　　一、協做流程部分：

　　　　● 在典型的MVC架構的WEB系統中，分爲三個部分：

　　　　　　1.Model（數據）層：主要封裝了數據的管理。

　　　　　　2.View（視圖）層：主要展現了數據模型，並提供了人機交互的功能。

　　　　　　3.Controller（控制）層：主要用來處理用戶的請求，委託數據層進行數據相關的操做，而後選擇合適的視圖返回給用戶。

　　　　● 當用戶打開一個URL地址時，WEB系統中各層之間的協做流程以下圖，其中與前端開發密切相關的就是視圖層：

　　　　　　

　　　　● 項目開發以及需求變動的各崗位協做流程圖以下：

　　　　　　

　　　　　　

　　　　● 頁面工程師職責：

　　　　　　1.切圖、優化圖片。

　　　　　　2.頁面製做、優化頁面效果與結構。

　　　　　　3.完成簡單的前端業務邏輯開發。

　　　　● 前端工程師職責：

　　　　　　1.主導制定先後端分離規範。

　　　　　　2.主導先後端聯調對接測試。

　　　　　　3.系統前端設計架構、知足必定的非功能性需求。

　　　　　　4.完成系統前端的業務邏輯實現、優化實現邏輯。

　　　　● 後端工程師職責：

　　　　　　1.協助制定先後端分離規範。

　　　　　　2.協助先後端聯調對接測試。

　　　　　　3.完成後端系統架構及業務邏輯實現。

　　二、接口設計部分：

　　　　● 接口規範：

　　　　　　1.頁面入口規範：定義了URL和視圖模板之間的關係。

　　　　　　　　1.1.基本信息：頁面的基本信息包括頁面描述和訪問地址，地址能夠不帶域名等參數。

　　　　　　　　1.2.輸入參數：訪問地址上支持攜帶的參數名稱、類型和描述等信息。

　　　　　　　　1.3.模板列表：頁面涉及的相關視圖模板，包括默認頁面、過時頁面及異常頁面的模板。

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

　　　　　　2.同步數據規範：定義了視圖模板和數據模型之間的約定。

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

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

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

　　　　　　3.異步接口規範：定義了接口和數據模型之間的約定。

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

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

　　　　　　　　3.3.輸出結果：主要定義返回給客戶端的數據模型結構、包括通用部分和結果集。

　　　　● 經過項目初期構建的接口規範，能夠構建項目結構，如經過頁面接口規範的模板列表導出配置信息，再經過配置信息文件使用自動化工具，構建出項目的目錄結構。

　　　　● 前端開發環境包括本地模擬服務器和本地代理，經過本地環境就能夠將先後端的開發分離。

　　三、版本管理部分：

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

　　　　● 版本控制系統有四種：「人肉」VCS、LVCS（本地）、CVCS（集中式）、DVCS（分佈式）。

　　　　● 分支是指從目標倉庫得到一份項目拷貝，每條拷貝都有和原倉庫功能同樣的開發線。

　　　　● 分支模型（又稱爲工做流）是指一個圍繞項目的開發、部署、測試等工做流程的分支操做（建立、合併等）規範集合。

　　四、技術選型部分：

　　　　● 模塊的職責是什麼：封裝實現；暴露接口；聲明依賴。

　　　　● 模塊系統的職責是什麼：依賴管理（加載/分析/注入/初始化）和決定模塊寫法。

　　　　●