阅读 88

[书籍精读]《基于MVC的JavaScript Web富应用开发》精读笔记分享

写在前面

  • 书籍介绍:这本书专注于讲述如何构建“优雅又不失高水准”的JavaScript应用,包括软件架构、模板引擎、框架和库、同服务器的消息通信等内容。
  • 我的简评:比较老的一本书,引用的一些框架和库现在已经不流行了,可以大致翻看一下。内容主要讲如何抽象js前端开发,让代码变得更清晰,具体采用的方法在js里面实现class、MVC、module等抽象,对提高编程思维帮助还是挺大的。
  • !!福利:文末有pdf书籍、笔记思维导图、随书代码打包下载地址哦。想看看[书籍精读]系列所有文章,请移步:[推荐收藏]JavaScript书籍精读笔记系列导航

第1章 MVC和类

之初

  • 一个原因是早期的JavaScript实现非常糟糕,有很多bug;另一个原因是因为其名字带有“Java”前缀,让人以为它和Java有关系
  • 真正的原因在于大多数开发者接触使用JavaScript的方式

增加结构

  • 构建大型的JavaScript应用的秘诀是不要构建大型JavaScript应用。你应当把你的应用解耦成一系列相互平等且独立的部分
  • 本书提倡使用MVC模式,这是一种久经考验的搭建应用的方式,可以确保应用的可维护性和可扩展性

