JavaScript、jQuery、HTML5、Node.

技術很多，例子很多，只好慢慢學，慢慢實踐！！現在學的這本書是【JavaScript實戰----JavaScript、jQuery、HTML5、Node.js實例大全】

第 3 章 用 JavaScript 實現的照片展示

構建軟件設計的方法有兩種：一種是把軟件做得很簡單以至于明顯找不到缺陷；另一種是把它 做得很復雜以至于找不到明顯的缺陷。

——C.A.R.Hoare，1980 年圖靈獎獲得者

在這個自拍自戀的時代，照片是要展示的。在前面的章節里已經講解了事件的綁定，本章主要利用前面的知識做一個照片展示的功能。 

本章主要內容：

•   照片的加載

•   鼠標的響應

•   鍵盤的響應

  3.1  功能設計

 功能設計的時候可能需要反復修改，以什么為標準呢？聽老板的還是聽用戶的？雖然這是一個 顧客是上帝的時代，但終究還是有些設計原則要遵循，因為有時候“上帝”也會犯錯誤，更多的時候“上帝”是善變的。

（1）避免重復原則（DRY，Don’t repeat yourself），編程的最基本原則是避免重復，另一句 話說叫提高代碼復用率。

（2）簡單原則（Keep ItSimple and Stupid），簡單是用戶最佳體驗之一，像蘋果就是用簡單 打敗一切。而且簡單的代碼占用時間少，漏洞少，并且易于修改。

（3）低耦合原則（MinimizeCoupling），即這部分代碼的使用和修改影響到其他部分的代碼 盡可能的少，否則牽一發而動全身的悲劇無人愿意看到。

（4）別讓我思考（Don’t make me think），代碼不僅是寫給機器的，更多是寫給人看的，所以編寫的代碼一定要易于讀易于理解，最終才易于維護。“如果一個維護者不再繼續維護你的代碼，

很可能他是有想殺了你的沖動。”

（5）單一責任原則（Single Responsibility Principle） ，某個代碼的功能，應該保證只有單一的明確的執行任務，否則一旦修改會增加關聯測試的繁瑣程度。

（6）最大限度凝聚原則（Maximize Cohesion），盡量將功能相似相近的代碼放在同一個部分。

程序中常聽到的“類”這個詞就取之于“物以類聚”，類就是為了“類聚”相似相近的代碼。

（7）避免過早優化（AvoidPremature Optimization），現在社會到處都有“完美主義者”，如 果代碼運行沒有想象中的慢，就別去“完美”它，否則要花費更多的代價，或時間的或精力的或金錢的。

3.1.1 HTML、CSS 和 JavaScript 的分層關系

通過第 1 章的了解，HTML 是最早出來的，CSS和 JavaScript則稍晚出現。它們實質上的關系 應該是如圖 3-1 所示。

圖 3-1 UI 分層關系結構

    看到這里似乎應該思考下前面的范例是否有“重構”的空間？答案是肯定的，筆者在寫到第 2章時，本書編輯就很有意見地說：“咋這個代碼這么長呢？能不能拆分成幾塊呢？”。 重構原因之一就是代碼是否便于閱讀。如果在設計時一開始就考慮進去，這會使后期的維護工作變得相對便捷，找 HTML 代碼的就直接找 html 文件，找 JavaScript 代碼的就直接找 js 文件，找CSS 代碼的就直接找 css 文件。

    將 JavaScript 和 HTML分離是前端必須要做的一種事。JavaScript 誕生是要讓 HTML 更豐富， 而不是更雜亂。混合在一起會導致：bug 跟蹤工具難以調試。隨著分工更細分，寫 HTML 的人不 一定要負責寫 JavaScript。 CSS 和 HTML 一般也是分離的，不過這大都是網頁設計師或者叫前端重構工程師的任務了。 另外保持 CSS 和 JavaScript 之間清晰的分離是很有挑戰的，例如第 2 章的范例有控制 style.width的，還有控制 style.display 的，是否需要完全分離這確實需要具體情況具體分析，不過如果完全不注意這一點，任由其發展，一旦出現問題，大家首先去找 CSS，精疲力盡時才會去 JavaScript 中查 找樣式問題，這會給維護人員挖下很大一個坑，做人一定要厚道！

3.1.2 照片展示功能設計

163 是國內早期提供相冊功能的公司之一，相冊用戶群體很大，參考其相冊會發現，照片展示 的基本功能如下：

•  有大圖和縮略圖

•  有上一張圖和下一張圖切換

•  有鍵盤控制顯示上一張圖和下一張圖

•  有顯示上一組和下一組功能在代碼方面，考慮代碼 3 層分離。

代碼方面，考慮代碼 3 層分離。

今天就先介紹到這里吧，有一起學習的小白們，歡迎粉我。

最具士兵突擊實戰類型的JavaScript

JavaScript實戰一書的基礎知識部分幫助讀者快速踏入JavaScript領域之門，jQuery部分幫助讀者隨心所欲地去工作，HTML5部分幫讀者搭上時代的班車，Node.JS則可以讓讀者屹立在技術的前沿。筆者的目的就是力求寫出最懂人性最懂技術的JavaScript書。