隨著開發(fā)項(xiàng)目的增多扼睬，自己慢慢摸索出一條開發(fā)流程之路缰冤，在此記下戚揭。

想法 --> 實(shí)現(xiàn) --> 測(cè)試 --> 改bug --> 優(yōu)化 --> 壓縮

1.想法

想法就是在項(xiàng)目開發(fā)前對(duì)項(xiàng)目進(jìn)行的深入了解和大致想出該怎么做。
我會(huì)從以下兩大點(diǎn)出發(fā)：

1.1 布局

看到設(shè)計(jì)圖扮匠，第一眼看的就是頁(yè)面的布局，說白了就是html盒子的布局問題凡涩。

1.1.1 從(div+css)編碼布局來說：就三種方式棒搜，即

• 自然布局 （標(biāo)準(zhǔn)流）
• ** 流動(dòng)布局（浮動(dòng)流）**
• ** 定位布局（定位流）**

1.1.2 從網(wǎng)頁(yè)設(shè)計(jì)角度來說：

靜態(tài)布局

優(yōu)點(diǎn)：
①一般版心寬度960px,margin: 0 auto;
②保證小分辨率1024正常瀏覽 ，同時(shí)大分辨率居中展示

缺點(diǎn)：
①大分辨屏幕兩邊留白太多活箕；
②不會(huì)隨設(shè)備分辨率改變而適應(yīng)屏幕力麸；
③不符合人們?nèi)者M(jìn)瘋狂的審美標(biāo)準(zhǔn);

參考鏈接：
http://www.12306.cn/mormhweb/ 據(jù)說耗資兩億的網(wǎng)站，呵呵

自適應(yīng)布局

優(yōu)點(diǎn)：
①分別為不同的屏幕分辨率定義布局，布局切換時(shí)頁(yè)面元素發(fā)生改變

缺點(diǎn)：
①每個(gè)布局中末盔，頁(yè)面元素不隨窗口大小的調(diào)整發(fā)生變化
②可看作是靜態(tài)布局的一個(gè)系列

參考鏈接：
http://www.blueidea.com/tech/web/2009/6943.asp

http://www.zhangxinxu.com/wordpress/2009/11/ 自適應(yīng)css布局

流式布局個(gè)人理解筑舅，主體元素用百分比

優(yōu)點(diǎn)：
①主要使用百分比來設(shè)置各個(gè)部分的寬度, 用來適應(yīng)不同的分辨率

缺點(diǎn)：
①若屏幕尺度跨度太大，在相對(duì)其原始設(shè)計(jì)過小或過大的屏幕上不能正常顯示

響應(yīng)式布局

優(yōu)點(diǎn)：

①不同的屏幕分辨率定義布局陨舱，元素寬度隨著窗口調(diào)整而自動(dòng)適配
② 可看作是流式布局和自適應(yīng)布局設(shè)計(jì)理念的融合
③跨平臺(tái)翠拣，在手機(jī)，pad游盲，電腦上均有不俗的表現(xiàn)
④節(jié)省人力開發(fā)成本误墓，不再需要有人特地維護(hù)PC頁(yè)面，移動(dòng)頁(yè)面
⑤表現(xiàn)力一致益缎，在不同的平臺(tái)上看到的東西都是基本一致的谜慌，會(huì)讓感覺體驗(yàn)良好

缺點(diǎn)：

①自由度太低，局限性較大莺奔，需要考慮在手機(jī)欣范，pad，PC上三種屏幕下的頁(yè)面內(nèi)元素的呈現(xiàn)令哟；
②.頁(yè)面會(huì)大恼琼，打開速度慢。同時(shí)下載多套CSS樣式代碼屏富，可能在手機(jī)上就下載PC/pad的冗余代碼晴竞，浪費(fèi)了流量資源
③對(duì)于非webkit內(nèi)核的瀏覽器支持極差 ，Windows Phone手機(jī)上用的IE瀏覽器狠半，完全就悲劇了

參考鏈接：
http://www.bubuko.com/infodetail-268180.html 媒體查詢
http://www.jq22.com/yanshi4277
http://time.com 響應(yīng)式網(wǎng)站

彈性布局

優(yōu)點(diǎn)：

①使用 em 或 rem 單位進(jìn)行相對(duì)布局,相對(duì) % 百分比更加靈活噩死，
②支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示
③ 兼容性：IE9+，F(xiàn)irefox神年、Chrome已维、Safari、Opera 的主流版本都支持

