『飞秋』小项目心得交流
『飛秋』小項(xiàng)目心得交流
<!--[endif]-->
最近網(wǎng)站首頁(yè)改版，我負(fù)責(zé)前臺(tái)頁(yè)面的編寫，一個(gè)很小的任務(wù)，從中我卻學(xué)習(xí)到了很多東西，現(xiàn)總結(jié)一下
和大家分享一下，希望對(duì)大家有用，也希望能得到進(jìn)一步的提高。
<!--[endif]-->
總結(jié)index:
1.?????? 本次首頁(yè)改版前期的策劃還算細(xì)致完整
2.?????? 美工、前臺(tái)、后臺(tái)大家分工合作其樂融融*美工和前臺(tái)是十分密切的，美工的人要懂前臺(tái)，前臺(tái)的人要了解美工，這是必須要做到的
3.?????? 兼容是王道，但是為了兼容不能不擇手段
4.?????? 合理利用庫(kù)和框架，提高編碼的效率
5.?????? 代碼問題匯總
?
index擴(kuò)展:
?
<!--[endif]-->
一．策劃是重頭戲
1.?????? 一個(gè)項(xiàng)目的進(jìn)行沒有一個(gè)完整的細(xì)致的規(guī)劃是不可能順利的實(shí)現(xiàn)的，一個(gè)網(wǎng)站后期的運(yùn)營(yíng)與前期的實(shí)現(xiàn)是密不可分的。
2.?????? 好的策劃對(duì)于編碼的實(shí)現(xiàn)和日后的維護(hù)以及功能拓展等方面都是至關(guān)重要的。
那么怎么寫好一份策劃呢？對(duì)于此本人鐵拐李也不是很在行，希望有強(qiáng)勢(shì)的能夠積極加入進(jìn)行支援。
我只說(shuō)說(shuō)自己的想法（只做參考與改正的對(duì)象）：
1.?????? 首先你要明確為什么要改版。是頁(yè)面風(fēng)格不美觀還是網(wǎng)站性能欠缺還是雙方面的問題，如果問題過多那可以改名字叫網(wǎng)站重建了。
2.?????? 要對(duì)癥下藥，針對(duì)你改版的側(cè)重點(diǎn)來(lái)實(shí)行有效的措施。比如網(wǎng)站是因?yàn)轫?yè)面架構(gòu)要升級(jí)而改版，那么我們的側(cè)重點(diǎn)就要放在美工上，做出一個(gè)符合改版要求的設(shè)計(jì)圖，如果是性能上要改版，那么側(cè)重點(diǎn)要放在代碼的規(guī)范上。
3.?????? 功能想的全一些，為日后維護(hù)鋪好路。
二．分工要明確，合作要密切
網(wǎng)站的建設(shè)絕對(duì)不是一個(gè)人可以搞定的事情，所以明確的分工很重要，俗話說(shuō)“術(shù)業(yè)有專攻”幾個(gè)更好和起來(lái)可能就是“最好”了。但是分工不代表分開工作，其實(shí)大家是緊密聯(lián)系的，只有密切的合作才能是開發(fā)進(jìn)行的更為順利。比如前臺(tái)與美工的關(guān)系，美工的出圖要規(guī)范，要利于代碼的書寫，不能“想當(dāng)然”的去進(jìn)行藝術(shù)創(chuàng)作，那么前臺(tái)要明白美工的設(shè)計(jì)思想與意圖，只有兩人的設(shè)計(jì)思路統(tǒng)一了開發(fā)才會(huì)事半功倍，我們本次改版的時(shí)候就出現(xiàn)了類似的問題：美工不知道png圖片在IE6下是不會(huì)透明的（需要修復(fù)），但是修復(fù)的效果不好，導(dǎo)致后期代碼書寫成了問題，后來(lái)就是因?yàn)檫@個(gè)地方浪費(fèi)了很多時(shí)間。還有就是我作為一個(gè)前臺(tái)開發(fā)者沒有很好的理解美工的意圖，導(dǎo)航的地方美工的意圖是width：100%，而我理解成了固定寬度，于是又是糾結(jié)了一下，浪費(fèi)了時(shí)間。所以：交流、合作是至關(guān)重要的
三．如何兼容？
作為一個(gè)前臺(tái)的開發(fā)者，大家可能一直深受各種瀏覽器的“摧殘”，為了保證兼容往往要采取一些措施，js修復(fù)、hacks等等各種手段一擁而上，最后只能說(shuō)是效果實(shí)現(xiàn)了。書寫要規(guī)范，這句話說(shuō)起來(lái)輕飄飄，做起來(lái)十分的艱難，有得問題是你無(wú)法預(yù)料的，除非你已經(jīng)足夠的老道。想要三列高度一樣怎么辦？js修復(fù)？還是采用什么等高度自適應(yīng)hack？簡(jiǎn)單一點(diǎn)吧，來(lái)個(gè)固定高度吧。
四．合理使用js庫(kù)，提高了效率，增強(qiáng)了兼容性。
本次開發(fā)我第一次正式的使用jQuery，感覺用起來(lái)非常的方便，省了很多麻煩，也不必為某些兼容問題去苦惱了。不過初學(xué)還是用純js的好，畢竟要學(xué)好一門語(yǔ)言，光學(xué)API
是不行的。
? <!--[endif]-->
五．代碼問題1兩說(shuō)：
1.?????? 如何讓父元素透明而子元素不透明呢？
效果預(yù)覽：
? 可能你會(huì)這樣做：
<!--[endif]-->
<!--[endif]-->
?
?
?1 <body>
?2 <div id="box">
?3???? <div id="imgBox">
?4 <img src="首頁(yè)項(xiàng)目（新精簡(jiǎn)）/images/ad2.png" />
?5???????? <div id="text">//背景透明
?6???????????????? //下面的文字域不透明
?7???????????? <h4>標(biāo)題</h4>
?8???????????? <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容、。。</p>
?9???????? </div>
10???? </div>
11 </div>
12 </body>
?? css:
?1 <style type="text/css">
?2 #box {
?3???? width:500px;
?4???? margin:200px auto;
?5 }
?6 #imgBox {
?7???? position:relative;
?8???? width:212px;
?9???? height:225px;
10 }
11 #text {
12???? position:absolute;
13???? top:0;
14???? right:0;
15???? width:100px;
16???? height:100%;
17???? color:#FFF;
18???? background-color:#000;
19???? opacity:.5;
20???? filter:alpha(opacity=50);
21 }
22 #text h4, #text p {
23???? opacity:1;
24???? filter:alpha(opacity=100);
25???? background:none;
26 }
27 </style>
<!--[endif]-->
?
運(yùn)行一下，似乎沒有達(dá)到預(yù)期的效果。。。怎么回事呢？看來(lái)作為#text的子元素是難逃被“透明”的厄運(yùn)了，既然如此我們變一下：
Html：
?
?1 <body>
?2 <div id="box">
?3???? <div id="imgBox">//z-index:1
?4 <img src="首頁(yè)項(xiàng)目（新精簡(jiǎn)）/images/ad2.png" />
?5???????? <div id="text">//z-index:3
?6???????????? <h4>標(biāo)題</h4>
?7???????????? <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容、。。</p>
?8???????? </div>
?9???????? <div id="textInner"></div>//背景層放到#text外邊，與他是兄弟關(guān)系，彼此互不影響,z-index:2
10???? </div>
11 </div>
12 </body>
?? css:
?1 <style type="text/css">
?2 #box {
?3???? width:500px;
?4???? margin:200px auto;
?5 }
?6 #imgBox {
?7???? position:relative;
?8???? width:212px;
?9???? height:225px;
10???? z-index:1;
11 }
12 #text {
13???? position:absolute;
14???? top:0;
15???? right:0;
16???? width:100px;
17???? height:100%;
18???? color:#FFF;
19???? z-index:3;
20 }
21 #textInner? {
22???? position:absolute;
23???? top:0;
24???? right:0;
25???? width:100px;
26???? height:100%;
27???? background-color:#000;
28???? opacity:.5;
29???? filter:alpha(opacity=50);
30???? z-index:2;
31 }
32 </style>
<!--[endif]-->
2.?????? ***提升性能
雅虎的14條準(zhǔn)則相信大家都聽說(shuō)過，這也是提升一個(gè)網(wǎng)站性能的關(guān)鍵，平時(shí)要注意這些細(xì)節(jié)。感謝king！前輩在我做項(xiàng)目時(shí)給我的指點(diǎn)與幫助。
?
飛秋官網(wǎng)：http://www.freeeim.com/
總結(jié)
以上是生活随笔為你收集整理的『飞秋』小项目心得交流的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： .NET平台常用的开发组件
- 下一篇： 快速WinForm开发