JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

技术非常多。样例非常多,仅仅好慢慢学,慢慢实践。!如今学的这本书是【JavaScript实战----JavaScriptjQueryHTML5Node.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书。

时间: 2024-10-23 03:15:05

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1的相关文章

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

技术非常多,样例非常多.仅仅好慢慢学,慢慢实践!!如今学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuery.HTML5.Node.js实例大全-读书笔记2 3.3 响应鼠标动作 图3-2的效果已经有了,须要鼠标来操作展示想看的照片.这就须要在对应的地方加上事件. 3.3.1 响应小照片单击动作 在3.2.3的代码里提供了显示小图列表的eg.showThumb()方法.在单击小图片时要显示大图片.

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuery.HTML5.Node.js实例大全-读书笔记1 3.2 照片加载与定位 根据功能设计,可以先写好 HTML 结构基础,再配好 CSS 做出大致效果,最后用 JavaScript加上各种动作.首先请看 HTML 代码结构. 3.2.1 HTML 代码 CSS代码保存到 eg3.css 文件中,Ja

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记4

5.2.2 让瀑布流动起来 打好基建之后,就需要写JavaScript代码.首先如果数据不够显示一屏幕的情况,就用新数据来补足它,在补充的时候是根据4列中最矮的那一个为优先补充,因为高矮尺寸一般只有在客户端才看得到,服务端虽然也可以计算,但是会很浪费资源,客户端的内存和CPU能用则多用,只要不让客户端变慢就行. 只要图片高度不一致,通过这样的思路很快就可以看到一个“瀑布流”,这仅仅是静态的,一般滚动的时候瀑布流都会添加数据,所以接下来就是添加滚动事件,只要有滚动就计算然后补充数据. 先看图5-5

node.js开发指南读书笔记(1)

3.1 开始使用Node.js编程 3.1.1 Hello World 将以下源代码保存到helloworld.js文件中 console.log('Hello World!'); console.log('%s:%d', 'hello', 25); 找到文件位置,执行node helloworld.js.结果如下: 3.1.2 Node.js命令行工具 输入:node --help可以看到详细的帮助信息. 除了直接运行脚本外,node --help显示的用法中说明了另一种输出hello wor

JavaScript&jQuery.HTML5事件

HTML5事件 事件 说明 DOMContentLoaded 在DOM树形成后触发(与此同时,图片.CSS和JavaScript可能还在加载).在这个事件中,脚本运行要早于load事件,因为load事件会等待所有资源(比如图片或广告)加载完之后才触发.这种方式会让页面看起来加载速度更快. hashchange 当URL的hash值变化时(不会造成整个窗口刷新)触发.hash值通常在链接中用来指定不同的部分(也被称作为锚点),在使用AJAX加载的页面内容中也会被使用. beforeunload 当

jQuery内核详解与实践读书笔记1:原型技术分解2

上一篇已经搭建了一个非常简陋的jQuery框架雏形,如没有阅读搭建过程,请先阅读<jQuery内核详解与实践读书笔记1:原型技术分解1>初始搭建过程.接下来,完成书中介绍的剩下三个步骤: 7. 延续--功能扩展 jQuery框架是通过extend()函数来扩展功能的,extend()函数的功能实现起来也很简单,它只是吧指定对象的方法复制给jQuery对象或jQuery.prototype对象,如下示例代码就为jQuery类和原型定义了一个扩展功能的函数extend(). 1 var $ = j

node.js框架StrongLoop学习笔记(一)

node.js框架StrongLoop学习笔记(一) 本人在用node.js做手机后台,查找框架发现StrongLoop挺适合,可是却发现没有中文教程,于是在自己学习时,做一下笔记,以方便其他像我一样的人参考(本人的英语水平非常差,只能一点点试着做,并记录下来,如果大家发现问题,请通知我好更正,谢谢了!).所有操作都是在CentOS7-x64,Node.js 0.12.2下完成的. nodejs框架StrongLoop学习笔记一 安装StrongLoop 创建项目 安装数据库驱动 配置数据库连接

代码大全读书笔记 - 开篇

说起来,<代码大全>这本书书名实在恶俗.在我推荐给展鸿的时候,他说"雾草,这名字看着就像天朝地摊那种XX全书一类的山寨书-" 是的,其实买这个书的原因就是京东买100减30,我买了10块钱的东西,凑了一下单,书到手之前还以为是代码清单,或者以前ACM模板一样的书,甚至买来的一个月里面都拿来当枕头(足足10+cm厚). 这个周末偶然的翻开,才发现,世界上竟然有如此精彩的书,而且很多东西讲的虽然是软件项目,但给了我很多引申到其他东西上面的灵感.很多地方我读到之后,都会兴奋的心跳

NODE.JS开发指南学习笔记

1.Node.js是什么 Node.js是一个让JS运行在服务器端的开发平台,它可以作为服务器向用户提供服务.Node.js中的javascript只是Core javascript,或者说是ECMAJavaScript的一个实现.2.Node.js能做什么 JS是为客户端为生,而Node.js是为网络而生.利用它可以轻松的开发出很多网站.社交应用.服务器等等. Node.js内建有一个HTTP服务器支持,可以实现一个网站和服务器的组合.3.异步式I/O和事件驱动 Node.js最大的特点就是采