缺點(diǎn)：

①文字排版瘤袖，rem 的等比縮放特性會(huì)讓所有設(shè)備一行顯示的文字?jǐn)?shù)量相同衣摩，大屏幕上不能顯示更多內(nèi)容。
②對(duì)圖片型的 Sprite 支持不好捂敌，建議使用 Font Icon 或者 SVG 型 Sprite；
③有小數(shù)點(diǎn)參與計(jì)算既琴，會(huì)出現(xiàn)類似 50% + 50% > 100% 導(dǎo)致意外折行的情況占婉；

參考鏈接：
http://www.cnblogs.com/breakdown/p/4231708.html
http://www.iinterest.net/2015/07/22/css3-rem-layout/?utm_source=tuicool&utm_medium=referral rem

** 瀑布流布局**

優(yōu)點(diǎn)：

①圖片的展現(xiàn)高效有吸引力
②懶加載模式避免用戶鼠標(biāo)點(diǎn)擊的翻頁(yè)操作，提高頁(yè)面加載速度
③不必明確知道數(shù)據(jù)塊高度甫恩，當(dāng)數(shù)據(jù)塊中有圖片時(shí)逆济，就不需要指定圖片高度
④ 適合于文字多欄排列

缺點(diǎn)：

①純css實(shí)現(xiàn)不了，要用jQuery 的 Masonry 插件
②只有高級(jí)瀏覽器中才能使用
③列數(shù)固定，擴(kuò)展不易奖慌，當(dāng)瀏覽器窗口大小變化時(shí)抛虫，只能固定的x列，如果要添加一列简僧，很難調(diào)整數(shù)據(jù)塊的排列
④ 滾動(dòng)加載更多數(shù)據(jù)時(shí)建椰，還要指定插入到第幾列中，不夠方便

參考鏈接：
http://masonry.desandro.com 參考網(wǎng)站
http://www.jq-school.com/Show.aspx?id=333 概念理解
http://www.tuicool.com/articles/RvY3Yv css3瀑布流實(shí)現(xiàn)
http://www.jq22.com/jquery-info362 具體方法
http://bbs.blueidea.com/thread-3058927-1-1.html 實(shí)例

所以得出了下面的結(jié)論：
1.如果只做pc端岛马，那么定寬度是最好的選擇
2.如果做移動(dòng)端棉姐，且設(shè)計(jì)對(duì)高度和元素間距要求不高，那么rem+js是最好的選擇啦逆，一份css+一份js調(diào)節(jié)font-size搞定
3.如果pc伞矩，移動(dòng)要兼容，而且要求很高那么響應(yīng)式布局還是最好的選擇夏志，前提是設(shè)計(jì)根據(jù)不同的高寬做不同的設(shè)計(jì)乃坤，響應(yīng)式根據(jù)媒體查詢做不同的布局。
4.為了更清晰的了解靜態(tài)沟蔑，自適應(yīng)湿诊，流式，響應(yīng)式布局的區(qū)別溉贿，可參考 http://wow.techbrood.com/fiddle/1753 需登錄qq

1.2 交互

確定布局后枫吧，還要看都有哪些交互要做。注重用戶體驗(yàn)的產(chǎn)品確實(shí)值得學(xué)習(xí)和尊重宇色。

說簡(jiǎn)單點(diǎn)就是人除了可以瀏覽這個(gè)web頁(yè)面九杂，還可以在這個(gè)web頁(yè)面上進(jìn)行一些操作，而這些操作還會(huì)跟你發(fā)生一系列互動(dòng)

本人只做頁(yè)面開發(fā)宣蠕，對(duì)交互設(shè)計(jì)理解不深入例隆，找來篇文章學(xué)習(xí)
http://www.missyuan.com/thread-682067-1-1.html

站在開發(fā)角度，我會(huì)把產(chǎn)品中的交互開發(fā)分為兩個(gè)部分：

1.2.1 實(shí)現(xiàn)用戶操作功能的交互開發(fā)

