如今開(kāi)發(fā)者有很多種途徑去解決編程問(wèn)題，不管是利用大量的類(lèi)庫(kù)還是各種各樣的技術(shù)工具。當(dāng)然了，隨便選擇一些錯(cuò)誤的工具導(dǎo)致的代碼錯(cuò)誤也是工作里最頭疼的事情。另外總結(jié)出，不了解工具與工具之間、語(yǔ)言與語(yǔ)言之間的界限所帶來(lái)的風(fēng)險(xiǎn)和選錯(cuò)工具帶來(lái)的風(fēng)險(xiǎn)是一樣的。下面這幾個(gè)常用的構(gòu)建Web App的工具，每一個(gè)都有特定的使用目的。

HTML：為編寫(xiě)的內(nèi)容提供語(yǔ)義標(biāo)記。

CSS：將設(shè)計(jì)風(fēng)格從標(biāo)記里區(qū)分出來(lái)。 

JavaScript：提供表現(xiàn)行為。

Server-side Languages：管理商業(yè)邏輯。

SQL：對(duì)RDBMS數(shù)據(jù)存取和數(shù)據(jù)操作有很大的幫助。

下面就來(lái)分析一下不同的技術(shù)之間存在哪些界限和互動(dòng)點(diǎn)，以及它們是怎樣給開(kāi)發(fā)者在工作當(dāng)中制造麻煩的。

HTML和JavaScript之間的界限

盡量避免將HTML放入JavaScript字符串里，不然出現(xiàn)的結(jié)果可能會(huì)像這樣： 

值得注意的是，如何在for循環(huán)語(yǔ)句下面生成一個(gè)HTML行，然后設(shè)置成一個(gè)稱之為carRow的變量。將HTML放入JavaScript字符串里，這樣就能更靈活的將HTLM插入在網(wǎng)頁(yè)上，但應(yīng)該標(biāo)記為本地 HTML。當(dāng)選擇一個(gè)模板解決方案的時(shí)候，需要尋找一個(gè)簡(jiǎn)單的、較舊的HTML作為模板來(lái)源。KnockoutJS和AngularJS模板都是使用這一方法的。

如果你想把HTML儲(chǔ)存在.js文件里的話，必須三思而后行，因?yàn)?/span>JavaScript是典型的用來(lái)儲(chǔ)存標(biāo)記的錯(cuò)誤工具——也就是說(shuō)，保持本土化沒(méi)什么意義可言了（代碼顏色、語(yǔ)法檢查等等）。

另一方面，避免將復(fù)雜的JavaScript放在HTML里的DOM基礎(chǔ)上： 

有的人直接把JavaScript放在HTML里面，但是這種通過(guò)直接插入行為到標(biāo)記里的方法使得問(wèn)題變得更為混淆，同時(shí)還消除了緩存和重復(fù)使用的機(jī)會(huì)。

這種低調(diào)的JavaScript行為的確降低了上述的問(wèn)題出現(xiàn)幾率，但是新的框架像Knockout和Angular是可以將JavaScript推到HTML標(biāo)記里的。不過(guò)在HTML里簡(jiǎn)單聲明一下標(biāo)記還是有好處的，因?yàn)楫?dāng)綁定比較簡(jiǎn)單的時(shí)候標(biāo)記很容易被發(fā)現(xiàn)，并具有可讀性。但要小心，涉及到很多簡(jiǎn)單聲明綁定的時(shí)候，JavaScript屬于.js文件，HTML屬于.html文件。

HTML和SQL之間的界限 

這里有兩個(gè)簡(jiǎn)單的案例：忽略了數(shù)據(jù)和HTML之間的重要界限所導(dǎo)致的現(xiàn)象。 

關(guān)系型數(shù)據(jù)庫(kù)應(yīng)該包含原始規(guī)范化數(shù)據(jù)，這樣的數(shù)據(jù)也是多用途的。因此，存儲(chǔ)HTML在DB或注入HTML在查詢結(jié)果里，如上所示都是有問(wèn)題的。它將整個(gè)演示和數(shù)據(jù)存儲(chǔ)在一起使得重復(fù)使用變得很困難。

內(nèi)容管理系統(tǒng)是一個(gè)常見(jiàn)的問(wèn)題，在這里用戶必須能夠存儲(chǔ)和管理在數(shù)據(jù)庫(kù)里的HTML。就相當(dāng)于利用數(shù)據(jù)重復(fù)使用和數(shù)據(jù)規(guī)范化來(lái)?yè)Q取最終用戶管理權(quán)。除此之外，應(yīng)該最大限度的避免混合表示和混合數(shù)據(jù)，因?yàn)樗鼈儠?huì)分離關(guān)注點(diǎn)，必須第一時(shí)間處理掉。

HTML和CSS之間的界限

