亚洲第一AV网站,亚洲欧美中文日韩视频,在线播放亚洲精品

前端工程師如何提高設計的功力(三)基于JQuery的分層設計

對于大型的電子商務網站，復雜的業務表現邏輯，高要求的可用性，海量的產品數據，對于前端設計是一個很高的要求，這種高要求并不是說，我們能夠一步到位的作出非常完美的系統，使用戶非常滿意，雖然一個系統是從無到用的創建、運營者，但設計并不是想某些人所說的要有憑空想象復雜行為的能力，好的設計是無止境的，是在前面的基礎上不斷的Progressive Enhancement的。

要想在設計者的自我認知不斷加深，用戶的不斷成熟的反饋積累，下能夠對系統進行不斷的改進、提高，就必須一開始就要秉承良好的架構設計思想、風格，為以后的重構、改進打下堅實的基礎。

在一開始空手套白狼的時候，我們嚴格的分層，設計數據(Data)、結構(Strutcture)、行為(behaviour)、風格(style)，并絞盡腦汁的把要素粘連在一起，在隨后的網站運營過程中，我們大多數的情況下，可能會改變風格、行為，少數的情況下，我們可能去重構結構，或者改變后端的數據定義，可以看出，以后的改進是局部的，增強的，不斷提高交互能力和用戶體驗的。

如果要交系統的看設計，可以查看以前的文章：
前端工程師如何提高設計的功力(二) 之用戶是真理，不要自己意淫設計

前端工程師如何提高設計的功力(一)

Think in Jquery

比如當一個網站剛開始的時候，他的產品很少，分類目錄設計是這樣子的。
國美的設計

當網站規模不斷擴大，業務不斷成熟的時候，無論是設計者、使用者，都覺得不爽，覺得以前的設計很傻的時候，就需要進行改版，這種改版如果建立在良好的分層結構上，就容易進行，改版，系統也可以穩定的過渡到新的版本上。

京東的設計

以上圖為例，分層設計的步驟如下（最終的頁面效果, 可以查看Demo)：
1）設計原型

<div?class="left">

????????????<h2?id="h2_AllSort"><em><a?class="more_white"?href="allSort.aspx">全部分類</a></em><strong>商品分類</strong></h2>

????????????<div?id="AllSort">

????????????????<h3><a?href="electronic.aspx">家用電器</a></h3>

????????????????<dl?id="EFF_dl_0">

????????????????????<div?class="pop_wrap"?id="EFF_div_00"?><div?class="pop"><span><a?href="">洗衣機</a></span><span><a?href="">平板電視</a></span><span><a?href="">電熱水器</a></span><span><a?href="">家庭音響</a></span><span><a?href="">燃氣熱水器</a></span><span><a?href="">空調</a></span><span><a?href="">冰箱</a></span><span><a?href="">冷柜</a></span><span><a?href="">DVD/USB播放器</a></span><span><a?href="">電視附件</a></span></div></div>

????????????????????<dt?id="00"?class="">?????????????<span>?-?洗衣機??平板電視

</span>?????????????<a?href="">大?家?電</a></dt>

????????????????????

????????????????????<div?class="pop_wrap"?id="EFF_div_01"?><div?class="pop"><span><a?href="">吸塵器</a></span><span><a?href="">電熨斗</a></span><span><a?href="">飲水機</a></span><span><a?href="">取暖電器</a></span><span><a?href="">加濕器</a></span><span><a?href="">凈化器</a></span><span><a?href="">電動工具</a></span><span><a?href="">足浴盆</a></span><span><a?href="">電話機</a></span><span><a?href="">清潔機</a></span><span><a?href="">電風扇</a></span><span><a?href="">收錄/音機</a></span><span><a?href="">浴霸</a></span><span><a?href="">凈水設備</a></span><span><a?href="">其它生活電器</a></span></div></div>

????????????????????<dt?id="01"?class=""><span>?-?吸塵器??電熨斗

</span><a?href="">生活電器</a></dt>

????????????????????

????????????????????<div?class="pop_wrap"?id="EFF_div_02"?><div?class="pop"><span><a?href="">電飯煲</a></span><span><a?href="">電磁爐</a></span><span><a?href="">電壓力鍋</a></span><span><a?href="">電餅鐺</a></span><span><a?href="">榨汁/攪拌機</a></span><span><a?href="">豆漿機</a></span><span><a?href="">電水壺</a></span><span><a?href="">咖啡機</a></span><span><a?href="">微波爐</a></span><span><a?href="">電烤箱</a></span><span><a?href="">多用途鍋</a></span><span><a?href="">吸油煙機</a></span><span><a?href="">燃氣灶</a></span><span><a?href="">消毒柜</a></span><span><a?href="">洗碗機</a></span><span><a?href="">面包機</a></span><span><a?href="">果蔬解毒機</a></span><span><a?href="">煮蛋器</a></span><span><a?href="">酸奶機</a></span><span><a?href="">其它廚房電器</a></span></div></div>

????????????????????<dt?id="02"?class=""><span>?-?電飯煲??電磁爐

</span><a?href="">廚房電器</a></dt>

????????????????</dl>

????????????????

????????????????<div?class="viewall"><a?class="link_1"?href="special.aspx?id=5"?target="_blank">全部商品</a></div>

????????????</div>

????????????

</div>

2）提出數據，設計成模板（通過javascript 可以編譯模板，填充數據)
模板的語法參考JTemplate。

<div?class="left">

????????????<h2?id="h2_AllSort"><em><a?class="more_white"?href="allSort.aspx">全部分類</a></em><strong>商品分類</strong></h2>

????????????<div?id="AllSort">