比如抢蚀，表單驗(yàn)證镀层，搜索功能，錯(cuò)誤提示皿曲，下拉選項(xiàng)提示唱逢，等待加載頁(yè)面，加載進(jìn)度條屋休，導(dǎo)航跟隨等等坞古。
交互設(shè)計(jì)是產(chǎn)品設(shè)計(jì)師已經(jīng)設(shè)計(jì)好的，而我要做的是實(shí)現(xiàn)和增強(qiáng)用戶操作的體驗(yàn)劫樟，例
搜索框里加上提示搜索的信息痪枫，焦點(diǎn)在框內(nèi)時(shí)提示文字全部消失织堂，以便用戶直接輸入

<input type="search" name="user_search" placeholder="Search W3School" />

1.2.2 提示用戶操作的交互行為

• hover
  設(shè)置圖片hover放大，文字和按鈕hover變色奶陈， title提示
• active
  告訴用戶他當(dāng)前所在的位置易阳，所以要有特色樣式
• banner 左右兩側(cè)arrow按鈕
  提示用戶焦點(diǎn)圖可以上下翻頁(yè)看
• backTop的提示
  若頁(yè)面超過兩屏高，最好在底部設(shè)置個(gè)backTop按鈕提示吃粒，方便用戶再次看頂部的信息

$(window).scroll(function(e) {
      if($(window).scrollTop() >$(window).height()){
           $('.backTop').show();
      }else{
           $('.backTop').hide();
      }
 });
 $('.backTop').click(function(e) {
          $('body,html').animate({'scrollTop':'0px'},500);
 });

• 不可操作時(shí)的遮罩層

<html>
<head>
<title>彈出一個(gè)窗口后潦俺，后面的層不可操作</title>
<script>
function show()  //顯示隱藏層和彈出層
{
   var hideobj=document.getElementById("hidebg");
   hidebg.style.display="block";  //顯示隱藏層
   hidebg.style.height=document.body.clientHeight+"px";  //設(shè)置隱藏層的高度為當(dāng)前頁(yè)面高度
   document.getElementById("hidebox").style.display="block";  //顯示彈出層
}
function hide()  //去除隱藏層和彈出層
{
   document.getElementById("hidebg").style.display="none";
   document.getElementById("hidebox").style.display="none";
}
</script>
<style>
   body { margin:0px;padding:0px;text-align: center;}
   #hidebg { position:absolute;left:0px;top:0px;
      background-color:#000;
      width:100%;  /*寬度設(shè)置為100%，這樣才能使隱藏背景層覆蓋原頁(yè)面*/
      filter:alpha(opacity=60);  /*設(shè)置透明度為60%*/
      opacity:0.6;  /*非IE瀏覽器下設(shè)置透明度為60%*/
      display:none; /* http://www.bitsCN.com */
      z-Index:2;}
   #hidebox { position:absolute;width:400px;height:300px;top:200px;left:30%;background-color:#fff;display:none;cursor:pointer;z-Index:3;}
   #content { text-align:center;cursor:pointer;z-Index:1;}
</style>
</head>
<body>
<div id="hidebg"></div>
<div id="hidebox" onClick="hide();">點(diǎn)擊關(guān)閉</div>
<div id="content" onClick="show();">點(diǎn)擊試試</div>
</body>
</html>

• 加載進(jìn)度條和自定義加載動(dòng)畫插件
  介紹兩個(gè)我知道的
• progress.js
  http://blog.csdn.net/joyhen/article/details/24458427 官網(wǎng)和下載地址在里面
  http://www.cnblogs.com/Wayou/p/gmail_like_page_loading_progress_bar.html 自定義動(dòng)畫寫法
  優(yōu)點(diǎn)： 能自定義加載動(dòng)畫
  缺點(diǎn)： 依賴于jquery.min.js ,不輕便
• pace.js
  http://github.hubspot.com/pace/docs/welcome/
  優(yōu)點(diǎn)： 輕便声搁，官網(wǎng)有多個(gè)模板可用
  缺點(diǎn)： 不能自定義加載動(dòng)畫

2.實(shí)現(xiàn)

2.1 技術(shù)難點(diǎn)

每個(gè)項(xiàng)目可能都會(huì)遇到自己沒實(shí)現(xiàn)過的需求黑竞，怎么辦？莫慌疏旨，
1.先google些資料壯壯膽
2.分析和學(xué)習(xí)下他人實(shí)現(xiàn)的代碼
3.自己寫 #### 2.1 兼容demo
4.慢慢調(diào)試修改很魂，直到達(dá)到自己項(xiàng)目中的需求
把難點(diǎn)攻克了，其他就都o(jì)k了檐涝，寫項(xiàng)目心也不慌了

