技術(shù)很多，例子很多，只好慢慢學(xué)，慢慢實(shí)踐?。‖F(xiàn)在學(xué)的這本書是【JavaScript實(shí)戰(zhàn)----JavaScript、jQuery、HTML5、Node.js實(shí)例大全】
第 3 章 用 JavaScript 實(shí)現(xiàn)的照片展示
構(gòu)建軟件設(shè)計(jì)的方法有兩種：一種是把軟件做得很簡(jiǎn)單以至于明顯找不到缺陷；另一種是把它 做得很復(fù)雜以至于找不到明顯的缺陷。
——C.A.R.Hoare，1980 年圖靈獎(jiǎng)獲得者
在這個(gè)自拍自戀的時(shí)代，照片是要展示的。在前面的章節(jié)里已經(jīng)講解了事件的綁定，本章主要利用前面的知識(shí)做一個(gè)照片展示的功能。
本章主要內(nèi)容：
照片的加載
鼠標(biāo)的響應(yīng)
鍵盤的響應(yīng)
3.1 功能設(shè)計(jì)
功能設(shè)計(jì)的時(shí)候可能需要反復(fù)修改，以什么為標(biāo)準(zhǔn)呢？聽老板的還是聽用戶的？雖然這是一個(gè) 顧客是上帝的時(shí)代，但終究還是有些設(shè)計(jì)原則要遵循，因?yàn)橛袝r(shí)候“上帝”也會(huì)犯錯(cuò)誤，更多的時(shí)候“上帝”是善變的。
（1）避免重復(fù)原則（DRY，Don’t repeat yourself），編程的最基本原則是避免重復(fù)，另一句 話說叫提高代碼復(fù)用率。
（2）簡(jiǎn)單原則（Keep ItSimple and Stupid），簡(jiǎn)單是用戶最佳體驗(yàn)之一，像蘋果就是用簡(jiǎn)單 打敗一切。而且簡(jiǎn)單的代碼占用時(shí)間少，漏洞少，并且易于修改。
（3）低耦合原則（MinimizeCoupling），即這部分代碼的使用和修改影響到其他部分的代碼 盡可能的少，否則牽一發(fā)而動(dòng)全身的悲劇無人愿意看到。
（4）別讓我思考（Don’t make me think），代碼不僅是寫給機(jī)器的，更多是寫給人看的，所以編寫的代碼一定要易于讀易于理解，最終才易于維護(hù)?！叭绻粋€(gè)維護(hù)者不再繼續(xù)維護(hù)你的代碼，
很可能他是有想殺了你的沖動(dòng)?！?/p>
（5）單一責(zé)任原則（Single Responsibility Principle） ，某個(gè)代碼的功能，應(yīng)該保證只有單一的明確的執(zhí)行任務(wù)，否則一旦修改會(huì)增加關(guān)聯(lián)測(cè)試的繁瑣程度。
（6）大限度凝聚原則（Maximize Cohesion），盡量將功能相似相近的代碼放在同一個(gè)部分。
程序中常聽到的“類”這個(gè)詞就取之于“物以類聚”，類就是為了“類聚”相似相近的代碼。
（7）避免過早優(yōu)化（AvoidPremature Optimization），現(xiàn)在社會(huì)到處都有“完美主義者”，如 果代碼運(yùn)行沒有想象中的慢，就別去“完美”它，否則要花費(fèi)更多的代價(jià)，或時(shí)間的或精力的或金錢的。
3.1.1 HTML、CSS 和 JavaScript 的分層關(guān)系
通過第 1 章的了解，HTML 是最早出來的，CSS和 JavaScript則稍晚出現(xiàn)。它們實(shí)質(zhì)上的關(guān)系 應(yīng)該是如圖 3-1 所示。
圖 3-1 UI 分層關(guān)系結(jié)構(gòu)
看到這里似乎應(yīng)該思考下前面的范例是否有“重構(gòu)”的空間？答案是肯定的，筆者在寫到第 2章時(shí)，本書編輯就很有意見地說：“咋這個(gè)代碼這么長(zhǎng)呢？能不能拆分成幾塊呢？”。 重構(gòu)原因之一就是代碼是否便于閱讀。如果在設(shè)計(jì)時(shí)一開始就考慮進(jìn)去，這會(huì)使后期的維護(hù)工作變得相對(duì)便捷，找 HTML 代碼的就直接找 html 文件，找 JavaScript 代碼的就直接找 js 文件，找CSS 代碼的就直接找 css 文件。
將 JavaScript 和 HTML分離是前端必須要做的一種事。JavaScript 誕生是要讓 HTML 更豐富， 而不是更雜亂?；旌显谝黄饡?huì)導(dǎo)致：bug 跟蹤工具難以調(diào)試。隨著分工更細(xì)分，寫 HTML 的人不 一定要負(fù)責(zé)寫 JavaScript。 CSS 和 HTML 一般也是分離的，不過這大都是網(wǎng)頁設(shè)計(jì)師或者叫前端重構(gòu)工程師的任務(wù)了。 另外保持 CSS 和 JavaScript 之間清晰的分離是很有挑戰(zhàn)的，例如第 2 章的范例有控制 style.width的，還有控制 style.display 的，是否需要完全分離這確實(shí)需要具體情況具體分析，不過如果完全不注意這一點(diǎn)，任由其發(fā)展，一旦出現(xiàn)問題，大家首先去找 CSS，精疲力盡時(shí)才會(huì)去 JavaScript 中查 找樣式問題，這會(huì)給維護(hù)人員挖下很大一個(gè)坑，做人一定要厚道！
3.1.2 照片展示功能設(shè)計(jì)
163 是國內(nèi)早期提供相冊(cè)功能的公司之一，相冊(cè)用戶群體很大，參考其相冊(cè)會(huì)發(fā)現(xiàn)，照片展示 的基本功能如下：
有大圖和縮略圖
有上一張圖和下一張圖切換
有鍵盤控制顯示上一張圖和下一張圖
有顯示上一組和下一組功能在代碼方面，考慮代碼 3 層分離。
代碼方面，考慮代碼 3 層分離。
今天就先介紹到這里吧，有一起學(xué)習(xí)的小白們，歡迎粉我。
最具士兵突擊實(shí)戰(zhàn)類型的JavaScript
JavaScript實(shí)戰(zhàn)一書的基礎(chǔ)知識(shí)部分幫助讀者快速踏入JavaScript領(lǐng)域之門，jQuery部分幫助讀者隨心所欲地去工作，HTML5部分幫讀者搭上時(shí)代的班車，Node.JS則可以讓讀者屹立在技術(shù)的前沿。筆者的目的就是力求寫出最懂人性最懂技術(shù)的JavaScript書。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