????????????????<h3><a?href="{$T.url}">{$T.categoryName}</a></h3>

?????????????????

????????????????<dl?id="EFF_dl_0">

????????????????????{#foreach?$T.categories?as?category}

????????????????????????<div?class="pop_wrap"?id="EFF_div_00"?>

????????????????????????????<div?class="pop">

????????????????????????????????{#foreach?$T.category.children?as?child}?

????????????????????????????????????<span><a?href="{$T.child.url}?">{$T.child.name}</a></span>

????????????????????????????????{#/for}

????????????????????????????</div>

????????????????????????</div>

????????????????????????<dt?id="{$T.category.id}"?class="">?<span>?-?{$T.category.p1}??{$T.category.p2}

</span>?<a?href="">{$T.category.name}</a></dt>

????????????????????????

????????????????????{#/for}

????????????????</dl>

????????????????

????????????????<div?class="viewall"><a?class="link_1"?href="#"?target="_blank">全部商品</a></div>

????????????</div>

</div>

可以看出整個結構非常的清晰，自然。

3) 設計行為
???? 我們需要賦予目錄菜單的鼠標移動時的Dring Down 效果。

???? 使用Jquery的時候，操作DOM節點非常簡單。

??? 這個Javascript的代碼非常簡潔：
??? 1.讀取Json產品目錄數據
??? 2.讀取HTML模板
??? 3.將數據填充到模板中，并顯示
??? 4.通過Jquery，綁定菜單的move in, move out事件，顯示和隱藏自菜單.
????

/**?當鼠標移動時，顯示字菜單?*/

function?showSubCategory(){

????$("#AllSort?dt").hover(function(){

????????????$(this).addClass("curr");????????

????????????$(this).prev(".pop_wrap").show();

????},function(){

????????$(this).removeClass("curr");

????????$(this).prev(".pop_wrap").hide();

????});????

????$(".pop_wrap").hover(function(){

????????????$(this).show();

????????????$(this).next("dt").addClass("curr");

????},function(){

????????????$(this).hide();

????????????$(this).next("dt").removeClass("curr");

????});

}

/**?編譯并填充模板?*/

$.fn.fill?=?function(data){

???var?template_content?=?$(this).html();

???$(this).setTemplate(template_content);

???$(this).processTemplate(data);

}

/**?讀取數據文件，填充到模板結構中?*/

$(function(){

?$.getJSON("data.html",{},?

????????function(data){

??????????$("#AllSort").fill(data);

??????????showSubCategory();

????????}

?);

});

</script>

???? 總結：

??? 1）復雜的設計總是伴隨著臃腫的代碼、惡劣的用戶體驗、層出不窮的BUG.

??? 2)?? Javascript代碼越少，HTML結構越簡單，就越容易維護.

??? 3)? 交互設計，是在交互中，不斷重構提高的。

20人服務器合租600元/年(絕對保證)

posted on 2008-11-17 17:44 Speed 閱讀(4345) 評論(4) 編輯收藏所屬分類: 前端設計、JQuery

1. 如果簡單的設計不能完成，就只能使用復雜的設計。評判設計好壞的標準不是復雜與否，而是其是否恰到好處的滿足需求。
2. Javascript總比那些丑陋的標簽好，標簽是讓HTML看起來代碼少多了，但是其非標準性帶來的維護問題是一個黑洞。請不要給原本樸質的語言穿上一層層的馬甲。
3. 的確，交互設計是最異變的，所以在設計時，合理的分層至關重要。
回復更多評論

# re: 前端工程師如何提高設計的功力(三)基于JQuery的分層設計 2008-11-18 12:41 leekiang

1，復雜與否主要取決于需求。
在滿足需求的前提下，要使設計盡量簡單。
2，是否采用模板就見仁見智了。看本文的例子，如果不用JTemplate，那就只能用js編碼來生成，那樣比較丑陋。不知js模板里JTemplate是不是最好的，如果是，就把它當作標準用不就得了。回復更多評論

# re: 前端工程師如何提高設計的功力(三)基于JQuery的分層設計 2008-11-19 15:11 三人行，必有我師焉

簡單不一定方便擴展呀，必要的設計還是要有的。在必要的程度上，越簡單越好。回復更多評論

# re: 前端工程師如何提高設計的功力(三)基于JQuery的分層設計 2008-11-19 21:22 appur

國美？回復更多評論

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: GPS軟件平臺設計開發文章精華索引 GIS、GPS和視頻監控界面設計 JQuery1.3b的主要變化 JQuery的最佳實踐 JQuery Cheat sheet VS Prototype Cheat Sheet Javascript Widget之二基于EXT JS 的可重用的無限級聯下拉框再談Web前端工程師的定位前端工程師如何提高設計的功力(三)基于JQuery的分層設計前端工程師如何提高設計的功力(二) 之用戶是真理，不要自己意淫設計前端工程師如何提高設計的功力(一)

# re: 前端工程師如何提高設計的功力(三)基于JQuery的分層設計 2008-11-18 09:08 HiMagic!

# re: 前端工程師如何提高設計的功力(三)基于JQuery的分層設計 2008-11-18 12:41 leekiang

# re: 前端工程師如何提高設計的功力(三)基于JQuery的分層設計 2008-11-19 15:11 三人行，必有我師焉

# re: 前端工程師如何提高設計的功力(三)基于JQuery的分層設計 2008-11-19 21:22 appur

基于java技術開發符合jt808標準的GPS部標平臺（jt808協議、jt809協議、netty框架、springmvc框架)

前端工程師如何提高設計的功力(三)基于JQuery的分層設計

評論

導航

留言簿(15)

隨筆分類

值得一看的博客

積分與排名

最新評論

閱讀排行榜