摘要：
目录1、我是谁，以及我为什么写这个主题2、可以用140个字概述这篇文章吗？3、究竟什么是“大型”JavaScript应用程序？4、让我们回顾一下当前的架构5、想得长远一些6、头脑风暴7、架构提议 7.1 模块化理论 7.2 CommonJS模块 7.3 外观模式 7.4 中介者模式 7.5... 阅读全文
摘要：
近年来由于移动设备对HTML5的较好支持，经常有活动用刮奖的效果，最近也在看H5方面的内容，就自己实现了一个，现分享出来跟大家交流。1、效果2、原理原理很简单，就是在刮奖区添加两个canvas，第一个canvas用于显示刮开后显示的内容，可以是一张图片或一个字符串，第二个canvas用于显示涂层，可以用一张图片或用纯色填充，第二个canvas覆盖在第一个canvas上面。当在第二个canvas上点击或涂抹（点击然后拖动鼠标）时，把点击区域变为透明，这样就可以看到第一个canvas上的内容，即实现了刮奖效果。3、实现（1）定义Lottery类function Lottery(id, cover, 阅读全文
摘要：
1、概述WebRTC是“网络实时通信”（Web Real Time Communication）的缩写，它主要用来让浏览器实时获取和交换视频、音频和数据。WebRTC共分三个API。MediaStream（又称getUserMedia）RTCPeerConnectionRTCDataChannelgetUserMedia主要用于获取视频和音频信息，后两个API用于浏览器之间的数据交换。2、getUserMedia2.1 简介首先，检查浏览器是否支持getUserMedia方法。navigator.getUserMedia || (navigator.getUserMedia = nav... 阅读全文
摘要：
1、概述Mutation Observer（变动观察器）是监视DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知。要概念上，它很接近事件。可以理解为，当DOM发生变动会触发Mutation Observer事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说DOM发生变动立刻会触发相应的事件；Mutation Observer则是异步触发，DOM发生变动以后，并不会马上触发，而是要等到当前所有DOM操作都结束后才触发。这样设计是为了应付DOM变动频繁的情况。举例来说，如果在文档中连续插入1000个段落（p元素），会连续触发1000个插入事件，执 阅读全文
摘要：
1、概述HTTP协议是一种无状态协议，服务端本身不具有识别客户端的能力，必须借助外部机制，比如session和cookie，才能与特定客户端保持对话。这多多少少带来一些不便，尤其在服务器端与客户端需要持续交换数据的场合（比如网络聊天），更是如此。为了解决这个问题，HTML5提出了浏览器的WebSocket API。WebSocket的主要作用是，允许服务器端与客户端进行全双工（full-duplex）的通信。举例来说，HTTP协议有点像发电子邮件，发出后要等待对方回信；WebSocket则是像打电话，服务器端和客户端可以同时向对方发送数据，它们之间存在着一条持续打开的数据通道。WebSocke 阅读全文
摘要：
为了更好地为移动设备服务，HTML5推出了一系列针对移动设备的API。1、Geolocation APIGeolocation接口用于获取用户的地理位置。它使用的方法基于GPS或者其他机制（比如IP地址、WIFI热点等）。下面的方法，可以检查浏览器是否支持这个接口。if (navigator.geolocation) { // 支持} else { //不支持}1.1 getCurrentPosition方法getCurrentPosition方法，用来获取用户的地理位置。使用它需要得到用户的授权，浏览器会跳出一个对话框，询问用户是否许可当前页面获取他的地理位置。必须考虑两种情况的... 阅读全文
摘要：
1、概述JavaScript语言采用的是单线程模型，也就是说，所有任务排成一个队列，一次只能做一件事。随着电脑计算能力的增强，这一点带来很大的不便，无法充分发挥JavaScript的潜能。龙其考虑到，File API允许JavaScript读取本地文件，就更加如此了。Web Worker的目就，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务，再把结果返回给主线程。因此，每一个子线程就好像一个“工人”（worker），默默地完成自己的工作。Web Worker有以下几个特点：同域限制：子线程加 阅读全文
摘要：
1、同域限制所谓“同域限制”是指，出于安全考虑，浏览器只允许脚本与同样协议、同样域名、同样端口的地址进行通信。2、window.postMessage方法浏览器限制不同窗口（包括iFrame窗口）之间的通信，除非两个窗口装载的是同一个域名下的网页。window.postMessage方法就是为了解决这个问题而特定的API，可以让不同域名的窗口互相通信。postMessage方法的格式如下：targetWindow.postMessage(message, targetURL[, transferObject]);上面代码的targetWindow是指向目标窗口的变量，message是要发送的消 阅读全文
摘要：
1、概述localStorage和sessionStorage统称为Web Storage，它使得网页可以在浏览器端储存数据。sessionStorage保存的数据用于浏览器的一次会话，当会话结束（通常是该窗口关闭），数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的属性和方法完全一样。它们很像cookie机制的强化版，能够动用大得多的存储空间。目前，每个域名的存储上限视浏览器而定，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。其中，Firefox的存储存空间由一级 阅读全文
摘要：
1、概述随着浏览器的处理能力不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少用户等待从服务器获取数据的时间。现有的浏览器端数据储存方案，都不适合储存大量数据：cookie不超过4KB，且每次请求都会发送回服务器端；Window.name属性缺乏安全性，且没有统一标准；localStorage在2.5MB到10MB之间（各家浏览器不同）。所以，需要一种新的解决方案，这就是IndexedDB诞生的背景。通俗地说，IndexedDB就是浏览器端数据库，可以被网页脚本程序创建和操作。它允许储存大量数据，提供查找接口，还能建立索引。这些都是localStorage所不具备的。就数据 阅读全文
摘要：
1、拖放效果2、draggable属性如果网页元素的draggable元素为true，这个元素就是可以拖动的。Draggable Div在大多数浏览器中，a元素和img元素默认就是可以拖放的，但是为了保险起见，最好还是加上draggable属性。3、事件拖动过程会触发很多事件，主要有下面这些：dragstart：网页元素开始拖动时触发。drag：被拖动的元素在拖动过程中持续触发。dragenter：被拖动的元素进入目标元素时触发，应在目标元素监听该事件。dragleave：被拖动的元素离开目标元素时触发，应在目标元素监听该事件。dragover：被拖动元素停留在目标元素之中时持续触发，应在目标 阅读全文
摘要：
历史上，JavaScript无法处理二进制数据。如果一定要处理的话，只能使用charCodeAt()方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成Base64编码，再进行处理。这两种方法不仅速度慢，而且容易出错。ECMAScript5引入了Blob对象，允许直接操作二进制数据。Bolb对象是一个代表二进制数据的基本对象，在它的基础上，又衍生出一系列相关的API，用来操作文件。File对象：负责处理那些以文件形式存在的二进制数据，也就是操作本地文件FileList对象：File对象的网页表单接口FileReader对象：负责将二进制数据读入内存URL对象：用于对二进制 阅读全文
摘要：
1、效果2、代码解析（1）requestAnimationFramerequestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。代码中使用这个API，就是告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60 阅读全文
摘要：
1、概述Canvas 用于在网页展示图像，并且可以定制内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas API用于网页实时生成图像，JavaScript通过API来操作图像内容。这样做的优点是：减少HTTP请求数，减少下载的数据，加快网页载入时间，可以对图像进行实时处理。使用前，首先需要建一个Canvas网页元素。 您的浏览器不支持canvas!如果浏览器不支持canvas，则就会显示canvas标签中间的文字——“您的浏览器不支持canvas!”。然后，使用JavaScript获取canvas的DOM对象。var canvas = document... 阅读全文
摘要：
HTML5介绍HTML5是继HTML4以后的下一代HTML标准规范，它提供了一些新的元素和属性。新型的标签有利于搜索引擎和语义分析，同时更好地帮助小屏幕装置和视障人士使用，除此之外，也提供了一些新的功能，总结而言，有如下几大特点：1、取消了一些HTML4里过时的元素和属性标记其中包括纯粹显示效果的标记，如和，它们已经被CSS取代。HTML5吸取了XHTML2的一些建议，包括一些用来改善文档结构的功能，比如，新的HTML标签header，footer，dialog，aside，figure等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。2、内容与展式分 阅读全文