HTML和CSS 之間的“過(guò)結(jié)”相對(duì)簡(jiǎn)單，只要避免做這樣的事就行了：

人們經(jīng)常將設(shè)計(jì)風(fēng)格放入線上的HTML里，但是這樣會(huì)把語(yǔ)義標(biāo)記和風(fēng)格搞混淆。分離關(guān)注點(diǎn)的同時(shí)還消除了緩存和重復(fù)使用CSS的機(jī)會(huì)。DRY原理在這里比較適用：如果你想把一個(gè)風(fēng)格使用在多個(gè)點(diǎn)上，那就需要事先聲明這個(gè)風(fēng)格是在一個(gè)單獨(dú)的樣式表里的。

SQL和Server-side Language之間的界限

利用一個(gè)服務(wù)器端語(yǔ)言來(lái)創(chuàng)建高層次的動(dòng)態(tài)SQL是很容易的，就像使用C#字符串生成SQL語(yǔ)句一樣簡(jiǎn)單，但是存儲(chǔ)的程序和ORM通常會(huì)提供一個(gè)更安全、更優(yōu)雅的方法來(lái)生成動(dòng)態(tài)的SQL。編寫(xiě)動(dòng)態(tài)SQL字符串的同時(shí)也打開(kāi)了通往“SQL資料隱碼攻擊漏洞”的大門(mén)，并且取消了DBA管理和提高查詢性能的機(jī)會(huì)。含有SQL字符串的App在運(yùn)行時(shí)也存在很高的風(fēng)險(xiǎn)，尤其是當(dāng)模式發(fā)生變化的時(shí)候。ORM向數(shù)據(jù)庫(kù)提供增強(qiáng)型的類(lèi)型接口，可是當(dāng)模式不能夠和現(xiàn)有的數(shù)據(jù)庫(kù)查詢同步的時(shí)候，這些數(shù)據(jù)庫(kù)就無(wú)法編譯了。

JavaScript和Server-side Language之間的界限

在服務(wù)器上編寫(xiě)動(dòng)態(tài)JavaScript字符串，會(huì)出現(xiàn)這樣的情況： 

這是誤用工具所出現(xiàn)的最常見(jiàn)的現(xiàn)象：使用一個(gè)Server-side Language生成動(dòng)態(tài)的JavaScript，大多數(shù)情況下JavaScript應(yīng)該保留在.js文件里，從服務(wù)器里返還出來(lái)的JSON可以提供更多的活力。

所以在你很投入的寫(xiě)出下一行代碼的時(shí)候，最好考慮一下你離這些編程語(yǔ)言的邊界是不是很近？或者說(shuō)靠哪一邊更近？熱愛(ài)清潔代碼的程序員應(yīng)該努力保持本地化：文件擴(kuò)展名在技術(shù)方面應(yīng)該是一個(gè)很好的指示器。

保持本地化

本地化的重要性不只是針對(duì)于JavaScript，當(dāng)你發(fā)現(xiàn)在保持本地化的同時(shí)沒(méi)什么取舍可選的時(shí)候，你只能和字符串較勁了。不過(guò)這其中的底線是，避免通過(guò)字符串把一種編程語(yǔ)言編寫(xiě)在另一種編程語(yǔ)言或者是格式里。不過(guò)目前在比較流行的編程語(yǔ)言里，解決這樣的問(wèn)題首先要考慮到動(dòng)態(tài)化，并利用類(lèi)庫(kù)來(lái)生成這樣的編程格式。要想通過(guò)字符串創(chuàng)造這么多東西就需要程序員同時(shí)理解兩種語(yǔ)言之間的界限。所以，一旦你發(fā)現(xiàn)一個(gè)文件里有兩種編程語(yǔ)言的話，最好先考慮如何使用更好的、更特殊的方法去消除其中的一個(gè)編程語(yǔ)言。

河南億恩科技股份有限公司(www.beingsafe.com.cn)始創(chuàng)于2000年，專注服務(wù)器托管租用，是國(guó)家工信部認(rèn)定的綜合電信服務(wù)運(yùn)營(yíng)商。億恩為近五十萬(wàn)的用戶提供服務(wù)器托管、服務(wù)器租用、機(jī)柜租用、云服務(wù)器、網(wǎng)站建設(shè)、網(wǎng)站托管等網(wǎng)絡(luò)基礎(chǔ)服務(wù)，另有網(wǎng)總管、名片俠網(wǎng)絡(luò)推廣服務(wù)，使得客戶不斷的獲得更大的收益。
服務(wù)器/云主機(jī) 24小時(shí)售后服務(wù)電話：0371-60135900
虛擬主機(jī)/智能建站 24小時(shí)售后服務(wù)電話：0371-55621053
網(wǎng)絡(luò)版權(quán)侵權(quán)舉報(bào)電話：0371-60135995
服務(wù)熱線：0371-60135900