午夜在线a亚洲v天堂网2019,亚洲人成激情在线播放,亚洲熟妇无码八V在线播放

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

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

要想在設(shè)計(jì)者的自我認(rèn)知不斷加深，用戶的不斷成熟的反饋積累，下能夠?qū)ο到y(tǒng)進(jìn)行不斷的改進(jìn)、提高，就必須一開始就要秉承良好的架構(gòu)設(shè)計(jì)思想、風(fēng)格，為以后的重構(gòu)、改進(jìn)打下堅(jiān)實(shí)的基礎(chǔ)。

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

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

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

Think in Jquery

比如當(dāng)一個(gè)網(wǎng)站剛開始的時(shí)候，他的產(chǎn)品很少，分類目錄設(shè)計(jì)是這樣子的。
國美的設(shè)計(jì)

當(dāng)網(wǎng)站規(guī)模不斷擴(kuò)大，業(yè)務(wù)不斷成熟的時(shí)候，無論是設(shè)計(jì)者、使用者，都覺得不爽，覺得以前的設(shè)計(jì)很傻的時(shí)候，就需要進(jìn)行改版，這種改版如果建立在良好的分層結(jié)構(gòu)上，就容易進(jìn)行，改版，系統(tǒng)也可以穩(wěn)定的過渡到新的版本上。

京東的設(shè)計(jì)

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

<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="">洗衣機(jī)</a></span><span><a?href="">平板電視</a></span><span><a?href="">電熱水器</a></span><span><a?href="">家庭音響</a></span><span><a?href="">燃?xì)鉄崴?/span></a></span><span><a?href="">空調(diào)</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>?-?洗衣機(jī)??平板電視

</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="">飲水機(jī)</a></span><span><a?href="">取暖電器</a></span><span><a?href="">加濕器</a></span><span><a?href="">凈化器</a></span><span><a?href="">電動(dòng)工具</a></span><span><a?href="">足浴盆</a></span><span><a?href="">電話機(jī)</a></span><span><a?href="">清潔機(jī)</a></span><span><a?href="">電風(fēng)扇</a></span><span><a?href="">收錄/音機(jī)</a></span><span><a?href="">浴霸</a></span><span><a?href="">凈水設(shè)備</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="">榨汁/攪拌機(jī)</a></span><span><a?href="">豆?jié){機(jī)</a></span><span><a?href="">電水壺</a></span><span><a?href="">咖啡機(jī)</a></span><span><a?href="">微波爐</a></span><span><a?href="">電烤箱</a></span><span><a?href="">多用途鍋</a></span><span><a?href="">吸油煙機(jī)</a></span><span><a?href="">燃?xì)庠?/span></a></span><span><a?href="">消毒柜</a></span><span><a?href="">洗碗機(jī)</a></span><span><a?href="">面包機(jī)</a></span><span><a?href="">果蔬解毒機(jī)</a></span><span><a?href="">煮蛋器</a></span><span><a?href="">酸奶機(jī)</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）提出數(shù)據(jù)，設(shè)計(jì)成模板（通過javascript 可以編譯模板，填充數(shù)據(jù))
模板的語法參考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>

可以看出整個(gè)結(jié)構(gòu)非常的清晰，自然。

3) 設(shè)計(jì)行為
???? 我們需要賦予目錄菜單的鼠標(biāo)移動(dòng)時(shí)的Dring Down 效果。

???? 使用Jquery的時(shí)候，操作DOM節(jié)點(diǎn)非常簡單。

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

/**?當(dāng)鼠標(biāo)移動(dòng)時(shí)，顯示字菜單?*/

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

}

/**?讀取數(shù)據(jù)文件，填充到模板結(jié)構(gòu)中?*/

$(function(){

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

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

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

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

????????}

?);

});

</script>

???? 總結(jié)：

??? 1）復(fù)雜的設(shè)計(jì)總是伴隨著臃腫的代碼、惡劣的用戶體驗(yàn)、層出不窮的BUG.

??? 2)?? Javascript代碼越少，HTML結(jié)構(gòu)越簡單，就越容易維護(hù).

??? 3)? 交互設(shè)計(jì)，是在交互中，不斷重構(gòu)提高的。

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

posted on 2008-11-17 17:44 Speed 閱讀(4343) 評(píng)論(4) 編輯收藏所屬分類: 前端設(shè)計(jì) 、JQuery

評(píng)論

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

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

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

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

# re: 前端工程師如何提高設(shè)計(jì)的功力(三)基于JQuery的分層設(shè)計(jì) 2008-11-19 15:11 三人行，必有我?guī)熝?/a>

簡單不一定方便擴(kuò)展呀，必要的設(shè)計(jì)還是要有的。在必要的程度上，越簡單越好。回復(fù) 更多評(píng)論

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

國美？回復(fù) 更多評(píng)論

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




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

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

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

# re: 前端工程師如何提高設(shè)計(jì)的功力(三)基于JQuery的分層設(shè)計(jì) 2008-11-19 15:11 三人行，必有我?guī)熝?/a>

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

基于java技術(shù)開發(fā)符合jt808標(biāo)準(zhǔn)的GPS部標(biāo)平臺(tái)（jt808協(xié)議、jt809協(xié)議、netty框架、springmvc框架)

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

評(píng)論

導(dǎo)航

留言簿(15)

隨筆分類

值得一看的博客

積分與排名

最新評(píng)論

閱讀排行榜