导航：首页 > 网络技术 >

JavaScript、jQuery、HTML5、Node.

发表于：2024-11-24 作者：热门IT资讯网编辑

编辑最后更新 2024年11月24日，技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【JavaScript实战----JavaScript、jQuery、HTML5、Node.js实例大全】第 3 章用 JavaScrip

技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【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 是国内早期提供相册功能的公司之一，相册用户群体很大，参考其相册会发现，照片展示的基本功能如下：