JavaScriptjQueryHTML5Node.js实例大全-读书笔记1

Posted 2020-09-29 yutingliuyl

技术非常多。样例非常多，仅仅好慢慢学，慢慢实践。！如今学的这本书是【JavaScript实战----JavaScript、jQuery、HTML5、Node.js实例大全】

第 3 章 用 javascript 实现的照片展示

构建软件设计的方法有两种：一种是把软件做得非常easy以至于明显找不到缺陷。还有一种是把它 做得非常复杂以至于找不到明显的缺陷。

——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 一般也是分离的，只是这大都是网页设计师或者叫前端重构project师的任务了。

另外保持 CSS 和 JavaScript 之间清晰的分离是非常有挑战的。比如第 2 章的范例有控制 style.width的。还有控制 style.display 的，是否须要全然分离这确实须要详细情况详细分析，只是假设全然不注意这一点。任由其发展。一旦出现故障，大家首先去找 CSS，精疲力尽时才会去 JavaScript 中查 找样式问题，这会给维护人员挖下非常大一个坑，做人一定要厚道！

 

3.1.2 照片展示功能设计

  

163 是国内早期提供相冊功能的公司之中的一个，相冊用户群体非常大，參考其相冊会发现，照片展示 的基本功能例如以下：

•  有大图和缩略图
•  有上一张图和下一张图切换
•  有键盘控制显示上一张图和下一张图
•  有显示上一组和下一组功能在代码方面，考虑代码 3 层分离。

代码方面，考虑代码 3 层分离。

今天就先介绍到这里吧，有一起学习的小白们。欢迎粉我。

最具士兵袭击实战类型的JavaScript

JavaScript实战一书的基础知识部分帮助读者高速踏入JavaScript领域之门。jQuery部分帮助读者随心所欲地去工作，HTML5部分帮读者搭上时代的班车。Node.JS则能够让读者屹立在技术的前沿。笔者的目的就是力求写出最懂人性最懂技术的JavaScript书。