Jquery中文網 www.4271936.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記1

JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記1

發布時間:2016-09-18   編輯:www.4271936.live
jquery中文網為您提供JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記1等資源,歡迎您收藏本站,我們將為您提供最新的JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記1資源

技術很多,例子很多,只好慢慢學,慢慢實踐??!現在學的這本書是《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),代碼不僅是寫給機器的,更多是寫給人看的,所以編寫的代碼一定要易于讀易于理解,最終才易于維護?!叭绻粋€維護者不再繼續維護你的代碼,

很可能他是有想殺了你的沖動?!?/p>

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

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

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

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

3.1.1 HTML、CSS 和 JavaScript 的分層關系

通過第 1 章的了解,HTML 是最早出來的,CSS和 JavaScript則稍晚出現。它們實質上的關系 應該是如圖 3-1 所示。
JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記1
圖 3-1 UI 分層關系結構

看到這里似乎應該思考下前面的范例是否有“重構”的空間?答案是肯定的,筆者在寫到第 2章時,本書編輯就很有意見地說:“咋這個代碼這么長呢?能不能拆分成幾塊呢???”。 重構原因之一就是代碼是否便于閱讀。如果在設計時一開始就考慮進去,這會使后期的維護工作變得相對便捷,找 HTML 代碼的就直接找 html 文件,找 JavaScript 代碼的就直接找 js 文件,找CSS 代碼的就直接找 css 文件。
將 JavaScript 和 HTML分離是前端必須要做的一種事。JavaScript 誕生是要讓 HTML 更豐富, 而不是更雜亂?;旌显谝黄饡е拢篵ug 跟蹤工具難以調試。隨著分工更細分,寫 HTML 的人不 一定要負責寫 JavaScript。 CSS 和 HTML 一般也是分離的,不過這大都是網頁設計師或者叫前端重構工程師的任務了。 另外保持 CSS 和 JavaScript 之間清晰的分離是很有挑戰的,例如第 2 章的范例有控制 style.width的,還有控制 style.display 的,是否需要完全分離這確實需要具體情況具體分析,不過如果完全不注意這一點,任由其發展,一旦出現問題,大家首先去找 CSS,精疲力盡時才會去 JavaScript 中查 找樣式問題,這會給維護人員挖下很大一個坑,做人一定要厚道!

3.1.2 照片展示功能設計

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

  • 有大圖和縮略圖
  • 有上一張圖和下一張圖切換
  • 有鍵盤控制顯示上一張圖和下一張圖
  • 有顯示上一組和下一組功能在

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

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

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

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

您可能感興趣的文章:
Node.js簡介與安裝開發環境教程
Jquery 學習筆記(一)
Node.js模塊學習教程
node.js入門實例教程
HTML5 File Uploads with jQuery
jQuery HTML5 Uploader
Jquery實戰_讀書筆記1—選擇jQuery
jQuery HTML5 Uploader
基于JQuery 選擇器使用說明介紹
什么是Node.js?Node.js使用詳細介紹

[關閉]
微信下载APP完成任务如何赚钱 黑龙江11选5开奖结果 加拿大28玩法是什么 十一选五铁定规律技巧 十一选五最简单技巧 海南飞鱼游戏规则 股票融资利弊 山东11选5开奖走势图 北京pk拾赛车彩票平台 极速赛车网站平台下载 浙体育彩票6十1开奖号