疯狂前端开发讲义: jQuery+AngularJS+Bootstrap前端开发实战

907 Pages·2017·131.686 MB·Chinese

by  李刚

内容简介
本书基于《疯狂Ajax讲义（第3版）》部分升级而来，全书升级
了HTML 5.1支持的XMLHttpRequest， jQuery升级到3.1。本书的重点
是新加入的两个目前十分主流的前端框架：AngularJS和Bootstrap。
本书详细、全面地介绍了AngularJS和Bootstrap的知识，由于这两个
框架是本书的重点，因此本书花了近400多页来介绍它们的功能和用
法，这部分内容独立出来完全可以作为AngularJS和Bootstrap的学习
手册。
全书主要就是讲解jQuery 3.1、AngularJS 1.6、Bootstrap 3.3这三
个最常用的前端框架，并针对每个框架都提供了实用的案例，让读者
理论联系实际。这部分内容是“疯狂软件教育中心”的标准讲义，既包
含了实际前端开发的重点和难点，也融入了大量学习者的学习经验和
感悟。笔者以丰富的授课经验为基础，在讲解时深入浅出，力求使读
者真正掌握前端开发的精髓。
本书最后提供了两个综合性案例：图书管理系统和电子拍卖系
统，这两个项目都综合利用了jQuery、AngularJS、Bootstrap前端开发
技术，并在后端采用了最流行、最规范的轻量级Java EE架构：控制
器层-＞业务逻辑层-＞数据持久化层。这两个案例对实际项目具有极
好的指导价值和借鉴意义。案例既提供了IDE无关的、基于Ant管理
的项目源码，也提供了基于Eclipse IDE的项目源码，最大限度地满足
读者的需求。如果在阅读本书时遇到任何技术问题，都可登录
http://www.crazyit.org与本书庞大的读者群交流。
本书并非针对零基础的读者，本书不再包含HTML、CSS、
JavaScript相关知识，这些知识是阅读本书的基础。本书适合有初步
HTML、CSS、JavaScript基础的读者，或对企业应用前端开发不太熟
悉的开发人员。如果您已经掌握本书上篇：《疯狂HTML 5/CSS
3/JavaScript讲义》的内容，将非常适合阅读本书。
未经许可，不得以任何方式复制或抄袭本书之部分或全部内
容。
版权所有，侵权必究。
图书在版编目（CIP）数据
2
疯狂前端开发讲义：jQuery+AngularJS+Bootstrap 前端开发实战 /
李刚编著. —北京：电子工业出版社，2017.10
ISBN 978-7-121-32680-6
Ⅰ. ①疯… Ⅱ. ①李… Ⅲ. ①网页制作工具-JAVA语言-程序设计
②网页制作工具-超文本标记语言-程序设计 Ⅳ.
①TP393.092.2②TP312.8
中国版本图书馆CIP数据核字（2017）第223292号
策划编辑：张月萍
责任编辑：牛勇
印刷：
装订：
出版发行：电子工业出版社
北京市海淀区万寿路173信箱 邮编：100036
开本：787×1092 1/16 印张：33.5 字数：900千字
版次：2017年10月第1版
印次：2017年10月第1次印刷
定价：79.00元
凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。
若书店售缺，请与本社发行部联系，联系及邮购电话：（010）
88254888，88258888。
质量投诉请发邮件至[email protected]，盗版侵权举报请发邮件
至[email protected]。
本书咨询联系方式：010-51260888-819，[email protected]。
3
前言
现在企业应用开发越来越重视前端开发，很多企业已经独立出一
个专门的岗位：前端开发工程师，前端开发工程师专门负责企业应用
的前端编程。前端工程师与美工不同，美工负责的是应用界面的规划
和设计，他们只负责做出静态的界面构图，有时也包括规划界面交互
效果，但美工通常并不懂编程实现；而前端开发工程师则负责使用
HTML 5、CSS、JavaScript以及各种前端框架来实现整个前端界面：
包括应用界面的搭建、用户交互的实现，这些内容其实都属于
JavaScript编程。
有些初学者往往容易混淆美工和前端开发工程师的区别：他们以
为会用网页设计工具制作网页就算前端开发工程师。实际上会用网页
设计工具既算不上美工，也算不上前端开发工程师。美工的重点
在“美”，他们需要有扎实的美术功底，他们可用任何工具来“设计”静
态界面，甚至可直接在纸上绘制界面草图，因此网页制作工具只是其
中的工具之一；而前端开发工程师往往并不使用网页设计工具，他们
通常会使用专门的代码编写工具，他们用HTML、CSS来编写静态界
面，再使用 JavaScript 或各种前端框架来实现界面的动态交互效果。
因此，前端开发工程师的本质依然是程序员，他们常用JavaScript以
及各种JavaScript框架，如jQuery和AngularJS等。
这里必须说明，前端开发并不简单，原因主要有如下两点：
➢ JavaScript作为一门编程语言，有其自身的优势和特点，要想
真正掌握并熟练使用它，有一定的难度。
➢ 各浏览器之间存在一定的差异（虽然这种差异正在被相应的
规范减少），而且同一个浏览器的不同版本之间也存在较大差异（如
IE 8、IE 9、IE 10等），这同样给广大开发者带来了较大的困难。
正因为前端开发存在的复杂性，使得前端开发的相关框架也相当
活跃，除了最主流的jQuery之外，其他还有如AngularJS、Bootstrap
等。尤其是jQuery，目前它已经超出一般框架的概念，甚至变成了某
种规范，很多前端框架底层都会借鉴或依赖jQuery。
AngularJS则是一个非常实用的前端框架，这个框架不是一种简
单的工具，它甚至会强迫开发者采用一种优雅的前端架构，这也是笔
4
者对这个框架情有独钟的原因。
对于初级甚至中级的前端开发者来说，他们有一定的JavaScript
代码功底，如果单纯交代他们实现一个前端功能，他们可能也可以实
现出来，但他们的实现风格要么乱七八糟，要么“随心所欲”：今天可
能这样实现，明天可能会那样实现—如果整个前端都由一个开发者完
成，这样做可能问题不大。但实际企业应用的前端往往需要多人协作
开发，这时各前端开发者的风格不统一就会带来巨大的沟通成本，从
而导致项目进度受阻。
AngularJS的价值就在于此，AngularJS可以极好地规范前端开发
的风格，AngularJS对前端开发进行分层，它将前端开发分为
Controller层、Service层、DAO层和Model层，Model对象则与HTML
页面（视图）上HTML元素进行双向绑定，这样开发者可通过
Controller调用Service、DAO与后端交互，获取后端数据之后，只要
修改其中Model对象的值，视图页面也会随之动态改变。这个设计架
构层次非常清晰，而且具有一定的“强制性”，整个前端团队一旦采用
AngularJS框架，那么整个前端开发风格会变得简单、清晰，所有团
队成员都能采用一致的开发风格，这就是AngularJS的魅力所在。
Bootstrap则更像一个CSS框架，使用起来非常方便。对于大部分
前端开发者，最令人头疼的可能并不是“如何实现”某个界面，而是不
清楚到底“要实现什么”界面？怎样的界面才能算得上优雅、美观？而
Bootstrap正好解决了这个痛点，该框架提供了大量优雅、美观的CSS
样式，开发者直接应用这些CSS样式即可实现优雅、美观的页面。从
这个角度来看，Bootstrap的上手非常简单，甚至不要求开发者掌握
JavaScript知识，只要开发者略懂CSS样式即可，因此Bootstrap完全是
真正简单且强大的前端框架。
本书有什么特点
本书只是一本介绍前端开发的图书，不是一本关于所谓“思想”的
书，更不是一本看完之后可以“吹嘘、炫耀”的书—因为本书并没有堆
砌一堆“深奥”的新名词、一堆“高深”的思想，本书保持了“疯狂Java体
系”的一贯风格：操作步骤详细，编程思路清晰，语言平实。
本书带给读者的只是 9 个字：“看得懂、学得会、做得出”，本书
并不能让你认识一堆新名词，只帮助你掌握扎实的企业前端开发基
础。对于本书，光“看”是不够的，一定要“做”，阅读本书的同时，应
该把所有知识点的配套示例都做出来，这样才能真正掌握本书的知
5
识。
无论如何，读者在阅读本书时遇到知识上的问题，都可以登录疯
狂 Java 联盟（http：//www.crazyit.org）与广大Java学习者交流，笔者
也会通过该平台与大家一起交流、学习。访问
www.broadview.com.cn/32680下载相关资源。
除此之外，本书还有如下几个特点。
1.通俗易懂，适合自学
该书吸收了大量学习者的学习体会和心得，并重点讲解了学习过
程中难以理解和掌握的知识点，降低了学习者的学习难度。
2.知识丰富，内容全面
本书全面、详细地介绍了jQuery 3.1、AngularJS 1.6、Bootstrap
3.3三个框架，它们是企业开发中最主流的前端框架，具有很强的代
表性。掌握本书内容即可具备扎实的前端开发功底。
3.深入实用，实践性强
本书并不是一本前端开发的入门图书，本书全面、深入地介绍了
企业开发中最主流、最具代表性的前端框架，并将它们真正融入Java
企业应用开发中，这对实际企业应用开发具有极好的指导意义。
本书写给谁看
本书并非针对零基础的读者，如果您具有HTML 5、CSS 3、
JavaScript基础，认真学习此书即可让您成为前端开发的实战型人
才；如果已经阅读过本书上篇：《疯狂HTML 5/CSS/JavaScript讲
义》，阅读本书非常合适。如果完全没有HTML、CSS、JavaScript基
础知识，建议您暂时不要购买、阅读此书。
2017-07-28
6
目录
前言
第1章 前端开发与Ajax技术
1.1 重新思考Web应用
1.1.1 应用系统的发展史
1.1.2 传统Web应用的优势和缺点
1.2 重新设计Web应用
1.2.1 富Internet应用
1.2.2 改进的服务器通信
1.2.3 丰富的客户端交互
1.3 前端开发介绍
1.3.1 XMLHttpRequest简介
1.3.2 前端开发的核心技术
1.3.3 前端Ajax的特征
1.3.4 Ajax带来的优势
1.4 前端开发体验：Ajax聊天室
1.4.1 实现业务逻辑组件
1.4.2 注册、登录控制器
1.4.3 注册、登录视图
1.4.4 异步发送请求
1.4.5 聊天控制器
1.4.6 解析服务器响应
1.4.7 何时发送请求
1.5 前端开发的技术难点
1.6 本章小结
第2章 HTML 5增强的XMLHttpRequest对象
2.1 XMLHttpRequest对象的方法和属性
2.1.1 XMLHttpRequest对象的方法
7
2.1.2 XMLHttpRequest对象的属性
2.1.3 XMLHttpRequest对象的事件
2.2 发送请求
2.2.1 发送简单请求
2.2.2 发送GET请求
2.2.3 发送POST请求
2.2.4 发送XML请求
2.2.5 发送表单数据
2.2.6 发送Blob对象
2.3 处理响应
2.3.1 处理响应的时机
2.3.2 使用文本响应
2.3.3 使用JSON响应
2.3.4 使用Blob或ArrayBuffer响应
2.4 XMLHttpRequest对象的运行周期
2.5 跨域请求和安全性问题
2.5.1 跨域请求
2.5.2 安全性问题
2.5.3 性能问题
2.6 本章小结
第3章 jQuery库详解
3.1 jQuery入门
3.1.1 理解jQuery的设计
3.1.2 下载和安装jQuery
3.1.3 让jQuery与其他JavaScript库共存
3.2 获取jQuery对象
3.2.1 jQuery核心函数
3.2.2 jQuery与jQuery.holdReady
3.2.3 以CSS选择器访问DOM元素
3.2.4 以伪类选择器访问DOM元素
8
3.2.5 表单相关的选择器
3.3 jQuery操作类数组的工具方法
3.3.1 过滤相关方法
3.3.2 仿DOM导航查找的相关方法
3.3.3 串联方法
3.4 jQuery支持的方法
3.4.1 jQuery命名空间的方法
3.4.2 数据存储的相关方法
3.4.3 操作属性的相关方法
3.4.4 操作CSS属性的相关方法
3.4.5 操作元素内容的相关方法
3.4.6 操作DOM节点的相关方法
3.5 jQuery事件相关方法
3.5.1 绑定事件处理函数
3.5.2 特定事件相关的方法
3.5.3 事件对象
3.6 动画效果相关的方法
3.6.1 简单动画和复杂动画
3.6.2 操作动画队列
3.7 jQuery的回调支持
3.7.1 回调支持的基本用法
3.7.2 创建Callbacks对象支持的选项
3.8 Ajax相关方法
3.8.1 三个工具方法
3.8.2 使用load方法
3.8.3 jQuery.ajax（options）与
jQuery.ajaxSetup（options）
3.8.4 使用get/post方法
3.9 jQuery的Deferred对象
3.9.1 jQuery的异步调用
9
3.9.2 为多个耗时操作指定回调函数
3.9.3 为普通对象增加Defered接口
3.9.4 jQuery对象的promise方法
3.10 扩展jQuery和jQuery插件
3.11 本章小结
第4章 基于jQuery的应用：电子相册系统
4.1 实现持久层
4.1.1 实现持久化类
4.1.2 配置SessionFactory
4.2 实现DAO组件
4.2.1 开发通用DAO组件
4.2.2 DAO接口定义
4.2.3 完成DAO组件的实现类
4.3 实现业务逻辑层
4.3.1 实现业务逻辑组件
4.3.2 配置业务逻辑组件
4.4 实现客户端调用
4.4.1 访问业务逻辑组件
4.4.2 处理用户登录
4.4.3 获得用户相片列表
4.4.4 处理翻页
4.4.5 使用jQuery实现文件上传
4.4.6 加载页面时的处理
4.5 本章小结
第5章 AngularJS详解
5.1 AngularJS入门
5.1.1 理解AngularJS的基本设计
5.1.2 下载和安装AngularJS
5.2 表达式
5.2.1 简单表达式
10