day12
web項目開發流程小結
字數3960 閱讀102 評論0 喜歡1
隨着開發項目的增多，本身慢慢摸索出一條開發流程之路，在此記下。
________________________________________
想法 --> 實現 --> 測試 --> 改bug --> 優化 --> 壓縮
1.想法
想法就是在項目開發前對項目進行的深刻了解和大體想出該怎麼作。
我會從如下兩大點出發：
1.1 佈局
看到設計圖，第一眼看的就是頁面的佈局，說白了就是html盒子的佈局問題。
1.1.1 從(div+css)編碼佈局來講：就三種方式，即
• 天然佈局 （標準流）
• 流動佈局（浮動流）
• 定位佈局（定位流）
1.1.2 從網頁設計角度來講：
靜態佈局
優勢：
①通常版心寬度960px,margin: 0 auto;
②保證小分辨率1024正常瀏覽 ，同時大分辨率居中展現
缺點：
①大分辨屏幕兩邊留白太多；
②不會隨設備分辨率改變而適應屏幕；
③不符合人們日進瘋狂的審美標準;
參考連接：
http://www.12306.cn/mormhweb/ 聽說耗資兩億的網站，呵呵
自適應佈局
優勢：
①分別爲不一樣的屏幕分辨率定義佈局，佈局切換時頁面元素髮生改變
缺點：
①每一個佈局中，頁面元素不隨窗口大小的調整發生變化
②可看做是靜態佈局的一個系列
參考連接：
http://www.blueidea.com/tech/web/2009/6943.asp
http://www.zhangxinxu.com/wordpress/2009/11/ 自適應css佈局
流式佈局我的理解，主體元素用百分比
優勢：
①主要使用百分比來設置各個部分的寬度, 用來適應不一樣的分辨率
缺點：
①若屏幕尺度跨度太大，在相對其原始設計太小或過大的屏幕上不能正常顯示
響應式佈局
優勢：
①不一樣的屏幕分辨率定義佈局，元素寬度隨着窗口調整而自動適配
② 可看做是流式佈局和自適應佈局設計理念的融合
③跨平臺，在手機，pad，電腦上均有不俗的表現
④節省人力開發成本，再也不須要有人特意維護PC頁面，移動頁面
⑤表現力一致，在不一樣的平臺上看到的東西都是基本一致的，會讓感受體驗良好
缺點：
①自由度過低，侷限性較大，須要考慮在手機，pad，PC上三種屏幕下的頁面內元素的呈現；
②.頁面會大，打開速度慢。同時下載多套CSS樣式代碼，可能在手機上就下載PC/pad的冗餘代碼，浪費了流量資源
③對於非webkit內核的瀏覽器支持極差 ，Windows Phone手機上用的IE瀏覽器，徹底就悲劇了
參考連接：
http://www.bubuko.com/infodetail-268180.html 媒體查詢
http://www.jq22.com/yanshi4277
http://time.com 響應式網站
彈性佈局
優勢：
①使用 em 或 rem 單位進行相對佈局,相對 % 百分比更加靈活，
②支持瀏覽器的字體大小調整和縮放等的正常顯示
③ 兼容性：IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持
缺點：
①文字排版，rem 的等比縮放特性會讓全部設備一行顯示的文字數量相同，大屏幕上不能顯示更多內容。
②對圖片型的 Sprite 支持很差，建議使用 Font Icon 或者 SVG 型 Sprite；
③有小數點參與計算，會出現相似 50% + 50% > 100% 致使意外折行的狀況；
參考連接：
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
瀑布流佈局
優勢：
①圖片的展示高效有吸引力
②懶加載模式避免用戶鼠標點擊的翻頁操做，提升頁面加載速度
③沒必要明確知道數據塊高度，當數據塊中有圖片時，就不須要指定圖片高度
④ 適合於文字多欄排列
缺點：
①純css實現不了，要用jQuery 的 Masonry 插件
②只有高級瀏覽器中才能使用
③列數固定，擴展不易，當瀏覽器窗口大小變化時，只能固定的x列，若是要添加一列，很難調整數據塊的排列
④ 滾動加載更多數據時，還要指定插入到第幾列中，不夠方便
參考連接：
http://masonry.desandro.com 參考網站
http://www.tuicool.com/articles/RvY3Yv css3瀑布流實現
http://www.jq22.com/jquery-info362 具體方法
http://bbs.blueidea.com/thread-3058927-1-1.html 實例
因此得出了下面的結論：
1.若是隻作pc端，那麼定寬度是最好的選擇
2.若是作移動端，且設計對高度和元素間距要求不高，那麼rem+js是最好的選擇，一份css+一份js調節font-size搞定
3.若是pc，移動要兼容，並且要求很高那麼響應式佈局仍是最好的選擇，前提是設計根據不一樣的高寬作不一樣的設計，響應式根據媒體查詢作不一樣的佈局。
4.爲了更清晰的瞭解靜態，自適應，流式，響應式佈局的區別，可參考http://wow.techbrood.com/fiddle/1753 需登陸qq
1.2 交互
肯定佈局後，還要看都有哪些交互要作。注重用戶體驗的產品確實值得學習和尊重。
說簡單點就是人除了能夠瀏覽這個web頁面，還能夠在這個web頁面上進行一些操做，而這些操做還會跟你發生一系列互動
本人只作頁面開發，對交互設計理解不深刻，找來篇文章學習
http://www.missyuan.com/thread-682067-1-1.html
站在開發角度，我會把產品中的交互開發分爲兩個部分：
1.2.1 實現用戶操做功能的交互開發
好比，表單驗證，搜索功能，錯誤提示，下拉選項提示，等待加載頁面，加載進度條，導航跟隨等等。
交互設計是產品設計師已經設計好的，而我要作的是實現和加強用戶操做的體驗，例
搜索框里加上提示搜索的信息，焦點在框內時提示文字所有消失，以便用戶直接輸入
<input type="search" name="user_search" placeholder="Search W3School" />
1.2.2 提示用戶操做的交互行爲
• hover
設置圖片hover放大，文字和按鈕hover變色， title提示
• active
告訴用戶他當前所在的位置，因此要有特點樣式
• banner 左右兩側arrow按鈕
提示用戶焦點圖能夠上下翻頁看
• backTop的提示
若頁面超過兩屏高，最好在底部設置個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);
});
• 不可操做時的遮罩層
• <html>
• <head>
• <title>彈出一個窗口後，後面的層不可操做</title>
• <script>
• function show() //顯示隱藏層和彈出層
• {
• var hideobj=document.getElementById("hidebg");
• hidebg.style.display="block"; //顯示隱藏層
• hidebg.style.height=document.body.clientHeight+"px"; //設置隱藏層的高度爲當前頁面高度
• 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%; /*寬度設置爲100%，這樣才能使隱藏背景層覆蓋原頁面*/
• filter:alpha(opacity=60); /*設置透明度爲60%*/
• opacity:0.6; /*非IE瀏覽器下設置透明度爲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();">點擊關閉</div>
• <div id="content" onClick="show();">點擊試試</div>
• </body>
</html>
• 加載進度條和自定義加載動畫插件
介紹兩個我知道的
o progress.js
http://blog.csdn.net/joyhen/article/details/24458427 官網和下載地址在裏面
http://www.cnblogs.com/Wayou/p/gmail_like_page_loading_progress_bar.html自定義動畫寫法
優勢： 能自定義加載動畫
缺點： 依賴於jquery.min.js ,不輕便
o pace.js
http://github.hubspot.com/pace/docs/welcome/
優勢： 輕便，官網有多個模板可用
缺點： 不能自定義加載動畫
2.實現
2.1 技術難點
每一個項目可能都會遇到本身沒實現過的需求，怎麼辦？莫慌，
1.先google些資料壯壯膽
2.分析和學習下他人實現的代碼
3.本身寫 #### 2.1 兼容demo
4.慢慢調試修改，直到達到本身項目中的需求
把難點攻克了，其餘就都ok了，寫項目心也不慌了
2.2 搬救兵，找外援
有些輪播，電梯導航，分辨率適配，本身不會寫或懶得寫的需求，可讓框架，插件上。
2.2.1框架
我經常使用的有 bootstrap 框架和移動端的 fullpage 框架。
不過多介紹這兩個框架，緣由是前端框架不少，我的只停留在會用上，沒有很深刻研究。
新接觸的框架，不會用，能夠先寫個demo，簡單學習下
2.2.2插件
這個就多了，要看實現哪些效果，圖表Echarts,分享插件，天氣，日期，分頁，滾動條，圖片懶加載，加載進度條等。
很少說，看需求。
2.3 兼容
不得不作的事就是兼容，沒辦法，用戶至上，一切爲了用戶。。。寶寶內心苦，但寶寶不說，就偷偷地寫出來
兼容兩個方面：
2.3.1 瀏覽器兼容
相比其餘chrome,safari,firefox,opera,兼容IE8多一些,要爲該掛的IE8兼容html5的標籤，兼容css3衆多美好屬性，包括媒體查詢。。。
• 讓ie瀏覽器按最高標準解析頁面，360瀏覽器按極速模式解析
• <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
• ie8 引用兩個js能夠解決適配問題和html5標籤的兼容問題
• <!--[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 的默認樣式
input::-ms-clear, input::-ms-reveal{display: none;}/* 清除ie中input的默認行爲 */
• 清除ie 和火狐a標籤獲取焦點時的默認行爲
a:focus{outline: none!important;-moz-outline: none;}/* 清除ie a標籤獲取焦點時的默認行爲 */
• 清除瀏覽器的select默認樣式
• select{
• border: 1px solid #ccc;
• -webkit-appearance: none;
• -moz-appearance: none;
• appearance: none;
• }
select::-ms-expand { display: none; }/* 清除瀏覽器的默認樣式 */
• 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 分辨率兼容
若只開發Web頁面，自適應佈局，同時用百分比定寬度差很少就夠了；
若全上，那就響應式佈局；
若移動，就rem和百分比一塊兒用；
3. 測試
這個要看項目要求在哪些設備和分辨率下測試了，我從這幾方面看，
• 頁面樣式
• 交互效果
• 加載速度
• 分辨率
• 不一樣設備
這塊貌似沒啥可說的，也是個細心又無聊的事兒，不過是本身寫的項目，就不無聊了。用心才能發現更多問題，在用戶使用產品前就把它們幹掉。
4. 改bug
每一個人在每一個項目中，遇到的問題是不一樣的，並且bug可大可小，解決順序固然是先挑最棘手的，影響最大的bug去啃。我認爲改bug
一靠經驗，二靠決心，三靠耐心
有種死磕的味道，我就是這樣，固然解決不了的bug，如果不影響用戶操做和很明顯的視覺效果，能夠先放下，畢竟一個項目的工期有限。
5. 優化
優化貫穿整個項目的開發和維護過程，時時刻刻都要想着怎樣能讓代碼更精簡，項目運行起來更輕便，加載更快。
5.1 代碼優化
代碼優化很重要，方便之後對項目的維護和重用，讓本身和他人看着都很賞心悅目。
• 相一樣式代碼合併
• 每一個頁面都有的部分能夠提出來，建個base.css
• 經常使用的結構或佈局樣式能夠提取出來，自定義樣式庫，方便之後用
• 經常使用的css3動畫效果能夠提出來，自定義動畫樣式庫
• 屢次重複的事情css作起來麻煩，js就幫個忙
5.2 語義化標籤
• html5標籤語義化很強，可經常使用 兼容ie8的方法在兼容部分提到了
• logo,產品名稱通常放到h1標籤中的a標籤裏，有助搜索引擎優化
5.3 項目總體優化
• 多個小圖標能夠用sprite圖,或fontIcon
• 引入的js文件較大，可用線上網址，更快，省資源
6. 壓縮
• gulp自動壓縮同步，用法 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壓縮 我的經常使用 http://tool.css-js.com
• 圖片壓縮 我的經常使用 https://tinypng.com
相關文章
- 1. day12
- 2. Day12
- 3. day12-nginx
- 4. Python Day12
- 5. day12【XML】
- 6. day12-day15集合
- 7. JAVA學習day12
- 8. 京淘day12
- 9. day12-迭代器
- 10. Linux基礎（day12）
- 更多相關文章...
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. day12
- 2. Day12
- 3. day12-nginx
- 4. Python Day12
- 5. day12【XML】
- 6. day12-day15集合
- 7. JAVA學習day12
- 8. 京淘day12
- 9. day12-迭代器
- 10. Linux基礎（day12）