2.2 搬救兵遏匆，找外援

有些輪播，電梯導(dǎo)航谁榜，分辨率適配幅聘，自己不會(huì)寫或懶得寫的需求，可以讓框架窃植，插件上帝蒿。

** 2.2.1框架 **
我常用的有* bootstrap 框架和移動(dòng)端的 fullpage *框架。
不過多介紹這兩個(gè)框架巷怜，原因是前端框架很多葛超，個(gè)人只停留在會(huì)用上，沒有很深入研究延塑。
新接觸的框架绣张，不會(huì)用，可以先寫個(gè)demo关带，簡(jiǎn)單學(xué)習(xí)下

** 2.2.2插件 **
這個(gè)就多了侥涵，要看實(shí)現(xiàn)哪些效果，圖表Echarts,分享插件宋雏，天氣芜飘，日期，分頁(yè)磨总，滾動(dòng)條燃箭，圖片懶加載，加載進(jìn)度條等舍败。
不多說，看需求。

2.3 兼容

不得不做的事就是兼容邻薯，沒辦法裙戏，用戶至上，一切為了用戶厕诡。累榜。。寶寶心里苦灵嫌，但寶寶不說壹罚，就偷偷地寫出來
兼容兩個(gè)方面：
2.3.1 瀏覽器兼容
相比其他chrome,safari,firefox,opera,兼容IE8多一些,要為該掛的IE8兼容html5的標(biāo)簽，兼容css3眾多美好屬性寿羞，包括媒體查詢猖凛。。绪穆。

• 讓ie瀏覽器按最高標(biāo)準(zhǔn)解析頁(yè)面辨泳，360瀏覽器按極速模式解析

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">

• ie8 引用兩個(gè)js可以解決適配問題和html5標(biāo)簽的兼容問題

    <!--[if IE 8]>
            <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
            <script src="js/html5shiv.js"></script>
     <![endif]-->

• ie8讓IE8支持placeholder屬性

