一、頁面制作：

　　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.綜合以上，視情況優化。

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

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

　　3、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標簽展示這個分隔區域的標題。

　　4、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，實際就是函數，括號中的參數就是在給這個函數傳參。

二、程序設計：

　　1、內置對象部分：

　　　　● 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);//循環打印分別為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字符串轉化為json對象，相當于stringify的逆向操作；

　　2、作用域部分：

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

　　　　● 使用new Function創建的函數，不管在什么位置，都屬于全局函數，內部的this指向的都是全局對象（window）。

　　3、練習題有感：

　　　　● 加強對函數表達式的認知，以及了解函數表達式和函數聲明兩者之間的作用域的不同：

　　(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);//彈出結果依次為8、7、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;

　　　　●

三、編程藝術：

　　1、節點操作部分：

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

　　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;';

　　2、事件部分：

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

　　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;//媒體開始播放事件句柄；

　　3、數據通信部分：

　　　　● 常用的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標簽可以跨域的原理實現的。

　　4、動畫部分：

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

　　5、表單操作部分：

　　　　● 表單元素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屬性也可以實現無刷新表單提交。

四、頁面架構：

　　1、布局方案部分：

　　　　● 水平居中：

　　　　　　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方法可以實現，但還未成熟），只要去掉寬高設置即可：

　　　　　　

　　2、頁面優化部分：

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

　　　　　　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.模塊化的益處：利于多人協同開發，避免樣式污染；便于擴展和重用的同時，還能增強代碼可讀性和可維護性。

五、產品前端架構

　　1、協作流程部分：

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

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

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

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

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

　　　　　　

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

　　　　　　

　　　　　　

　　　　● 頁面工程師職責：

　　　　　　1.切圖、優化圖片。

　　　　　　2.頁面制作、優化頁面效果與結構。

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

　　　　● 前端工程師職責：

　　　　　　1.主導制定前后端分離規范。

　　　　　　2.主導前后端聯調對接測試。

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

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

　　　　● 后端工程師職責：

　　　　　　1.協助制定前后端分離規范。

　　　　　　2.協助前后端聯調對接測試。

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

　　2、接口設計部分：

　　　　● 接口規范：

　　　　　　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.輸出結果：主要定義返回給客戶端的數據模型結構、包括通用部分和結果集。

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

　　　　● 前端開發環境包括本地模擬服務器和本地代理，通過本地環境就可以將前后端的開發分離。

　　3、版本管理部分：

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

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

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

　　　　● 分支模型（又稱為工作流）是指一個圍繞項目的開發、部署、測試等工作流程的分支操作（創建、合并等）規范集合。

　　4、技術選型部分：

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

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

　　　　●?

轉載于:https://www.cnblogs.com/battlehawk/p/7588724.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。