什么是MVC

  • MVC是一种设计模式,它将应用划分为3个部分:数据(模型)、展现层(视图)和用户交互层(控制器
  • 一个事件的发生是这样的过程:1.用户和应用产生交互;2.控制器的事件处理器被触发;3.控制器从模型中请求数据,并将其交给视图;4.视图将数据呈现给用户;

模型

  • 模型用来存放应用的所有数据对象
  • 模型不必知晓视图和控制器的细节,模型只需包含数据及直接和这些数据相关的逻辑。任何事件处理代码、视图模板,以及那些和模型无关的逻辑都应当隔离在模型之外

视图

  • 视图层呈现给用户的,用户与之产生交互。在JavaScript应用中,视图大都是由HTML、CSS和JavaScript模板组成的。除了模板中简单的条件语句之外,视图不应当包含任何其他逻辑

控制器

  • 控制器是模型和视图之间的纽带。控制器从视图获得事件和输入,对它们进行处理(很可能包含模型),并相应的更新视图

向模块化进军 创建类

  • 有必要强调一下:JavaScript是基于原型的编程语言,并没有包含内置类的实现。但通过JavaScript可以轻易的模拟出经典的类
  • JavaScript中并没有真正的类,但JavaScript中有构造函数和new运算符。构造函数用来给实例对象初始化属性和值。任何JavaScript函数都可以用做构造函数,构造函数必须使用new运算符作为前缀来创建新的实例
  • new 运算符改变了函数的执行上下文,同时改变了return语句的行为
  • 当使用new关键字来调用构造函数时,执行上下文从全局对象(window)变成一个空的上下文,这个上下文代表了新生成的实例

基于原型的类继承

  • JavaScript是基于原型的编程语言,原型用来区别类和实例
  • 当你读取一个对象的属性时,JavaScript首先会在本地对象查找这个属性,如果没有找到,JavaScript开始在对象的原型中查找,若还未找到还会继续查找原型的原型,直到查找到Object.prototype。如果找到这个属性,则返回这个值,否则返回undefined

函数调用

  • 函数内上下文,如this的取值,取决于调用它的位置和方法
  • 其他两种方法可以调用函数:apply()和call()。两者的区别在于传入函数的参数的形式
  • 其他编程语言不允许手动更换上下文也没什么不好。JavaScript中允许更换上下文是为了共享状态,尤其是在事件回调中
  • 在新版本的JavaScript-ES5种同样加入了bind()函数用以控制调用的作用域。bind()是基于函数进行调用的。用来确保函数是在指定的this值所在的上下文中调用的

添加私有方法

  • 很多开发者都习惯在私有属性之前冠以下划线前缀_。尽管本质上这并不是私有属性,但至少能一眼看出来他们就是私有属性,因此它是私有API的组成部分
  • JavaScript的确支持不可变属性,然而在主流浏览器中并未实现,我们还没办法直接利用这个特性
  • 相反,我们可以利用JavaScript匿名函数创建私有作用域,这些私有作用域只能在内部访问

第2章 事件和监听

写在前面

  • 在JavaScript诞生之初“事件”的实现并不标准
  • 尽管后来W3C对此作了标准化,但IE仍然坚持使用与W3C不兼容的事件模型,直到发布的IE9才遵循标准化
  • jQuery和Prototype的类库很好的处理了兼容性问题,对外提供了统一的API来实现事件

监听事件

  • 绑定事件监听的函数叫做addEventListener(),它有3个参数:type、listener及useCapture

事件顺序

  • Netscape4支持事件捕捉(capturing),从顶层的父节点开始触发事件,从外到内传播
  • 微软则支持事件冒泡(bubbling),从最内层的节点开始触发事件,逐级冒泡直到顶层节点,从内向外传播
  • W3C对此做了让步,将对这两种事件模型的支持都加入标准规范之中。根据W3C模型,事件首先被目标元素所捕捉,然后向上冒泡

取消事件

  • 一些类库如jQuery还支持stopImmediatePropagation()函数,用来阻止后续所有的事件触发-哪怕这些事件是注册在同一个节点元素上的也不例外
  • 可以通过调用event对象的preventDefault()函数来阻止默认行为,同样也可以通过在回调中返回false来实现同样的效果

事件库

  • jQuery的API提供了bind()函数用来跨浏览器绑定事件监听。在一个jQuery实例上调用此函数,传入事件名称和回调函数
  • 并不是所有的浏览器都支持DOMContentLoaded,因此jQuery将它融入ready()函数,这个函数是兼容各个浏览器的

委托事件

  • 从事件冒泡时开始就发生了事件委托,我们可以直接给父元素绑定事件监听,用来检测在其子元素内发生的事件

自定义事件

  • 除了浏览器内置的事件之外,我们也可以触发和绑定自定义事件
  • jQuery中可以使用trigger()函数来触发自定义事件

DOM无关事件

  • 事件本质上是和DOM无关的,因此可以很容易的开发一个事件驱动的库
  • 发布/订阅(Pub/Sub)是一种消息模式,它有两个参与者:发布者和订阅者。发布者向某个信道(channel)发布一条消息,订阅者绑定这个信道,当有消息发布至信道时就会接受到一个通知
  • 发布者和订阅者的解耦可以让你的应用易于扩展,而不必引入额外的交叉依赖和耦合,从而提高了应用的可维护性,添加额外功能也非常容易

第3章 模型和数据

  • 传统方式是通过页面请求从数据库获取数据,用户和页面中的结果进行直接交互
  • 在复杂的JavaScript应用中做数据管理是非常困难的。前端并没有请求/响应模型,也没有办法访问服务器端的变量,甚者,远程取回的数据只是临时的保存在客户端

MVC和命名空间

  • 在JavaScript中,我们通过给对象添加属性来管理一个命名空间,这个命名空间可以是函数,也可以是变量

构建对象关系映射(ORM)

  • 对象关系映射(Object-relational mapper,简称ORM)是在除了JavaScript以外的编程语言中常见的一种数据结构
  • 在JavaScript应用中,对象关系映射也是一种非常有用的技术,它可以用做数据管理及用做模型
  • 原型继承:Object.create()传入一个对象,返回一个继承了这个对象的新对象,可以很容易的模拟出这个函数
  • 添加ORM属性:jQuery.extend()只是代替for循环手动复制属性的一种快捷方式
  • 持久化记录:我们需要一种保持记录持久化的方法,即将引用保存至新创建的实例中以便任何时候都能访问它

增加ID支持

  • 技术的角度讲,出于API的原因,Javascript无法友好正式的生成128位的GUID,它只能生成伪随机数
  • 生成真正随机的GUID是一个众所周知的难题,操作系统使用MAC地址、鼠标位置、BIOS的校验和、测量电信号的噪声或者检测放射性衰变来计算GUID,甚至用上了熔岩灯

装载数据

  • 数据的预加载时一个重要的手段,这能让应用的体验更流畅、速度更快,用户的等待时间也尽可能压缩到很短
  • 数据可以直接嵌套显示在初始页面中,或者通过Ajax或JSONP的方式使用单独的HTTP请求加载数据
  • 直接在初始页面中嵌套数据会增加页面体积,而并行加载会更快一些。Ajax和JSON同样允许你将HTML页面缓存住,而不是每次渲染都会动态发起请求
  • JSONP:原理是通过创建一个script标签,所辖的外部文件包含一段JSON数据,数据是由服务器所返回的,作为参数包装在一个函数调用中。script标签获取脚本文件并不受跨域的限制,所有浏览器都支持这种技术

本地存储数据

  • 在过去本地数据存储一直都是瓶颈。惟一可用的方法就是使用cookies和类似Adobe Flash的插件
  • HTML5加入了对本地存储的支持,而且主流浏览器都已经实现了本地存储。和cookies不同,这些数据妥妥的存放在客户端,且不会发给服务器。而且可存储的数据量非常巨大,不同的浏览器额存储上限有所不同,但至少都能为每个域名提供5M的存储空间
  • 浏览器端所储存的数据是以域名分隔开的,某个域中的脚本存储的数据只能被这个域读取

给ORM添加本地存储

  • 页面加载时从本地存储中读取数据,页面关闭时将数据保存在本地存储中,这的确是个好主意

第4章 控制器和状态

写在前面

  • JavaScript应用往往被限制在单页面,这也意味着可以将状态保存在客户端的内存中
  • 应当避免将状态或数据保存在DOM中,因为根据滑坡理论,这会导致程序逻辑变得更加错综复杂且混乱不堪
  • 控制器是模块化的且非常独立
  • 理想状态下不应该定义任何全局变量,而应当定义完全解耦的功能组件

模块模式

  • 模块模式是用来封装逻辑并避免全局空间污染的好方法。使用匿名函数可以做到这一点,匿名函数也是JavaScript中被证明最优秀的特性之一

添加少量上下文

  • 使用局部上下文是一种架构模块很有用的方法,特别是当需要给事件注册回调函数时

状态机

  • 使用状态机可以轻松地管理很多控制器,根据需要显示和隐藏视图
  • 本质上讲状态机由两部分组成:状态和转换器。它只有一个活动状态,但也包括很多非活动状态。当活动状态之间相互切换时就会调用状态转换器

路由选择

  • 我们需要将应用的状态反映在URL中,建立状态和URL的某种对应关系,当应用的状态发生改变时,URL也随之改变,反之亦然

第5章 视图和模板

写在前面

  • 视图是应用的接口,它们为用户提供视觉呈现并与用户产生交互
  • 视图是无逻辑的HTML片段,由应用的控制器来管理,视图处理事件回调及内嵌数据
  • 最常用的方法就是用Ajax,Ajax返回一个JSON对象,然后由应用的模型载入它。你不必在服务器端对HTML做预渲染操作,而是将渲染界面的操作全放在客户端

动态渲染视图

  • 通过JavaScript程序创建视图有很多种方式,其中一种方式是使用document.createElement()创建DOM元素,设置它们的内容并将它们追加至页面中。当需要重绘视图时,只需将视图清空并重复前面的过程
  • 我更推荐将静态HTML包含在页面中,在必要的时候显示或隐藏。这会让控制器中所有和视图相关的代码量降到最少,你也可以根据需要更新元素的内容

模板

  • JavaScript模板的核心概念是,将包含模板变量的HTML片段和JavaScript对象做合并,把模板变量替换为对象中的属性值
  • JavaScript中的模板类库的实现原理和其他语言没什么两样,比如PHP的Smarty,Ruby的ERB,以及Python的字符串格式化

绑定

  • 本质上讲,绑定将视图元素和JavaScript对象(通常是模型)挂接在一起。当JavaScript对象发生改变时,视图会根据新修改后的对象做实时更新
  • 绑定,意味着当记录发生改变时你的控制器不必处理视图的更新,因为这些更新都是在后台自动完成的

第6章 依赖管理

  • JavaScript中缺失了很多计算机高级编程语言所应有的功能特性,其中一个重要的特性就是依赖管理和模块系统
  • 依赖管理系统除了能解决实际的编程复杂度和可维护性的问题,还能解决性能方面的问题

CommonJS

  • Node.js提供了require()函数,用来加载外部资源文件,Node.js自有的模块系统也使用这种方式来管理

模块加载器

  • 目前最主要、应用最广泛的两个模块实现时Transport C和Transport D
  • Yabble
  • RequireJS

模块的按需加载

  • Sprockets非常聪明,它会保证只加载库文件一次,自动忽略之后的加载需求。相比于CommonJS模块,Sprockets支持缓存和压缩
  • Sprockets(包括所有的模块包装器)的中心思想是,所有的JavaScript文件都需要预处理,不管是在服务器端用程序作处理,还是使用命令行工作作处理
  • LABjs

无交互行为内容的闪烁(FUBC)

  • 用户可能会看到页面闪了一下,出现一部分没有交互行为的内容快速闪过(FUBC),比如在JavaScript执行之前会有一部分无样式的页面原始内容闪烁一下

第7章 使用文件

  • 以往,文件的访问和操作都是基于桌面应用程序,在Web中操作文件必须借助第三方插件技术,比如Adobe Flash
  • 在现代浏览器中,用户可以直接将文件拖拽进页面中,粘贴格式化数据,或是实时查看上传文件的进度

浏览器支持

  • 特性检测:window.File && window.FileReader && window.FileList

获取文件信息

  • HTML5的文件操作有一定的安全限制,主要的限制是只有被用户选中的文件才能被访问

文件输入

  • 对于开发者来说,长期以来很让人头疼的是多文件上传。过去开发者只能堆积很多文件输入框或者依赖插件(如Flash)来实现多文件上传。HTML5提供了multiple属性来支持多文件

拖拽

  • 早在1999年,微软的IE5就“设计”并实现了最原始的拖拽,自那时起后续的IE版本都支持拖拽。HTML5规范刚刚增加了拖拽的内容,现在Safari、Firefox和Chrome也都模仿IE的实现提供了拖拽支持

复制和粘贴

  • 除了将拖拽功能和桌面进行整合,有些浏览器还支持复制和粘贴
  • 复制粘贴使用了clipbordData,拖拽使用了dataTransfer

读文件

  • 当你获得File的引用时,可以用它来实例化一个FileReader对象,将文件内容读入内存
  • FileReader中包含四个方法来读取文件数据:readAsBinaryString、readAsDataURL、readAsText、readAsArrayBuffer
  • 二进制大文件和文件切割

自定义浏览器按钮

  • 我们往往希望点击一个带自定义样式的“浏览”或“附件”按钮来即刻打开浏览文件对话框
  • 文件输入框并不提供打开浏览文件对话框的函数,而且Firefox的实现更诡异,当点击文件输入框时甚至无法触发自定义的click事件
  • hack技术,当将鼠标移动到按钮上方时,在相同的位置放置一个透明的文件输入框,尺寸和按钮一样。透明的文件输入框可以获取任何点击事件,并打开一个浏览文件的对话框

上传文件

  • FormData实例用一种非常简单的接口表示表单的内容。可以直接通过抓取一个表单来创建FormData,或者在实例化对象时传入已经存在的form元素

jQuery拖拽上传

  • 实现一个可拖拽上传文件的功能。需要几个库:jquery.js用来做底层库,jquery.ui.js用来构建进度条,jquery.drop.js用来提供抽象的拖拽API,以及jquery.upload.js用来作Ajax上传

第8章 实时Web

实时Web的发展历史

  • 传统的Web是基于HTTP的请求/响应模型的:客户端请求一个新页面,服务器将内容发送到客户端,客户端再请求另外一个页面时又要重新发送请求
  • 如果服务器有更多数据需要推送到客户端,在页面加载完成后是无法直接将数据从服务器发送给客户端的
  • 最简单(暴力)的方案是用轮询:每隔一段时间都会向服务器请求新数据,这让用户感觉应用是实时的
  • 后面随着Comet技术的提出,又出现了很多更高级的解决方案。这些技术方案包括永久帧(forever frame)、XHR流(xhr-multipart)、htmlfile以及长轮询
  • 长轮询是指,客户端发起一个到服务器的XHR连接,这个连接永不关闭,对客户端来说连接始终是挂起状态。当服务器有新数据时,就会及时地将响应发送给客户端,接着再将连接关闭。然后重复整个过程,通过这种方式就实现了“服务器推”(server push)
  • 现在HTML5规范为我们准备了一个替代方案。鉴于大部分浏览器还未实现HTML5的WebSocket,现行最好的办法仍然是使用Comet

WebSocket

  • WebSocket是HTML5规范的一部分,提供基于TCP的双向的、全双工的socket连接。这意味着服务器可以将数据推送给客户端,而不需要开发者求助于长轮询或插件来实现,这是一个很大的进度
  • 为了更好更成功的使用WebSocket,这里给出一些步骤
  • 幸运的是,在很多语言中都实现了对WebSocket的支持,比如Ruby、Python和Java
  • Node.js和Socket.IO

实时架构

  • 实时架构是基于事件驱动的(event-driven)。事件往往是由用户交互触发的:用户修改了数据记录,事件就会传播给系统,直到数据推送给已经建立连接的客户端并更新数据
  • 如何向特定用户发送通知?最佳方法是使用发布/订阅模式:客户端订阅某个特定的信道,服务器向这个信道发布消息。每个用户订阅惟一的信道。信道包含一个ID,可能是用户在数据库中存放的ID。然后,服务器只需向这个惟一的信道发布消息即可,这样就可以做到将通知发送给特定的用户

感知速度

  • 速度是UI设计最重要也是最易忽略的问题,速度对用户体验(UX)的影响非常大,并直接影响网站的收益
  • Web应用中最耗时的部分就是新数据的加载。最明智的做法是在用户请求数据之前预测用户的行为并预加载数据,这一点非常重要

第13章 JavaScriptMVC类库

  • JavaScriptMVC(JMVC)是一个基于jQuery的开源JavaScript框架。它基本上就是一个完整的前端开发框架,将一些实用的测试工具、依赖关系管理、文档和许多非常有用的jQuery插件都打包在一起了
  • JavaScriptMVC的$.Class(基于JavaScript的类系统)、$.Model(传统的模型层)、$.View(客户端模板系统)、$.Controller(jQuery的widget工厂)

模型

  • JavaScriptMVC的模型和它的插件提供了很多组织模型数据的工具,如校验、关联、列表等。但核心功能集中在服务封装、类型转换和事件上

在视图中使用客户端模板

  • $.View是一个模板接口,使用模板来降低复杂度,提供如下支持

写在后面