jQuery('[placeholder]').focus(function() {
   var input = jQuery(this); 
   if (input.val() == input.attr('placeholder')) {
       input.val('');   
       input.removeClass('placeholder');
  }
 }).blur(function() {
  var input = jQuery(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur().parents('form').submit(function() {
  jQuery(this).find('[placeholder]').each(function() {
    var input = jQuery(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    } 
 })
});

• 清除ie input 的默認(rèn)樣式

input::-ms-clear, input::-ms-reveal{display: none;}/* 清除ie中input的默認(rèn)行為 */

• 清除ie 和火狐a標(biāo)簽獲取焦點(diǎn)時(shí)的默認(rèn)行為

a:focus{outline: none!important;-moz-outline: none;}/* 清除ie a標(biāo)簽獲取焦點(diǎn)時(shí)的默認(rèn)行為 */

• 清除瀏覽器的select默認(rèn)樣式

select{
    border: 1px solid #ccc;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select::-ms-expand { display: none; }/* 清除瀏覽器的默認(rèn)樣式 */

• IE8支持rgba()屬性寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE8支持rgba()屬性寫法</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            background: rgba(0, 0, 0, .5);
        }       
    </style>
    <!--[if lt IE 9]>
       <style type="text/css">
           #box{
               background: transparent;
               filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
               zoom: 1;
            }
        </style>
    <![endif]-->
</head>
<body>
    <div id="box"></div>
</body>
</html>

• ie9以下兼容漸變背景色的濾鏡屬性

 .box {
  background: -webkit-linear-gradient(top, #3a8fd8, #449ce9);
  background: -moz-linear-gradient(top, #3a8fd8, #449ce9);
  background: -ms-linear-gradient(top, #3a8fd8, #449ce9);
  background: -o-linear-gradient(top, #3a8fd8, #449ce9);
  background: linear-gradient(top, #3a8fd8, #449ce9);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a8fd8', endColorstr='#449ce9',GradientType='0')";
  /* IE8 */
}
GradientType='0'表示漸變從上到下
GradientType='1'表示漸變從左到右

• PIE兼容圓角border-radius，盒陰影box-shadow

/*兼容圓角*/
.pie_radius{
    width:360px;
    height:200px;
    background-color:#34538b;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    position:relative; /*定位必須加上*/
    behavior:url(pie.htc); /*pie文件要放在根目錄下玖院，不要放在css文件里菠红！*/
}
/*兼容盒陰影*/
.pie_box_shadow{
    width:360px;
    height:200px;
    background-color:#34538b;
    -moz-box-shadow:1px 3px 3px #666;
    -webkit-box-shadow:1px 3px 3px #666;
    box-shadow:1px 3px 3px #666;
    position:relative;/*定位必須加上*/
    behavior:url(pie.htc); /*pie文件要放在根目錄下，不要放在css文件里难菌！*/
}

可參考 http://www.zhangxinxu.com/wordpress/2010/07/pie使ie支持css3圓角盒陰影與漸變渲染/
2.3.2 分辨率兼容
若只開發(fā)Web頁(yè)面试溯，自適應(yīng)布局，同時(shí)用百分比定寬度差不多就夠了郊酒；
若全上遇绞，那就響應(yīng)式布局；
若移動(dòng)猎塞，就rem和百分比一起用试读；

3. 測(cè)試

這個(gè)要看項(xiàng)目要求在哪些設(shè)備和分辨率下測(cè)試了，我從這幾方面看荠耽，

• 頁(yè)面樣式
• 交互效果
• 加載速度
• 分辨率
• 不同設(shè)備
  這塊貌似沒啥可說的钩骇，也是個(gè)細(xì)心又無聊的事兒，不過是自己寫的項(xiàng)目铝量，就不無聊了倘屹。用心才能發(fā)現(xiàn)更多問題，在用戶使用產(chǎn)品前就把它們干掉慢叨。

4. 改bug

每個(gè)人在每個(gè)項(xiàng)目中纽匙，遇到的問題是不同的，而且bug可大可小拍谐，解決順序當(dāng)然是先挑最棘手的烛缔，影響最大的bug去啃馏段。我認(rèn)為改bug
** 一靠經(jīng)驗(yàn)，二靠決心践瓷，三靠耐心 **
有種死磕的味道院喜，我就是這樣，當(dāng)然解決不了的bug晕翠，若是不影響用戶操作和很明顯的視覺效果喷舀，可以先放下，畢竟一個(gè)項(xiàng)目的工期有限淋肾。

5. 優(yōu)化

優(yōu)化貫穿整個(gè)項(xiàng)目的開發(fā)和維護(hù)過程硫麻，時(shí)時(shí)刻刻都要想著怎樣能讓代碼更精簡(jiǎn)，項(xiàng)目運(yùn)行起來更輕便樊卓，加載更快拿愧。

** 5.1 代碼優(yōu)化 **
代碼優(yōu)化很重要，方便以后對(duì)項(xiàng)目的維護(hù)和重用简识，讓自己和他人看著都很賞心悅目赶掖。

• 相同樣式代碼合并
• 每個(gè)頁(yè)面都有的部分可以提出來，建個(gè)base.css
• 常用的結(jié)構(gòu)或布局樣式可以提取出來七扰，自定義樣式庫(kù)奢赂，方便以后用
• 常用的css3動(dòng)畫效果可以提出來，自定義動(dòng)畫樣式庫(kù)
• 多次重復(fù)的事情css做起來麻煩颈走，js就幫個(gè)忙

** 5.2 語(yǔ)義化標(biāo)簽**

• html5標(biāo)簽語(yǔ)義化很強(qiáng)膳灶，可常用 兼容ie8的方法在兼容部分提到了
• logo,產(chǎn)品名稱一般放到h1標(biāo)簽中的a標(biāo)簽里，有助搜索引擎優(yōu)化

** 5.3 項(xiàng)目整體優(yōu)化 **

• 多個(gè)小圖標(biāo)可以用sprite圖,或fontIcon
• 引入的js文件較大立由，可用線上網(wǎng)址轧钓，更快，省資源

6. 壓縮

• gulp自動(dòng)壓縮同步锐膜，用法 http://www.ydcss.com/archives/18
• js模塊化編程 http://www.ruanyifeng.com/blog/2012/11/require_js.html
• Webpack打包 http://zhuanlan.zhihu.com/p/20367175
• js/css壓縮 個(gè)人常用 http://tool.css-js.com
• 圖片壓縮 個(gè)人常用 https://tinypng.com