關(guān)于系統(tǒng)前端開發(fā)的那些事_html/css_WEB-ITnose

總結(jié)的不是很多，還有待完善，歡迎補(bǔ)充……

問題1：開發(fā)前端有時(shí)會(huì)遇到標(biāo)簽中的src屬性值為空，或者src屬性值存在，但是服務(wù)器端得圖片被干掉了，這樣就會(huì)導(dǎo)致2種影響頁面執(zhí)行的問題的誕生，

（1）、值為空的情況，導(dǎo)致了頁面的重新加載，所有的請(qǐng)求被重新執(zhí)行一次，大大降低頁面加載速度；

（2）、此圖片因?yàn)榉?wù)器的誤操作等原因?qū)е铝藞D片丟失，瀏覽器F12查看圖片Url后顯示圖片Url加載失敗，瀏覽器報(bào)錯(cuò)，嚴(yán)重的話直接阻塞了UI線程；

對(duì)于以上2種情況，個(gè)人的建議是在調(diào)用圖片的地方加上空值判斷和默認(rèn)圖展示，標(biāo)簽可以加上onerror屬性重新定位到加載失敗后的默認(rèn)圖片，使用onerror的時(shí)候如果指定的默認(rèn)圖也丟失的話，

瀏覽器會(huì)循環(huán)查找指定路徑的默認(rèn)圖，直到找到該默認(rèn)圖為止，可以使用以下代碼段來阻止onerror屬性的循環(huán),也可以JS設(shè)置this.onerror屬性為null。

問題2：對(duì)于頁面上的金錢符號(hào)處理，一般大多采用 ¥ 符號(hào)來做渲染，但是目前發(fā)現(xiàn)的問題是，采用¥符號(hào)，在一些低版本內(nèi)核的瀏覽器中會(huì)出現(xiàn)兼容問題（顯示不全、不顯示），此情況出現(xiàn)的頻率不是很高

建議對(duì)于頁面上金錢符號(hào)的處理，可以采用字符編碼或者特殊符號(hào)的形式展示,防止瀏覽器兼容帶來的影響。

使用 ￥ 2.css設(shè)置字體屬性 font-family:Arial; 或者在網(wǎng)頁使用 ¥ 符號(hào), 個(gè)人還是推薦用第二種方式顯示，為什么？請(qǐng)看看JD、taobao。

問題3：對(duì)于頁面中事件的監(jiān)聽和綁定，一般都是采用html代碼與Js代碼分離的方式，但是也不排除在html標(biāo)簽中直接綁定事件的現(xiàn)象，這樣的做法看似確實(shí)方便了許多，但是隨之也會(huì)帶來一些問題

（1）、Js負(fù)責(zé)行為層，而html負(fù)責(zé)結(jié)構(gòu)層，將2者混合在一塊不符合前端架構(gòu)設(shè)計(jì)思想；

（2）、Js寫在內(nèi)部不利于后期的維護(hù)，增加維護(hù)成本，無法進(jìn)行迭代開發(fā)和功能擴(kuò)展；

（3）、過多的Js操作寫在Html結(jié)構(gòu)中，會(huì)阻礙DOM樹的加載，影響用戶體驗(yàn)；

（4）、外部Js更方便壓縮，合并請(qǐng)求和減少帶寬的占用（按照規(guī)范編寫）。

相比Js寫在html中，外部Js僅僅是需要建立多次Htpp連接，優(yōu)化http首部困難，但是對(duì)于壓縮后所帶來性能上的提升是利大于弊的。

------------------------------------------------------------------------------------------------------------------------------我是華麗的分割線-------------------------------------------------------------------------------------------------------------------------------------------------------

接下來在扯一扯webapi的那些事吧 ￣□￣｜｜

最近在用webapi的時(shí)候，通過單元測(cè)試調(diào)試webapi后發(fā)現(xiàn)不少問題，現(xiàn)做以下匯總和解決方案分享：

1.webapi有4種資源調(diào)度方式分別對(duì)應(yīng)著數(shù)據(jù)庫的CURD,自動(dòng)匹配所有的GetXXX或者PostXXX的函數(shù)

webapi調(diào)度 數(shù)據(jù)庫操作

GetAsync--------->select

PostAsync-------->Insert

PutAsync---------->Update

DeleteAsync------->Delete

說下post和put區(qū)別吧：項(xiàng)目中用post和put方式調(diào)度，其實(shí)都能實(shí)現(xiàn)同樣的功能，但是put后返回的結(jié)果是單條的，而post返回的結(jié)果是多條的，結(jié)合到數(shù)據(jù)庫的執(zhí)行update和add后

返回的受影響行數(shù)，應(yīng)該就很容易理解了吧； 8-|

2.如果創(chuàng)建人的api項(xiàng)目是2.0的話，默認(rèn)自帶的一些高版本的dll版本（系列化等）會(huì)引發(fā)程序在Gload.cs的異常，版本匹配不上，

這個(gè)不多說，本人已遇到，解決方式就是更換低版本的dll引用，dll文件統(tǒng)一管理咯；

3.大家在做post提交請(qǐng)求的時(shí)候，遇到需要傳參的時(shí)候，參數(shù)較多會(huì)封裝成實(shí)體，那么參數(shù)較少的情況可能就會(huì)挨個(gè)傳參（不走url），看似沒有問題,建立連接后會(huì)出現(xiàn)未將對(duì)象引用問題，

經(jīng)調(diào)試發(fā)現(xiàn)雖然api通道能走通，但是參數(shù)獲取未nul，檢查地址發(fā)現(xiàn)沒問題后還是獲取null，取網(wǎng)上找了下，發(fā)現(xiàn)官方建議在傳參時(shí)在前面打上【Frombody】標(biāo)記就可以了，這樣就會(huì)告訴

api要從請(qǐng)求體重獲取data數(shù)據(jù)（只能存在一個(gè)【Frombody】）,加上后就可以繼續(xù)玩耍了-。-；

Ps:[Frombody]如果按照鍵值的形式傳參會(huì)獲取不到值，所以清空data數(shù)據(jù)中的鍵只傳value就可以啦（具體為什么還沒想清楚，有了解的童鞋望告知*.*）；

4.項(xiàng)目中post基本上可以代替增刪改操作了，默認(rèn)訪問Put、Delete調(diào)度會(huì)出現(xiàn)狀態(tài)值為405的異常，如果需要用到PutAsync、DeleteAsync的童鞋需要在配置文件中加上這一段：

或者移除IIS中的ＷebDAV Publishing服務(wù)即可。

參考鏈接：

http://www.dotblogs.com.tw/mantou1201/archive/2013/10/14/124074.aspx --api學(xué)習(xí)

http://www.liaodihen.com/Article/20140513061934963362.html --Frombody解釋

http://www.dotblogs.com.tw/mantou1201/archive/2013/10/14/124074.aspx --WebDav服務(wù)移除

如有不對(duì)或缺少，請(qǐng)補(bǔ)充！ 8-|

2015年12月05日補(bǔ)充：

1.鑒于之前說到對(duì)圖片的手動(dòng)處理方式，今天在組項(xiàng)目的時(shí)候，發(fā)現(xiàn)還不是很完美，目前也沒想到更好的辦法，出現(xiàn)的問題是項(xiàng)目需求問題，如果調(diào)用了onerror屬性后，圖片在加載失敗的條件下觸發(fā)了這個(gè)事件，但是如果需要用

瀏覽器的F12查看原先加載失敗的url地址就沒法查看了（src被重寫），所以這個(gè)方法還是根據(jù)項(xiàng)目的實(shí)際情況使用吧。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com